IT:OpenLayers Google Bing layers

From OpenStreetMap Wiki
Jump to navigation Jump to search

trash bin

It has been proposed that this page be deleted or replaced by a redirect.Aiuta a tradurre questo in italiano! See the discussion page for further information.Aiuta a tradurre questo in italiano!
The given reason is: his page contains an example with the outdated (for years) OpenLayers version 2. There are plenty of tutorials elsewhere. Nobody has bothered to update this page. Using Leaflet for simple maps is easier than OpenLayers. I don't see the use of keeping this page. Therefore, I propose its deletion. --Nakaner (talk) 09:33, 31 March 2026 (UTC).Aiuta a tradurre questo in italiano!
(Pages that link to this page.Aiuta a tradurre questo in italiano!)
This page was last edited byAiuta a tradurre questo in italiano! Nakaner; 09:33, 31 March 2026 (UTC) (5 giorni fa).

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

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=IT:OpenLayers_Google_Bing_layers&oldid=2972772"