Guida rapida per Leaflet

Esecuzione

Prima di iniziare questo tutorial dovrete avviare TileLite. Su questo live dvd potete trovarlo sotto Geospatial\Spatial Tools\Start Mapnik & TileLite. Questo fornirà le tiles di sfondo che saranno usate in questa demo.

Vedere l’esempio

Tip

Se state leggendo questo tutorial al di fuori del live dvd potreste preferire leggere la demo originale: http://leafletjs.com/examples/quick-start.html, visto che questa demo usa TileLite del live dvd.

Preparare la vostra pagina

Prima di scrivere alcun codice per la mappa, si dovrà effettuale i seguenti passaggi di preparazione nella vostra pagina:

  • Includere i file CSS di Leaflet nella sezione head del vostro modello
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="/leaflet/leaflet.ie.css" />
<![endif]-->
  • Includere il file JavaScript Leaflet:
<script src="/leaflet/leaflet.js"></script>
  • inserire un elemento div con un certo id dove volete inserire la mappa nella pagine
<div id="map"></div>
  • Essere sicuri che il contenitore abbia un’altezza definita, per esempio settandola nel CSS:
#map { height: 180px; }

Ora siete pronti ad inizializzare la mappa e fare qualcosa con essa.

Impostare la Mappa

Creare una mappa dell’Europa con un’indicazione della conferenza FOSS4G 2013. Prima verrà inizializzata la mappa e impostare la sua vista alle coordinate geografiche e un livello di zoom scelti:

var map = L.map('map').setView([45.52875, -122.6632], 5);

Di default (poichè non abbiamo passato alcuna opzione quando sia crea l’istanza mappa), sia il mouse che l’iterazione del touch sulla mappa sono abilitati, e ha i controlli di zoom e attribuzione.

Notare che la chiamata setView ritorna anche l’oggetto mappa - la maggior parte dei metodi Leaflet come questo quando non ritornano un valore esplicito, permettono la possibilità d’incatenamento di metodi come jQuery.

Dopo si aggiungerà un layer di tile da inserire nella mappa. In questo caso si useranno le tile fornite da TileLite presente nel live dvd. Notare che usare una mappa di sfondo migliore come OpenStreetMap risulterà più apprezzato dall’utente.

Creare un layer di tile solitamente implica impostare il template URL per le immagine tile, il testo dell’attribuzione e il numero massimo dei livelli di zoom del layer:

L.tileLayer('http://localhost:8012/{z}/{x}/{y}.png,{}).addTo(map);

Se avete accesso ad internet potreste volere delle tile più belle come sfondo:

L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
                       maxZoom: 18,
                       attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
               }).addTo(map);

Fate attenzione che il codice sia chiamato dopo l’inclusione di div e leaflet.js. Tutto qui! Ora avete un mappa Leaflet funzionante.

È bene notare che Leaflet è indipendente da provider, significa che non impone una particolare scelta di providers per tiles, e non contiene neanche una linea di codice specifica per un provider, periò siete liberi di usare altri provider se lo necessitate.

Markers, cerchi e poligoni

Oltre a layer di tile, potete facilmente aggiungere altre cose alla vostra mappa, incluso markers, linee, poligoni, cerchi e popups. Aggiungiamo un marker:

var marker = L.marker([45.52875, -122.6632]).addTo(map);

Aggiungere un cerchio è lo stesso (ad eccetto di specificare il raggio in metri come secondo argomento), ma potete modificare come verrà visualizzato passando opzioni come ultimo argomento quando create l’oggetto:

var circle = L.circle([44.056287, -123.07572], 25000, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Aggiungere un poligono è lo stesso semplice:

var polygon = L.polygon([
   [46.01, -130.01],
   [40.81, -128.76],
   [44.15, -133.23]
]).addTo(map);

Lavorare con i popups

Popups sono usualmente usati quando si vuole aggiungere alcune informazioni ad un particolare oggetto sulla mappa. Leaflet ha un comodo metodo per questo:

var popup = L.popup()
   .setLatLng([45.52875, -122.6632])
   .setContent("I am a standalone popup.")
   .openOn(map);

Qui si usa openOn invece di addTo perchè questo permette la chiusura automatica di un popup precedentemente aperto quando uno nuovo viene selezionato, questo è molto comodo per l’usabilità della mappa

Rapporti con gli eventi

Ogni volta che avviene qualcosa in Leaflet, per esempio l’utente clicca su un marker o si cambia lo zoom della mappa, l’oggetto corrispondente manda un evento che può essere registrato con una funzione. Questo permette di reagire all’iterazione dell’utente:

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Ogni oggetto ha il proprio set di eventi - controlla la documentazione per dettagli. Il primo argomento della funzione che è in ascolto è un oggetto evento - questo contiene utili informazioni sull’evento che è accaduto. Per esempio, l’oggetto per l’evento clicca sulla mappe (e nell’esempio sopra) ha la proprietà latlng che è la posizione dov’è avvenuto il click.

Miglioriamo l’esempio usando un popup invece di un alert:

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Si provi cliccando sulla mappa e vedrete le coordinate in un popup. Vedete l’esempio completo

Ora avete imparato le basi di Leaflet e potete iniziare a costruire subito applicazione con mappe! Non dimenticate di vedere la documentazione dettagliata o altri esempi.