Creare una mappa interattiva con HTML5 e Javascript può sembrare un compito impegnativo, ma grazie a diverse librerie gratuite come Leaflet, è più facile di quanto sembri.
Di seguito è riportato un esempio di base su come creare una mappa interattiva con queste tecnologie.
1. Includi le librerie necessarie nel tuo file HTML:
```
2. Creare il tuo file Javascript (mymap.js in questo caso):
```
var mymap = L.map(‘mymap’).setView([51.505, -0.09], 13);
L.tileLayer(‘https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=
}).addTo(mymap);
var marker = L.marker([51.5, -0.09]).addTo(mymap);
marker.bindPopup(”Hello!
I am a popup.”).openPopup();
```
- `L.map(‘mymap’).setView([51.505, -0.09], 13);`: Crea una mappa e la centra sulle coordinate fornite (in questo caso Londra) con uno zoom di livello 13.
- `L.tileLayer(…).addTo(mymap);`: Aggiunge un livello di piastrelle alla mappa. Questo è fondamentalmente l’aspetto della tua mappa (strade, edifici, ecc.).
- `L.marker(…).addTo(mymap);`: Aggiunge un marcatore alle coordinate specificate.
- `marker.bindPopup(…).openPopup();`: Aggiunge un popup al marcatore che mostra il messaggio quando si clicca sul marcatore.
Nota: `https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=
Questo è un esempio molto semplice, le mappe possono diventare molto complesse con molte funzionalità come marcatori personalizzati, layer multipli, gestione eventi, ecc. Puoi trovare più dettagli sulla documentazione di Leaflet (https://leafletjs.com/examples.html).
