I need to add some own layers from geoserver on top of this map with writing functionalities. The tricky thing is where to embed the code in the present script below.
How should the script look like and where should I embed it in the script below?
The map is projected in EPSG:4326 and my layer in geoserver is in EPSG:3021. How do I get the layer right?
<!DOCTYPE html>
<html>
<head>
<title>Draw Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">None</option>
</select>
<p>
DrawEnd - Lon,Lat <b id="drawend"></b></p>
</form>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({
wrapX: false
});
var vector = new ol.layer.Vector({
source: source
});
var view = new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 4,
})
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view:view
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
});
draw.on('drawend', function(e2) {
var feature = e2.feature;
var coords = feature.getGeometry().getCoordinates();
var lon, lat;
coords.forEach(function(latlon) {
document.getElementById('drawend').innerText = latlon
console.log(latlon)
});
});
map.addInteraction(draw);
}
}
/**
* Handle change event.
*/
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>
