[Appunti di Leaflet] La prima mappa

Sono sempre più diffuse le applicazioni web che utilizzano delle mappe, quindi non è difficile che prima o poi ci venga richiesto di realizzare qualcosa del genere.

Leaflet è sicuramente una delle librerie open source javascript più conosciute ed utilizzate quindi vedremo in una serie di post come utilizzarla al meglio, scoprendo via via le sue funzionalità.

Come ogni “Hello World” che si rispetti partiamo da zero, ovvero dalla creazione della prima mappa analizzando i vari passi richiesti.

Per prima cosa abbiamo bisogno di un documento html vuoto. Possiamo crearlo in vari modi scrivendo il codice con un editor di testo, usando il nostro IDE preferito, copiandolo da Internet.

Come suggerito dal sito ufficiale non occorre installare nulla, ma semplicemente includere il codice richiesto prelevandolo dalla CDN indicata usufruendo di un servizio di verifica dell’integrità del file scaricato attraverso un’opportuna stringa riportata nel link.

Quindi elenchiamo la sequenza di passi da effettuare.

  1. includiamo il codice CSS relativo all’ultima versione di Leaflet nella sezione head del documento (reperibile sul sito ufficiale a questo link)
  2. Includiamo il codice javascript sempre reperibile sul sito ufficiale
  3. Aggiungiamo un elemento div con id=”map” che verrà utilizzato per l’inizializzazione della la mappa
  4. Creiamo un’istanza della mappa specificando
    • l’id precedentemente indicato
    • le coordinate del punto su cui verrà centrata la mappa (Roma nel nostro caso)
    • il livello di zoom di default
    • il tileLayer ovvero rappresentazione cartografica vera e propria (in questo caso OpenStreetMap)
    • l’attribuzione richiesta dalla licenza

Il tileLayer va associato alla variabile di tipo mappa che abbiamo creato in precedenza.

Ora non dobbiamo fare altro che aprire il file index.html all’interno di un browser per visualizzare la mappa.

leaflet-example

Nell’esempio proposto è stato disabilitato lo scroll con la rotellina del mouse che, se attivata, consente di zoomare rapidamente.

Si possono comunque utilizzare gli indicatori + e – in alto a sinistra.

Facendo click su un punto qualsiasi la mappa viene ridisegnata prendendo come centro le nuove coordinate.

Per ora è tutto. La prossima volta vedremo come posizionare dei marker.

Tutto il codice è disponibile su https://github.com/mcicolella/appunti-leaflet-map/blob/master/esempio-base/index.html

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi