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>
    <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>
<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>
  DrawEnd - Lon,Lat  <b id="drawend"></b></p>
  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',

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


 * Handle change event.
typeSelect.onchange = function() {


1 Answer 1


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',

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.