Layers Google, Bing Maps e Yahoo

Questo esempio mostra come aggiungere i layers di Google, Bing Map e Yahoo alla mappa.

Da notare che mentre per aggiungere i layers Bing Maps è sufficiente aggiungere il riferimento a:

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>

e per i layers Yahoo :

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>

per aggiungere i layers Google, se la pagina html deve essere visualizzata da un sito web, il codice :

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAp_bTGl8Z9L9KerNZ0NhrfhTz3110dEFZ1OhnarblFugjXwif2BTy5fZEE-90NicNphmilssljCvI3w'></script>

deve essere personalizzato con una key fornita da Google e che dipende dall' url del sito, ottenibile qua

Per il resto lo schema del file HTML è del tutto simile agli esempi precedenti.

Il file HTML

Copiare il codice che segue in un file di testo, salvare come file HTML e visualizzarlo con un browser.

Il risultato è visualizzabile qua

<html>
<head>
<title>layer OSM, Google, Bing maps </title>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<!-------------------------------------------------------------   Codice Google                                                                      -->
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAp_bTGl8Z9L9KerNZ0NhrfhTz3110dEFZ1OhnarblFugjXwif2BTy5fZEE-90NicNphmilssljCvI3w'></script>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
<script type="text/javascript">
 
// Posizione iniziale della mappa
    var lat=44.355;
    var lon=11.71;
    var zoom=13;
 
 
    function init() {
 
        map = new OpenLayers.Map ("map", {
            controls:[ 
			new OpenLayers.Control.Navigation(),
                       new OpenLayers.Control.PanZoomBar(),
                       new OpenLayers.Control.ScaleLine(),
                       new OpenLayers.Control.Permalink('permalink'),
                       new OpenLayers.Control.MousePosition(),                    
                       new OpenLayers.Control.Attribution()
				      ],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
			// OSM layers
			var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");	
			var tilesathome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");			
			var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			
			// Google Layers          
			var gmap = new OpenLayers.Layer.Google("Google Map", {sphericalMercator:true, numZoomLevels: 21});
                        var gphy = new OpenLayers.Layer.Google("Google Physical", {type: G_PHYSICAL_MAP,sphericalMercator:true, numZoomLevels: 16} );
			var gsat = new OpenLayers.Layer.Google("Google Satellite", {type: G_SATELLITE_MAP, sphericalMercator:true,numZoomLevels: 21} );

			// Bing Maps layers
			var aerial = new OpenLayers.Layer.VirtualEarth("Bing Satellite", {type: VEMapStyle.Aerial, sphericalMercator:true, numZoomLevels: 19});
			var shaded = new OpenLayers.Layer.VirtualEarth("Bing Map", {type: VEMapStyle.Shaded, sphericalMercator:true, numZoomLevels: 21});
			
			// Yahoo layers
			var yahoosat = new OpenLayers.Layer.Yahoo("Yahoo Satellite",{'type': YAHOO_MAP_SAT, 'sphericalMercator': true,attribution: '<a href="http://info.yahoo.com/legal/us/yahoo/maps/mapstou/">Terms of Use</a> for <a href="http://maps.yahoo.com/">Yahoo Local Maps</a>, Uses GeoLite data by <a href="http://maxmind.com/">MaxMind</a>', numZoomLevels:18 });
			var yahoostreet = new OpenLayers.Layer.Yahoo( "Yahoo Street", { 'sphericalMercator': true, attribution: '<a href="http://info.yahoo.com/legal/us/yahoo/maps/mapstou/">Terms of Use</a> for <a href="http://maps.yahoo.com/">Yahoo Local Maps</a>, Uses GeoLite data by <a href="http://maxmind.com/">MaxMind</a>', numZoomLevels:18 } );

	
		map.addLayers([ mapnik,tilesathome,cyclemap,gmap,gphy,gsat,aerial,shaded,yahoosat,yahoostreet ] );
 
		map.addControl(new OpenLayers.Control.LayerSwitcher());
 
        var lonLat = new OpenLayers.LonLat( lon ,lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
		map.setCenter (lonLat, zoom); 
 }
  
</script>
</head>
 
<body onload="init();">
 <span style="font-family: Arial; font-weight: bold;">OSM Mapnik, Osmarender, CycleMap, Google, Yahoo e Bing maps</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

Vedi anche

IT:OpenLayers
IT:OpenLayers Simple Example - Semplici esempi di layers OSM
IT:OpenLayers Marker Example - Aggiungere un semplice marker
IT:Openlayers POI layer example - Aggiungere alcuni POI marker in overlay alla mappa.
IT:Openlayers Track example - Visualizzare un file traccia .gpx in overlay sulla mappa
IT:OpenLayers osm file example - Visualizzare un file .osm in overlay
IT:OpenLayers Hillshade e Hiking Map - Aggiungere i layers hillshade e Lonvia alla mappa.
IT:OpenLayers Foto - Visualizzare le proprie foto sulla mappa.
IT:OpenLayers Local Tiles e Maperitive - Visualizzare sulla mappa le tiles generate con Maperitive.
IT:OpenLayers Local Tiles Example - Visualizza le tiles di OpenStreetMap in locale

IT:OpenLayers Google Bing layers

Layers Google, Bing Maps e Yahoo

Il file HTML

Vedi anche

Navigation menu

IT:OpenLayers Google Bing layers

Layers Google, Bing Maps e Yahoo

Il file HTML

Vedi anche

Navigation menu

Search