I am encountering some challenges with a JavaScript and OpenLayers integration.
My current code structure is as follows:
<!-- OpenLayers Example -->
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Example</title>
<!-- Styles for example -->
<link rel="stylesheet" href="https://playground.fmeserver.com/css/FMEServerExamples.css" type="text/css" />
<!-- Include FMEServer.js -->
<script type="text/javascript" src="https://api.fmeserver.com/js/v3/FMEServer.js"></script>
<!-- The following are Required for OpenLayers -->
<script type="text/javascript" src="https://openlayers.org/api/OpenLayers.js"></script>
<!--Open Layers-->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<style>
#map {
width: 1500px;
height: 800px;
border: 1px solid black;
}
</style>
</head>
<body>
<h4>This example clips data to a user drawn polygon.</h4>
<form id="exampleForm">
<label><b>Step 1</b> - Draw the Polygon (Double Click to Close): </label>
<input id="draw" type="button" value="Draw" />
<input id="reset" type="button" value="Reset" /><br />
<div id="map" class="map"></div>
<label><b>Step 2</b> - Submit the Request to FME Server: </label>
<input type="button" onclick="processClip();" value="Clip Data To Area" />
</form>
<script type="text/javascript">
var drawControl, mouseControl, polygonLayer, map;
var clippingGeometry = [];
window.onload = function() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([11.974044, 57.708682]),
zoom: 12
})
});
// Layer from Geoserver
var Geoserver_WMS = new ol.layer.Tile({
title: "Test Geoserver",
source: new ol.source.TileWMS({
url: '*URLGoesHere*',
params: {
'LAYERS': '*LayerGoesHere*', 'TILED': true,
'STYLES': ''
},
serverType: 'geoserver',
projection: ol.proj.get('EPSG:3007'),
})
});
map.addLayer(Geoserver_WMS);
document.getElementById( "draw" ).setAttribute( "onclick", "drawPolygon();" );
document.getElementById( "reset" ).setAttribute( "onclick", "drawReset();" );
FMEServer.init({
server : "https://demos-safe-software.fmecloud.com",
token : "568c604bc1f235bbe137c514e7c61a8436043070"
});
};
function drawPolygon() {
drawReset();
polygonLayer = new OpenLayers.Layer.Vector( "Polygon Layer" );
mouseControl = new OpenLayers.Control.MousePosition();
map.addLayer( polygonLayer );
map.addControl( mouseControl );
drawControl = new OpenLayers.Control.DrawFeature( polygonLayer,
OpenLayers.Handler.Polygon );
map.addControl( drawControl );
drawControl.activate();
}
function drawReset() {
if( drawControl ) {
map.removeLayer( polygonLayer );
polygonLayer = null;
mouseControl.deactivate();
mouseControl = null;
drawControl.deactivate();
drawControl = null;
clippingGeometry = [];
}
}
function extractShape() {
if( polygonLayer.features[0] ) {
var vertices = polygonLayer.features[0].geometry.getVertices();
for( var i = 0; i < vertices.length; i++ ) {
var point = vertices[i].transform( toProjection, fromProjection );
clippingGeometry.push( [ point.x, point.y ] );
}
clippingGeometry.push( clippingGeometry[0] );
return true;
}
return false;
}
function showResults( json ) {
// Write out the full return object for visualization
var hr = document.createElement( "hr" );
var div = document.createElement( "div" );
// Extract the download link to the clipped data
var download = json.serviceResponse.url;
div.innerHTML = "<h4>Return Object:</h4><pre>"+JSON.stringify(json, undefined, 4)+"</pre>";
div.innerHTML += "<hr><a href=\""+download+"\">Download Result</a>";
document.body.appendChild( hr );
document.body.appendChild( div );
}
function processClip() {
var repository = "REST-Playground";
var workspace = "WKTClip.fmw";
if( extractShape() ) {
// Process the clippingGeometry into a WKT Polygon string
var geometry = "POLYGON((";
for( var i = 0; i < clippingGeometry.length; i++ ) {
var lat = clippingGeometry[i][1];
var lng = clippingGeometry[i][0];
geometry += lng+" "+lat+",";
}
// Remove trailing , from string
geometry = geometry.substr( 0, geometry.length - 1 );
geometry += "))";
// Set parameters for the Data Download Service (ESRI Shapefile Format)
// FORMAT OPTIONS: ACAD, SHAPE, GML, OGCKML
var params = "GEOM="+geometry+"&FORMAT=SHAPE";
// Use the FME Server Data Download Service
FMEServer.runDataDownload( repository, workspace, params, showResults );
}
}
</script>
</body>
</html>
After clicking on "Draw," I encounter the following Error-message:
Uncaught TypeError: Cannot read property 'addLayer' of undefined
The expected functionality should allow me to obtain coordinates and draw a polygon, but unfortunately, it seems to be malfunctioning.
If anyone can identify the issue within the code, your insights would be greatly appreciated as I am struggling to pinpoint the problem, causing significant frustration. Thank you in advance for any suggestions.