Openlayers marker multilayer example
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: "© <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"];.