Come aggiungere una mappa OpenStreetMap (Leaflet) a un sito Turbosite

OpenStreetMap (OSM) è un database cartografico gratuito, un’alternativa aperta a Google Maps e Yandex Maps. Leaflet è la libreria JavaScript più popolare per visualizzare OSM su un sito web. Completamente gratuito, senza chiavi API, senza limiti. Ideale per progetti in cui è importante evitare servizi a pagamento. L’installazione richiede 5–10 minuti.

Cosa ti servirà

• Le coordinate del luogo che vuoi mostrare (latitudine/longitudine) — puoi trovarle su openstreetmap.org (clic destro sul punto → “Show address”)
• Un sito pubblicato su Turbosite
• 5–10 minuti

Passaggio 1. Ottenere le coordinate del tuo luogo

1. Apri openstreetmap.org.
2. Cerca l’indirizzo o l’organizzazione desiderata nella barra di ricerca.
3. Fai clic destro sul punto desiderato → “Show address”.
4. Nella barra degli indirizzi appariranno coordinate del tipo 52.5200,13.4050 (latitudine, longitudine). Prendine nota.

Passaggio 2. Preparare il codice HTML

A differenza di Google Maps e 2GIS, OSM non dispone di un costruttore iframe pronto all’uso: la mappa viene integrata tramite la libreria Leaflet. Ecco il codice pronto all’uso che puoi utilizzare:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Siamo qui')
    .openPopup();
</script>

Cosa personalizzare:

• 52.5200, 13.4050 — sostituisci entrambe le occorrenze con le tue coordinate (latitudine, longitudine).
• 15 — livello di zoom della mappa (13–17 per una città; più alto è il numero, più è vicino).
• Siamo qui — il testo nel popup sopra il segnaposto.
• height: 400px — l’altezza della mappa.

Passaggio 3. Inserire il codice in Turbosite

La mappa apparirà in un punto specifico della pagina.

1. Apri il tuo sito in Turbosite.
2. Aggiungi un blocco “Codice HTML” nel punto desiderato della pagina (solitamente nel blocco “Contatti”).
3. Incolla il codice Leaflet preparato.
4. Salva le modifiche.
5. Pubblica il sito.

📷 [screenshot di Turbosite — da aggiungere: blocco codice HTML nel corpo della pagina con il codice Leaflet].

Passaggio 4. Verificare che la mappa funzioni

1. Apri il sito pubblicato.
2. Scorri fino al blocco con la mappa: dovrebbe caricarsi la mappa OpenStreetMap con il segnaposto.
3. Clicca sul segnaposto: apparirà un popup con il tuo testo.
4. Verifica lo zoom (rotellina del mouse o pizzico su dispositivi mobili).

Domande frequenti

Perché usare OSM invece di Google Maps? I motivi principali: è completamente gratuito senza limiti o chiavi API, non richiede registrazione e non ci sono rischi di disattivazione. Lo svantaggio è che i dati potrebbero essere meno aggiornati in alcune piccole regioni.

È possibile aggiungere più segnaposto? Sì, ripeti L.marker([latitudine, longitudine]).addTo(map).bindPopup('Testo'); per ogni segnaposto.

La mappa rallenta il sito. Leaflet e le tile di OSM vengono caricate su richiesta. Se c’è una sola mappa sulla pagina, non ci saranno problemi.

È possibile personalizzare la mappa con i colori del brand? Sì, ma non tramite le tile standard di OSM. Utilizza provider di tile di terze parti (Mapbox, Stadia Maps, Thunderforest): alcuni sono gratuiti per carichi ridotti, altri sono a pagamento.

È necessario indicare l’attribuzione di OpenStreetMap? Sì, è obbligatorio: è un requisito della licenza. Nel codice fornito sopra, è già presente nella riga attribution.

Approfondimenti

• Documentazione di Leaflet — manuale completo
• Guida rapida di Leaflet — introduzione rapida
• OpenStreetMap — la mappa stessa
• Provider di tile alternativi — per cambiare lo stile della mappa