Harry Wood
home
>
maps
>
examples
> openlayers >
OpenLayers with many layers defined
OpenLayers with many layers defined
Example of setting up OpenLayers with many layers defined.
See
maps.compton.nu
for a leaflet example
<html> <head> <title>OpenLayers with many layers defined</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script> <script> function init() { var epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection map = new OpenLayers.Map({ div: "mapdiv", displayProjection: epsg4326 } ); map.addControls([new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.Permalink(), new OpenLayers.Control.Attribution()]); map.addLayer(new OpenLayers.Layer.OSM("OpenStreetMap Standard Style", ["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png", "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png", "https://c.tile.openstreetmap.org/${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>", "tileOptions": { "crossOriginKeyword": null }})); map.addLayer(new OpenLayers.Layer.OSM("Humanitarian Style", ["http://a.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png", "http://b.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png", "http://c.tile.openstreetmap.fr/hot/${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>. Humanitarian style by <a href='http://hot.openstreetmap.org'>H.O.T.</a>", "tileOptions": { "crossOriginKeyword": null }})); map.addLayer(new OpenLayers.Layer.OSM("Stamen watercolour", ["http://tile.stamen.com/watercolor/${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>. Watercolour style by <a href='http://stamen.com'>Stamen Design</a>", "tileOptions": { "crossOriginKeyword": null }})); map.addLayer(new OpenLayers.Layer.OSM("Stamen toner", ["http://tile.stamen.com/toner/${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>. Toner style by <a href='http://stamen.com'>Stamen Design</a>", "tileOptions": { "crossOriginKeyword": null }})); map.addLayer(new OpenLayers.Layer.OSM("CartoDB positron", ["http://a.basemaps.cartocdn.com/light_all/${z}/${x}/${y}.png", "http://b.basemaps.cartocdn.com/light_all/${z}/${x}/${y}.png", "http://c.basemaps.cartocdn.com/light_all/${z}/${x}/${y}.png", "http://d.basemaps.cartocdn.com/light_all/${z}/${x}/${y}.png"], {attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='http://cartodb.com/attributions'>CartoDB</a>" })); map.addLayer(new OpenLayers.Layer.OSM("CartoDB dark matter", ["http://a.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png", "http://b.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png", "http://c.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png", "http://d.basemaps.cartocdn.com/dark_all/${z}/${x}/${y}.png"], {attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='http://cartodb.com/attributions'>CartoDB</a>" })); map.addLayer(new OpenLayers.Layer.OSM("CartoDB positron (no labels)", ["http://a.basemaps.cartocdn.com/light_nolabels/${z}/${x}/${y}.png", "http://b.basemaps.cartocdn.com/light_nolabels/${z}/${x}/${y}.png", "http://c.basemaps.cartocdn.com/light_nolabels/${z}/${x}/${y}.png", "http://d.basemaps.cartocdn.com/light_nolabels/${z}/${x}/${y}.png"], {attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='http://cartodb.com/attributions'>CartoDB</a>" })); map.addLayer(new OpenLayers.Layer.OSM("CartoDB dark matter (no labels)", ["http://a.basemaps.cartocdn.com/dark_nolabels/${z}/${x}/${y}.png", "http://b.basemaps.cartocdn.com/dark_nolabels/${z}/${x}/${y}.png", "http://c.basemaps.cartocdn.com/dark_nolabels/${z}/${x}/${y}.png", "http://d.basemaps.cartocdn.com/dark_nolabels/${z}/${x}/${y}.png"], {attribution: "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='http://cartodb.com/attributions'>CartoDB</a>" })); 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 }})); /* map.addLayer(new OpenLayers.Layer.OSM("OS Locator diffs", "http://tiles.itoworld.com/os_locator/${z}/${x}/${y}.png" )); */ /* Seems to be offline. That's a shame map.addLayer(new OpenLayers.Layer.OSM("Twain's OS-alike'", ["http://a.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png", "http://b.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png", "http://c.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png", "http://d.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png", "http://e.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png", "http://f.tile.osm.sjjb.co.uk/world/${z}/${x}/${y}.png"])); */ if (!map.getCenter()) map.zoomToMaxExtent(); } </script> <style type="text/css"> html, body, #mapdiv { width:100%; height:100%; margin:0; } </style> </head> <body onload="javascript:init();"> <div id="mapdiv"></div> </body> </html>
view directly
Home
Blog
About
Maps
Other
Contact