Soluzioni Hosting

Come creare una mappa interattiva con leaflet.js

Lealfet.js è una libreria open source scritta con JavaScript la quale permette la creazione di mappe interattive in modo semplice e veloce.

Il codice per la guida lo potete trovare su GitHub, usando questo link.

In questa guida vi mostrerò come creare una mappa dei vulcani attivi in Italia, come quella nella in foto.

Prima di tutto bisogna sapere come funziona leaflet.js.


Leaflet.js è una libreria per la costruzione di mappe ed interazioni con mappe, ma non fornisce le immagini delle mappe stesse. Per le immagini dovremo utilizzare un fornitore di “Tiles” (piastrine della mappa) come
Mapbox. Creare una mappa con Mapbox è semplicissimo, basta creare un account gratuito con questo link.

Una volta creato l’account, dovrete creare un nuovo stile di mappa cliccando su “Create a Style” nella Home page di MapBox.

2

Da qui potete scegliere il look della vostra mappa, per il mio esempio ho usato lo stile Streets.

3

Una volta creato lo Style, potete importarlo in leaflet.js

Sempre sulla home di Mapbox cliccate su “Go to Styles”, selezionate lo stile appena creato e cliccate su Share, develop & use dal menu delle opzioni a destra. Qui riceverete l’url della vostra mappa che potrà essere importata in Leaflet.js, Vediamo come:

4

Ora passiamo al nostro codice HTML:

l’unica cosa di cui abbiamo bisogno è un <div> con un id e un’altezza ben definita, come per esempio:

<div style="height: 650px;" id="mappa"></div>

Adesso creiamo un nuovo file JS e lo linkiamo all’HTML.
Dentro a questo file andiamo a selezionare il <div>
#mappa in questo modo:

var mappa = new L.Map('mappa', {
    center: new L.LatLng(41.879156, 12.457727),
    zoom: 6,
    layers: new L.TileLayer(“url di MapBox”)
 });

Con questo codice dichiariamo una mappa Leaflet, passando alcuni parametri come:

Il centro della mappa in coordinate, il livello dello zoom, e l’immagine di mappa (layers).

Nel parametro di immagine di mappa, andiamo ad incollare il nostro codice ottenuto in precedenza da MapBox.

Questo basta per creare una mappa semplice nel tuo browser, da qui potete aggiungere segnalatori, Pins e Popups a volontà.

Se volete continuare con l’esempio adesso andiamo a segnare i punti sulla mappa dove sono presenti vulcani attivi in Italia.

Cominciamo aggiungendo all’inizio del file JS, un oggetto JS con le coordinate del vulcano:

var vulcani = [{lat: 37.753122, long: 14.994120},
               {lat: 38.793246, long: 15.215292},
               {lat: 40.822345, long: 14.428906}];

Poi per ogni vulcano aggiungiamo un cerchio nel seguente modo:

for(var i in vulcani){
    var vulcano = L.circle([vulcani[i].lat, vulcani[i].long], 10000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(mappa);
 }

Come potete vedere anche l’uso dei segnalatori è molto facile. Basta creare il cerchio, passando come parametro le coordinate, la dimensione, e alcune proprietà di stile, e infine aggiungere il cerchio alla mappa.

Fatto! Adesso sapete come creare una mappa interattiva con Leaflet.js, ricordate di fare pratica e di cercare di creare una mappa nuova che visualizzi qualsiasi cose che vogliate.

Il codice completo per questo esempio può essere trovato su GitHub usando questo link.

Grazie per aver seguito la Guida.

Ciao sono Pierpaolo, un web developer e blogger Italiano residente in Scozia. Amo scrivere guide e tutorial sullo sviluppo web in italiano, sono interessato a collaborare in progetti Open Source ed a fare nuove amicizie. Se sei interessato nello sviluppo web, puoi seguirmi su Twitter, Facebook o trovarmi sul mio sito devnews.it.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *