[Appunti di Leaflet] Aggiungere dei marker

Dopo aver creato la nostra mappa cerchiamo di visualizzare dei punti di interesse utilizzando degli specifici oggetti denominati marker.

Prima di questo facciamo una piccola riorganizzazione del codice in modo da renderlo più leggibile e facilmente modificabile.

Spostiamo il codice javascript relativo a Leaflet in un file separato map.js all’interno della cartella js. In index.html inseriamo un riferimento a tale file in

<script src="js/map.js"></script>

In questo modo tutte le modifiche successive riguarderanno un unico file.

Ora vogliamo visualizzare la posizione del Colosseo, per cui ricaviamo le sue coordinate (latitudine e longitudine) da un sito come www.latlong.net (es. https://www.latlong.net/place/the-colosseum-of-rome-rome-italy-1104.html).

Nel file map.js aggiungiamo la seguente riga

var marker = L.marker([41.890251, 12.492373], { title: "Colosseo" }).addTo(map);

ovvero:

  • creiamo una variabile di tipo L.marker
  • passiamo le coordinate del punto
  • specifichiamo un titolo da visualizzare quando il puntatore del mouse è posizionato sul marker
  • aggiungiamo il marker alla mappa

Visualizzando index.html nel browser vedremo l’icona blu a forma di goccia che segnala la posizione del Colosseo.

leaflet-colosseo

Possiamo associare delle informazioni al marker affinchè vengano visualizzate quando si clicca sull’icona. Il modo più semplice è di aggiungere un popup con una stringa testuale.

Il codice relativo è

marker.bindPopup("Questo è un marker popup");

Ecco il risultato ottenuto:

leaflet-popup

Nella stringa è possibile aggiungere anche dei tag html.

Ad esempio con

marker.bindPopup("Questo è un marker popup<br><b>Titolo in grassetto</b>");

si ottiene

leaflet-popup-multiriga

La prossima volta vedremo come effettuare ulteriori personalizzazioni.

Il codice completo è disponibile su GitHub.

 

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi