Visualizzare POIs sulla mappa tramite OpenLayers

Screenshot del risultato

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:

Ol_icon_blue_example.png
Ol_icon_red_example.png

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

IT:Openlayers POI layer example

Contents

Visualizzare POIs sulla mappa tramite OpenLayers

Preparazione

Recuperare POIs da OpenStreetMap

Conversione file .osm in .txt per OpenLayers

Procedimento

File .txt per OpenLayers

Creazione file HTML

Risultato

Vedi anche

Navigation menu

IT:Openlayers POI layer example

Visualizzare POIs sulla mappa tramite OpenLayers

Preparazione

Recuperare POIs da OpenStreetMap

Conversione file .osm in .txt per OpenLayers

Procedimento

File .txt per OpenLayers

Creazione file HTML

Risultato

Vedi anche

Navigation menu

Search