1

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 &nbsp;</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>
Improve this question

1 Answer 1

Reset to default
2

You need to add a new Layer:

    var wms = new ol.layer.Tile({
      extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.TileWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'topp:states', 'TILED': true},
        serverType: 'geoserver'
      })
    });

and then add it to your map:

var map = new ol.Map({
  layers: [raster, vector, wms],
  target: 'map',
  view:view
});
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.