IT:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to navigation Jump to search
OpenLayers Simple Example - Other languages

Inserisci una mappa OpenStreetMap nel tuo sito

Questo semplice esempio può aiutarti se vuoi inserire una mappa OpenStreetMap nel tuo sito. Un semplice frammento di codice della libreria javascript di OpenLayers ti consente di inserire una mappa OSM nella tua pagina web.

Nota: OpenStreetMap genera le tiles della mappa

Tenere presente che le tiles della mappa sono generate ed inviate dai servers di OpenStreetMap che supporta questo tipo di uso ma non offre nessuna garanzia. Ci potrebbero essere periodi di inattività, previsti o meno, e gli URLs delle tiles potrebbero cambiare.

Se è previsto un grosso carico di utenza sul sito dove verrà visualizzata la mappa OSM, è meglio concordare prima la cosa con lo staff OSM(Contact). In questo caso è meglio prendere in considerazione la possibilità di creare autonomamente le tiles creating your own tiles o settare la propria cache per contenere le tiles della mappa. Questo allo scopo di ridurre la dipendenza per il vostro sito e di alleggerire l' uso di banda per i server OSM.


Istruzioni

Copiare le linee di codice degli esempi che seguono in un nuovo file, salvarlo come file HTML e visualizzarlo in un browser.

Può essere molto utile usare a questo scopo con un editore di testo come Notepad++

Un semplice esempio

<html><body>
  <div id="demoMap"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
  </script>
</body></html>

Questo codice può non funzionare correttamente con tutti i browser in quanto manca di alcuni parametri (altezza/larghezza) come mostrato nel prossimo esempio, ma in Firefox è ok. Il codice mostra come:

  • inilizializzare un oggetto Map con un id DIV
  • aggiungere un layer OpenStreetMap
  • visualizzare le tiles con l' istruzione zoomToMaxExtent.

Un esempio più completo

Nel codice di seguito riportato viene definita la posizione iniziale della mappa ed il suo livello di zoom , parametri che possono essere cambiati modificando il codice corrispondente:. 

// Posizione iniziale della mappa
    var lat=44.355;
    var lon=11.71;
    var zoom=13;

Sono anche aggiunti alcuni controlli visualizzabili sulla mappa ( ScaleLine mappa, posizione del mouse in coordinate geografiche, permalink etc.).

Vediamo come le coordinate geografiche (latitudine, longitudine), ed espresse in gradi, devono essere trasformate nella proiezione chiamata "sferica Mercatore" , usata sia da OSM che da Google, Bing Maps, Yahoo: 

var lonLat = new OpenLayers.LonLat( lon ,lat )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

Viene inoltre dichiarata la dimensione della finestra che inquadra la mappa; 

<div style="width:100%; height:95%" id="map"></div>

Il file html

Copiare il testo seguente in un nuovo file, salvarlo come html con un nome a piacere (prova.html ad esempio) ed aprirlo con un browser.

Il risultato è visualizzabile qua 

<html>
<head>
<title>layer OSM </title>
    
<script src="http://www.openlayers.org/api/OpenLayers.js"></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()
				      ],
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
 
		var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
		
		map.addLayer(mapnik);
 
        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;">Esempio di mappa OSM</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

Layers OSM : Mapnik, Osmarender, Cyclemap

Il codice che segue mostra come alternare i tre layers principali di OSM (Mapnik, Osmarender, Cyclemap) con un menu di scelta.

Rispetto all' esempio precedente, viene caricato anche il file "OpenStreetMap.js" dal sito OSM: 

 <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

Il codice: 

       var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");		
	var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");

definisce i tre layers, 

 map.addLayers([ mapnik, tilesathome, cyclemap ] );

li aggiunge alla mappa e 

map.addControl(new OpenLayers.Control.LayerSwitcher());

aggiunge alla mappa il menu di scelta tra i tre layers disponibili.

Il file html

Copiare il testo seguente in un nuovo file, salvarlo come html con un nome a piacere (osm_multilayer.html ad esempio) ed aprirlo con un browser.

Il risultato è visualizzabile qua 

<html>
<head>
<title>layer OSM </title>
 
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></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")
            } );
 
	var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");			
	var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
 	
        map.addLayers([ mapnik, tilesathome, cyclemap ] );
 
	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, CycleMap</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
 
</html>

OpenLayers.js da locale

Il codice degli esempi sopra riportati otteneva il file OpenLayers.js dal sito OpenLayers. 

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

E' anche possibile scaricare il file OpenLayers.js dal sito OpenLayers :

http://www.openlayers.org/api/OpenLayers.js

e salvarlo nel proprio sito, aggiornando di conseguenza l' url dello script nella pagina HTML: 

    
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

diventa quindi: 

    
<script src="OpenLayers.js"></script>

se il file viene salvato nella stessa directory del file HTML.

Sarà inoltre necessario scaricare da OpenLayers il file archivio di OpenLayers, scompattarlo e copiare in locale le directory "img" e "theme" contenenti quanto necessario per visualizzare sulla mappa pulsanti, cursori etc.

Usare Proj4js per altre trasformazioni di coordinate

L' esempio precedente mostrava come usare le coordinate in WGS84 (latitudine e longitudine) per navigare nella proiezione usata da OSM (Sferica Mercatore).

Se le coordinate dei dati sono in una proiezione differente, sarà necessario usare Proj4js per eseguire la riproiezione:

aggiungere il file script proj4js.js da http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js alla pagina (dopo le librerie OpenLayers!);

aggiungere la definizione di proiezione, ottenibile dal Proj4 project (è un record del file http://svn.osgeo.org/metacrs/proj/trunk/proj/nad/epsg);

Vedere http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs per degli esempi.

Esempio per EPSG:28992 (new RD) (Sistema Amersfoort / RijksDriehoekstelsel utilizzato in Olanda):

Proj4js.defs["EPSG:28992"] = "+title=Amersfoort / RD New +proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs".

Ora si possono usare le coordinate EPSG:28992 ed il codice epsg nelle trasformazioni al posto di WGS84

come nell'esempio: 

map.setCenter(
    new OpenLayers.LonLat(155000,465000) // Center of the map
        .transform(
            new OpenLayers.Projection("EPSG:28992"), // transform from new RD 
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        ),
    15); // Zoom level

Develop this example?

Feel free to edit this page with improvements.

This example was originally created by Harry Wood (and anyone else who edits this page). It is intentionally more basic, with only one layer defined, and no support for URL params (permalink) etc. So adding these features is not necessarily an improvement. In fact, if you have ideas for making this even more simple, that would be good.

Vedi anche

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