Openlayers marker multilayer example

From OpenStreetMap Wiki
Jump to navigation Jump to search

trash bin

It has been proposed that this page be deleted or replaced by a redirect. See the discussion page for further information.
The given reason is: This page contains an example with the outdated (for years) OpenLayers version 2. This example distracts readers. There are plenty of tutorials elsewhere. Using Leaflet for simple maps is easier than OpenLayers. I don't see the use of keeping this page. Therefore, I propose its deletion. --Nakaner (talk) 13:15, 2 December 2025 (UTC).
(Pages that link to this page.)
This page was last edited by Nakaner; 13:15, 2 December 2025 (UTC) (3 days ago).
  • Openlayers marker multilayer example
  • In other languages

This is an example of adding multiple layers from an array to an OpenLayers map.

Here is the code that is needed (Copy the following into a new HTML file, and view it in a browser: 

<html>
<head>
  <title>Openlayers Marker Array Multilayer Example</title>
</head>
<body>
  <div id="mapdiv"></div>

  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    // Adapted from: harrywood.co.uk
    epsg4326 = new OpenLayers.Projection("EPSG:4326")

    map = new OpenLayers.Map({
      div: "mapdiv",
      displayProjection: epsg4326   // With this setting, lat and lon are displayed correctly in MousePosition and permanent anchor
    });

    //   map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.addLayer(new OpenLayers.Layer.OSM("Wikimedia",
      ["https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png"],
      {
        attribution: "&copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. <a href='https://www.mediawiki.org/wiki/Maps'>Wikimedia's new style (beta)</a>",
        "tileOptions": { "crossOriginKeyword": null }
      })
    );
    // See https://wiki.openstreetmap.org/wiki/Tile_servers for other OSM-based layers

    map.addControls([
      new OpenLayers.Control.MousePosition(),
      new OpenLayers.Control.ScaleLine(),
      new OpenLayers.Control.LayerSwitcher(),
      new OpenLayers.Control.Permalink({ anchor: true })
    ]);

    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
    var lonLat = new OpenLayers.LonLat(8.0, 50.3).transform(epsg4326, projectTo);
    var zoom = 7;
    if (!map.getCenter()) {
      map.setCenter(lonLat, zoom);
    }

    // Put your point-definitions here
    var markers = [
      [9.2, 48.8, 'Cities1'],
      [8.4, 49.0, 'Cities1'],
      [6.2, 48.7, 'Cities1'],
      [2.5, 48.9, 'Cities2'],
      [-1.4, 50.9, 'Cities2'],
      [6.6, 51.8, 'Cities3'],
      [8.6, 49.4, 'Cities3'],
      [11.6, 48.1, 'Cities3']
    ];

    var colorList = ["red", "blue", "yellow"];
    var layerName = [markers[0][2]];
    var styleArray = [new OpenLayers.StyleMap({ pointRadius: 6, fillColor: colorList[0], fillOpacity: 0.5 })];
    var vectorLayer = [new OpenLayers.Layer.Vector(layerName[0], { styleMap: styleArray[0] })];		// First element defines first Layer

    var j = 0;
    for (var i = 1; i < markers.length; i++) {
      if (!layerName.includes(markers[i][2])) {
        j++;
        layerName.push(markers[i][2]);															// If new layer name found it is created
        styleArray.push(new OpenLayers.StyleMap({ pointRadius: 6, fillColor: colorList[j % colorList.length], fillOpacity: 0.5 }));
        vectorLayer.push(new OpenLayers.Layer.Vector(layerName[j], { styleMap: styleArray[j] }));
      }
    }

    //Loop through the markers array
    for (var i = 0; i < markers.length; i++) {
      var lon = markers[i][0];
      var lat = markers[i][1];
      var feature = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo),
        { description: "marker number " + i }
        // see http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.Constants for more options
      );
      vectorLayer[layerName.indexOf(markers[i][2])].addFeatures(feature);
    }

    for (var i = 0; i < layerName.length; i++) {
      map.addLayer(vectorLayer[i]);
    }
  </script>
</body>
</html>

Copy your locations and their layer names instead of the lines [9.2, 48.8, 'Cities1'],. Layer names will be created automaticaly. If you create more than 3 overlay-layers, the colors will be reused. If you need more layer-colors, expand the line var colorList = ["red", "blue", "yellow"];.

See also

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=Openlayers_marker_multilayer_example&oldid=2925846"