Te lo mostro: Leaflet – una mappa gratuita
Leaflet è una libreria usata da milioni di siti web per mostrare mappe. È gratuita e si aggiunge con due righe nel <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Poi serve solo una scatola per la mappa e poche righe di JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Tre passi: crea la mappa, aggiungi lo strato base, metti una spilla. Puoi aggiungere quante spille vuoi – basta ripetere L.marker.
Una libreria è codice scritto da qualcun altro che prendi in prestito, così non devi scrivere tutto da solo. Leaflet gestisce per te panning, zoom e gesti touch su mobile. Tu dici solo alla mappa cosa mostrare.
Più spille da una lista
Quando hai diversi posti, mettili in un array e scorri con un ciclo – proprio come col meteo:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Ora tocca a te 💪
🏫 Sito web scolastico – soluzione
Una mappa con la posizione della scuola nella pagina “Contatti”. Bonus: una seconda spilla per la palestra o il campo usato per educazione fisica.
🙋 Sito web personale – soluzione
Una mappa “I miei posti”: dove vivi (approssimativamente – basta la città!), il tuo parco giochi preferito, dove vai in vacanza.
🌍 Diario di viaggio – soluzione
Questa è la tua lezione stella: una mappa di tutti i tuoi viaggi con spille da una lista. Ogni popup può linkare a un resoconto del viaggio.
⚽ Sito web del club – soluzione
Una mappa “Dove giochiamo”: campo di casa + campi avversari. I genitori ospiti la adoreranno.
Privacy: non mettere mai il tuo indirizzo di casa esatto su un sito web. Una spilla sulla piazza principale della tua città è più che sufficiente.
Controllo: Il tuo sito web ha una mappa spostabile, zoomabile, con almeno due spille con popup.
Cosa porti via da questa lezione
- Le librerie (come Leaflet) ti prestano superpoteri pronti.
- Una mappa = una mappa + uno strato base + spille.
- Una lista di posti in un array + un ciclo = una mappa di qualsiasi dimensione.
© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti