Leaflet è una libreria Open Source scritta in JavaScript che ci permette di inserire mappe con punti di interesse e livelli nelle nostre pagine HTML. Esattamente come puoi già fare con Google Maps. Con la sola differenza che non devi inserire obbligatoriamente i dati della tua carta di credito.

 

A partire dall'11 giugno 2018 dovrai attivare la fatturazione con carta di credito e disporre di una chiave API valida per tutti i progetti

In questo tutorial ti spiegherò come inserire correttamente una mappa Leaflet, come quella che vedi di seguito, nel tuo sito web:

 

DOVE APPARE LA MAPPA

 

Prepariamo la pagina

Prima di tutto, devi inserire il foglio di stile e il codice javascript di Leaflet nella nostra pagina web.

  • Includi il foglio di stile nel tag head:
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
       crossorigin=""/>
  • Adesso inserisci il file js dopo il CSS appena inserito (per ragioni di performance è consigliabile inserirlo prima della chiusura del tag body)
     <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
       integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
       crossorigin=""></script>
  • Inserisci nella pagina, nella posizione in cui desideri che appaia la mappai un div con un id a scelta.
     <div id="mappa"></div>
  • Ricordati che devi specificare un'altezza per il div appena inserito. Nel foglio di stile del tuo sito, aggiungi una regola come questa:
    #mappa { height: 380px; }

 

Adesso sei pronto per inizializzare la mappa!

Poniamo il caso che tu voglia creare una mappa, come quella che hai visto sopra, centrata sul Colosseo di Roma. Per poter funzionare correttamente, tutto il codice descritto da qui in poi deve essere inserito dopo leaflet.js .

  • Prima di tutto inizializzia la mappa inserendo la latitudine, la longitudine e il livello di zoom.
    // L.map('id').setView([latitudine, longitudine], zoom);
    var mappaLeaflet = L.map('mappa').setView([41.890251, 12.492373], 15);
    ​
  • Adesso aggiungi le tiles, ovvero i quadrati che, uniti insieme, rappresentano la mappa. In questo caso, stiamo utilizzando quelle di CartoDB.

    var CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
    	attribution: '© OpenStreetMap © CartoDB',
    	subdomains: 'abcd',
    	maxZoom: 19
    }).addTo(mappaLeaflet);

    Su leaflet-extras.github.io puoi trovare altri provider di mappe da poter utilizzare con Leaflet, per dare uno stile unico alle tue mappe.

Inserire un marcatore (marker) nella tua mappa

Oltre al livello delle tiles, puoi aggiungere facilmente nella mappa marker e popup.

  • Inserisci un marker
    // L.marker([latitudine, longitudine]).addTo(variabileMappa);
    var marker = L.marker([41.890251, 12.492373]).addTo(mappaLeaflet);
    ​
  • I popup possono essere usati per mostrare informazioni su un oggetto della mappa. Se vuoi che sul tuo marker appaia un popoup, modifica il codice precedente (quello che ti ha permesso di inserire il marker) in questo modo:
    var marker = L.marker([41.890251, 12.492373])
                        .addTo(mappaLeaflet)
                        .bindPopup('Colosseo Roma')
                        .openPopup();​ // togliendo questa riga il popup si aprirà al click.
  • A questo punto, noterai che, utilizzando la rotellina del mouse, potrai effettuare lo zoom sulla mappa. Se non vuoi questo tipo di comportamento, non ti resta che aggiungere una riga al tuo script:
    mappaLeaflet.scrollWheelZoom.disable();
  • Alla fine, avrai un codice come questo:
// Inizializziamo la mappa
var mappaLeaflet = L.map('mappa').setView([41.890251, 12.492373], 15);

// Aggiungiamo il livello delle tiles
var CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
	attribution: '© OpenStreetMap © CartoDB',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(mappaLeaflet);

// Aggiungiamo il marcatore con popup
var marker = L.marker([41.890251, 12.492373]).addTo(mappaLeaflet)
    .bindPopup('Colosseo Roma')
    .openPopup();

// Disabilitiamo lo zoom con la rotellina del mouse
mappaLeaflet.scrollWheelZoom.disable();

 

Questo tutorial serve a dimostrare che è possibile avere belle mappe sui propri siti web senza dover per forza utilizzare Google Maps ma ricorrendo, invece, a soluzioni gratuite e open source.

Per approfondire, vi consiglio di seguire gli altri tutorial di Leaflet che trovate a questo indirizzo: https://leafletjs.com/examples.html

Aggiornamento del 08/05/2019

Quante volte siete capitati in un sito web dove la mappa, soprattutto  in mobile, vi intrappolava impedendovi lo scroll della pagina?
Fortunatamente a questo problema esiste una soluzione, sviluppata appositamente per portare le funzionalità delle gesture base di Google Maps su Leaflet: Leaflet.GestureHandling.

  • Includi il foglio di stile nel tag head, dopo quello di Leaflet inserito a inizio tutorial:
    <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css" type="text/css">
  • Adesso inserisci il file js sempre dopo lo script Leaflet inserito all'inizio.
    <script src="//unpkg.com/leaflet-gesture-handling"></script>
    
  • Poi cambia il codice per inizializzare la mappa con questo.
    // var mappaLeaflet = L.map('mappa').setView([41.890251, 12.492373], 15);
    
    var mappaLeaflet = L.map("mappa", {
        center: [41.890251, 12.492373],
        zoom: 15,
        gestureHandling: true
    });

Adesso avrai una mappa che avrà bisogno di due dita per essere spostata!

Altre risorse utili:

CONDIVIDI