IT:Openlayers POI layer example
Visualizzare POIs sulla mappa tramite OpenLayers
La pagina seguente è un esempio su come evidenziare e descrivere sulla mappa alcuni punti di interesse (POIs) (tramite OpenLayers).
Visualizza l'esempio (in Inglese).
Preparazione
Nell'esempio si ipotizza di dover recuperare alcuni POIs direttamente da OpenStreetMap per visualizzarli sulla mappa. Se invece i POIs fossero punti non necessariamente provenienti da OpenStreetMap, scorri direttamente a #File .txt per OpenLayers.
Recuperare POIs da OpenStreetMap
Per recuperare POIs da OpenStreetMap occorre ottenere una mappa in formato .osm aggiornata. Puoi farlo visionando la pagina sull'esportazione di mappe da OpenStreetMap.
Una volta ottenuta è necessario estrarre da essa soltanto i POIs di nostro interesse (per esempio recuperare esclusivamente i ristoranti). Per eseguire queste operazioni di filtraggio si può utilizzare il comando Osmosis.
Per installare Osmosis seguire la pagina IT:Osmosis/Installation.
Ecco come utilizzare il comando osmosis per recuperare da un file input_map.osm esclusivamente i ristoranti (amenity=restaurant
) e salvare il risultato in un file chiamato restaurants.osm:
osmosis --rx input_map.osm --tf accept-nodes amenity=restaurant --tf reject-relations --tf reject-ways --wx restaurants.osm
Ora che si ha finalmente un file contenente esclusivamente i POIs di nostro interesse, è ora necessaria una conversione in un formato diverso dall'.osm, poichè quest'ultimo non è adatto per essere letto da OpenLayers.
Conversione file .osm in .txt per OpenLayers
Non essendo OpenLayers in grado di leggere i dati sotto forma di formato .osm, è necessario utilizzare programmi come [GPSBabel] per la conversione.
Per installare GPSBabel seguire la pagina IT:GPSBabel/Installation.
Prima di utilizzare GPSBabel occorre creare un file di regole di conversione che chiameremo formattazione.style.
formattazione.style:
# gpsbabel XCSV style file # # Format: Openlayers.Layer.Text # Author: vclaw # Date: 16/01/2010 # based on GPSBabel example styles # DESCRIPTION Openlayers.Layer.Text # # # FILE LAYOUT DEFINITIIONS: # FIELD_DELIMITER TAB RECORD_DELIMITER NEWLINE SHORTLEN 24 PROLOGUE lat lon title description icon iconSize iconOffset EPILOGUE NEWLINE # # INDIVIDUAL DATA FIELDS, IN ORDER OF APPEARANCE: # OFIELD LAT_DECIMAL, "", "%08.5f" OFIELD LON_DECIMAL, "", "%08.5f" OFIELD SHORTNAME, "", "%-.24s" OFIELD DESCRIPTION, "", "%-.50s" OFIELD CONSTANT,"icona.png","%s" # (icon) OFIELD CONSTANT,"11","%s" # (icon size) OFIELD CONSTANT,COMMA,"%s","no_delim_before" OFIELD CONSTANT,"13","%s","no_delim_before" # (icon size) OFIELD CONSTANT,"-8","%s" # (icon offset) OFIELD CONSTANT,COMMA,"%s","no_delim_before" OFIELD CONSTANT,"-8","%s","no_delim_before" # (icon offset)
Prestare attenzione al fatto che il file formattazione.style deve terminare con un "a capo", altrimenti l'ultimo POI nell'elenco potrebbe non essere visualizzato correttamente da OpenLayers.
Ecco come utilizzare il comando gpsbabel
per eseguire il cambio di formato:
gpsbabel -i osm -f restaurants.osm -o xcsv,style=formattazione.style -F textfile.txt
Il comando ricava i POIs in formato .osm dal file restaurants.osm, e li converte (in formato xcsv) in un file chiamato textfile.txt pronto per essere usato da OpenLayers. Le regole per questa conversione sono quelle scritte nel file formattazione.style.
Procedimento
File .txt per OpenLayers
Il file textfile.txt conterrà tutti i POIs da visualizzare sulla mappa tramite OpenLayers.
Il file dovrebbe essere in un formato molto simile a questo:
textfile.txt:
lat lon title description icon iconSize iconOffset 48.9459301 9.6075669 Titolo uno Descrizione uno<br>Bla bla.<br> Ol_icon_blue_example.png 24,24 0,-24 48.9899851 9.5382032 Titolo due Descrizione due. Ol_icon_red_example.png 16,16 -8,-8
Ovvero un file di testo in formato .txt in cui la prima riga definisce i tipi delle colonne (lat
, lon
, ...) e nelle restanti righe sono elencati i POIs.
Le colonne dei POIs sono separate da tabulazioni.
Il file richiama anche il percorso delle icone che devono essere visualizzate sulla mappa (Ol_icon_blue_example.png e Ol_icon_red_example.png). Il file ne definisce la grandezza e l'offset dal punto di coordinata.
Vedi anche la documentazione su OpenLayers Layer.Text per maggiori dettagli.
Per scaricare le due icone necessarie per realizzare l'esempio:
Creazione file HTML
Occorre preparare un file HTML che si occuperà di recuperare e mostrare sulla mappa alcuni POIs.
Il file potrebbe essere per esempio questo:
index.html:
<!doctype html>
<html>
<head>
<title>OpenLayers OpenStreetMap</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
// Posizione iniziale della mappa
var lat = 48.9773;
var lon = 9.5788;
var zoom = 11;
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 pois = new OpenLayers.Layer.Text(
"My Points",
{
location:"./textfile.txt",
projection: map.displayProjection
}
);
map.addLayer(pois);
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();">
<h1>POI marker</h1>
<div style="width:500px; height:400px" id="map"></div>
</body>
</html>
Si può denotare questo stralcio di codice sorgente:
// [...]
var pois = new OpenLayers.Layer.Text(
"My Points",
{
location:"./textfile.txt",
projection: map.displayProjection
}
);
// [...]
Questa parte si occupa di creare il layer per visualizzare i POIs sulla mappa. I POIs saranno recuperati dal file textfile.txt.
Risultato
Aprendo nel browser il file index.html verrà mostrata la mappa OpenStreetMap (Mapnik) ed in sovrapposizione le icone sui POIs le cui posizioni sono definite nel file textfile.txt.
Cliccando sul menu blu contrassegnato dal simbolo "+" nell'angolo in alto a destra nella mappa, sarà possibile rimuovere il layer con le icone.
Vedi anche
- IT:OpenLayers
- IT:OpenLayers Simple Example - Semplici esempi di layers OSM
- IT:OpenLayers Marker Example - Aggiungere un semplice marker
- 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 Google Bing layers - Aggiungere Google Maps, Bing Maps e Yahoo Maps alla mappa.
- 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
- OpenLayers Dynamic POI
- OpenLayers documentation on Layer.Text