Carte OpenStreetMap et différents fonds de cartes
Cet exemple de carte centrée sur une position vous permet grâce à un menu cliquable de sélectionner et changer le fond de carte.
(HOTOSM style, Lanscape, Mapnik, MapQuest Open, OpenCycleMap, OpenRiverboatMap, OpenStreetMap, OpenTopoMap, OSM-monochrome, Stamen toner, Toner, Transport...)
Exemple de code javascript pour cette carte
<script src="http://www.openlayers.org/api/OpenLayers.js"> </script>
<script>
function init() {
var epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
map = new OpenLayers.Map("carte");
map.addLayer(new OpenLayers.Layer.OSM());
epsg4326 = new OpenLayers.Projection("EPSG:4326");
projectTo = map.getProjectionObject();
// Centrer la carte ----------------------------------------------------------------------
var lonLat = new OpenLayers.LonLat( 2.341303,48.855141 ).transform(epsg4326, projectTo);
var zoom=5;
map.setCenter (lonLat, zoom);
map.addControls([new OpenLayers.Control.LayerSwitcher(),
//new OpenLayers.Control.ScaleLine(),
// new OpenLayers.Control.Permalink(),
new OpenLayers.Control.Attribution()]);
map.addLayer(new OpenLayers.Layer.OSM("Mapnik"));
map.addLayer(new OpenLayers.Layer.OSM("MapQuest Open",
["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${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>. Tiles Courtesy of <a href='http://www.mapquest.com/'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>" }));
map.addLayer(new OpenLayers.Layer.OSM("OpenCycleMap",
["http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"]));
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 }}));
if (!map.getCenter()) map.zoomToMaxExtent();
}
</script>
|
|