../../_images/logo_leaflet.png

Guida rapida Leaflet

Leaflet è una libreria JavaScript per mappe interattive basate su browser e mobile-friendly. È leggera, ma ha tutte le caratteristiche di cui la maggior parte degli sviluppatori ha bisogno per le mappe online. Leaflet è progettata con semplicità, prestazioni e usabilità in mente.

In esecuzione

Prima di eseguire questa guida rapida è necessario avviare MapProxy. Su OSGeoLive si trova in Geospatial\Web Services\MapProxy\Start MapProxy. Questo fornirà le tiles di sfondo che verranno utilizzate in questa dimostrazione.

Vedi l”esempio

Suggerimento

Se stai leggendo questa guida rapida al di fuori di OSGeoLive potresti preferire leggere la demo originale su: https://leafletjs.com/examples/quick-start/, poiché questa demo usa tilestache su OSGeoLive.

Prepara la tua pagina

Prima di scrivere qualsiasi codice per la mappa, devi fare i seguenti passi di preparazione nella tua pagina:

  • Includi i file CSS di Leaflet nella sezione di testa del tuo documento

<link rel="stylesheet" href="/leaflet/leaflet.css" />

  • Includi il file JavaScript di Leaflet:

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

  • metti un elemento div con un certo id dove vuoi che sia la tua mappa:

<div id="map"></div>

  • Assicurati che il contenitore della mappa abbia un’altezza definita, per esempio impostandola nei CSS:

#map { height: 180px; }

Ora sei pronto per inizializzare la mappa e fare qualcosa con essa.

Impostazione della Mappa

Creiamo una mappa di Firenze, Italia, con l’indicazione della conferenza FOSS4G del 2022. Per prima cosa inizializziamo la mappa e impostiamo la sua visualizzazione sulle coordinate geografiche scelte e su un livello di zoom:

var map = L.map('map').setView([43.77913, 11.24938], 15);

Per impostazione predefinita (dato che non hai passato alcuna opzione durante la creazione dell’istanza della mappa), tutte le interazioni con il mouse e il tocco sulla mappa sono abilitate, e ha controlli di zoom e attribuzione.

Nota che la chiamata setView restituisce anche l’oggetto map - la maggior parte dei metodi Leaflet si comportano in questo modo quando non restituiscono un valore esplicito, il che permette una comoda concatenazione di metodi simili a jQuery.

Quindi aggiungeremo un livello di tiles alla nostra mappa. In questo caso utilizzeremo le immagini delle piastrelle fornite da MapProxy sul DVD live. Si noti che l’uso di mappe di sfondo più belle, come quelle di openstreetmap, migliorerà notevolmente l’esperienza dell’utente.

La creazione di un layer di tasselli di solito comporta l’impostazione del modello URL per le immagini del tassello, il testo di attribuzione e il livello massimo di zoom del layer:

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

Se hai un accesso online potresti voler usare una tilemap più bella come sfondo:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Assicurati che tutto il codice sia chiamato dopo l’inclusione di div e leaflet.js. Ecco fatto! Ora hai una mappa Leaflet funzionante.

Vale la pena notare che Leaflet è «provider-agnostic», il che significa che non impone una particolare scelta di provider per i tasselli, e non contiene nemmeno una singola linea di codice specifica per il provider, quindi sei libero di usare altri provider se ne hai bisogno.

Simboli, cerchi e poligoni

Oltre ai layer dei tasselli, puoi facilmente aggiungere altre cose alla tua mappa, inclusi segni, polilinee, poligoni, cerchi e popup. Aggiungi un segno:

var marker = L.marker([43.77913, 11.24938]).addTo(map);

Aggiungere un cerchio è la stessa cosa (tranne che per specificare il raggio in metri come secondo argomento), ma permette di controllare come appare passando le opzioni come ultimo argomento quando si crea l’oggetto:

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Aggiungere un poligono è altrettanto facile:

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Lavorare con i popup

I popup sono di solito usati quando si desidera allegare alcune informazioni ad un particolare oggetto su una mappa. Leaflet ha una scorciatoia molto comoda per questo:

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Qui usa openOn invece di addTo perché gestisce la chiusura automatica di un popup precedentemente aperto quando se ne apre uno nuovo, il che è buono per l’usabilità.

Gestire gli eventi

Ogni volta che succede qualcosa in Leaflet, per esempio l’utente clicca su un segno o lo zoom della mappa cambia, l’oggetto corrispondente invia un evento che puoi sottoscrivere con una funzione. Questo ti permette di reagire all’interazione dell’utente:

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

map.on('click', onMapClick);

Ogni oggetto ha il proprio insieme di eventi - vedi documentazione per i dettagli. Il primo parametro della funzione listener è un oggetto evento, che contiene informazioni utili sull’evento accaduto. Per esempio, l’oggetto evento map click (e nell’esempio sopra) ha la proprietà latlng che è una posizione in cui il click è avvenuto.

Migliora il tuo esempio usando un popup invece di un avviso:

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);

Prova a cliccare sulla mappa e vedrai le coordinate in un popup. Visualizza l’esempio completo

E ora?

Ora hai imparato le basi di Leaflet e puoi iniziare subito a costruire applicazioni per le mappe! Non dimenticare di dare un’occhiata alla documentazione dettagliata o ad altri esempi.