Come aggiungere mappe geografiche su un sito web con Leaflet
Leaflet è una libreria javascript open source pensata per aggiungere delle mappe geografiche interattive su un sito web, con prestazioni eccellenti e codice leggero (circa 42 KB).
Non ha bisogno di framework pesanti e funziona benissimo sia su desktop che su mobile.
Se hai mai visto una mappa interattiva su un sito (magari con zoom, marker e pop-up) e ti sei chiesto “come l’hanno fatta?”, c’è una buona probabilità che dietro ci sia Leaflet.
A cosa serve?
Con Leaflet puoi ,ostrare mappe interattive con zoom e trascinamento, aggiungere marker (punti) con testo o immagini.
Puoi anche disegnare forme (linee, cerchi, poligoni) per evidenziare alcune zone.
In sostanza, serve per portare una mappa geografica sul tuo sito senza complicazioni.
Perché scegliere Leaflet? E' una libreria open-source, quindi gratuita e modificabile ed è compatibile con tutti i browser moderni e mobile. Inoltre, è leggera e veloce ed è estendibile con centinaia di plugin (routing, geocodifica, heatmap…). Puoi trovare molte informazioni sul sito ufficiale leafletjs.com
Come si implementa?
Per prima cosa puoi aggiungere Leaflet al tuo progetto usando il CDN ufficiale
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
Una volta collegato, devi preparare un'area dedicata a visualizzare la mappa in HTML
<div id="map" style="height: 400px;"></div>
Poi inizializzare la mappa con JavaScript.
Ecco un esempio pratico:
<script>
// Crea la mappa centrata su Roma
var map = L.map('map').setView([41.9028, 12.4964], 13);
// Aggiungi layer di OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Aggiungi un marker con pop-up
L.marker([41.9028, 12.4964])
.addTo(map)
.bindPopup('<b>Roma</b><br>Capitale d\'Italia.')
.openPopup();
</script>
In meno di 10 righe hai una mappa navigabile, interattiva bella da vedere, veloce da caricare e facile da integrare.
Non serve essere un esperto GIS: con poche righe di codice e un po’ di creatività, puoi trasformare il tuo sito in un’app cartografica professionale.
