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...)

DEMO Carte OpenStreetMap centrée avec menu et fonds de cartes

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>
  



Regardez l'interface proposée par le site UMAP qui propose différents fonds de cartes à paramètrer facilement sur votre site web. C'est simple même pour les débutants. Laissez vous guider. https://umap.openstreetmap.fr/fr/



Lire la suite »






0234769