Openlayers marker multilayer example

From OpenStreetMap Wiki
Jump to navigation Jump to search

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