Openlayers marker multilayer example

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"];.

Openlayers marker multilayer example

See also