Ora vedremo come poter aggiungere dei marker o un rettangolo alla nostra mappa.
Su una mappa di LeaFlet possiamo aggiungere dei Marker semplicemente con le seguenti istruzioni :
var marker = new L.Marker([41.88451216480288,12.463416520896356],{title : 'Centro di Roma'});
marker.bindPopup( '<p>Questo è il centro di Roma</p>' );
mymap.addLayer(marker);
Con L.Marker creiamo un nuovo oggetto di tipo Marker passando come primo parametro Latitudine e Longitudine, mentre come secondo parametro le opzioni dell’oggetto stesso. Nel caso in esempio indichiamo il titolo del marker che verrà visualizzato quando ci passeremo sopra con il mouse.Nell seconda riga definiamo invece una finestra di popup nel caso in cui l’utente clicchi sul marker stesso. In questo caso indichiamo il codice HTML di visualizzazione, ma potremmo indicare anche un elemento HTML.
Infine nell’ultima riga aggiungiamo a mymap il marker appena definito.
Possiamo inoltre aggiungere un rettangolo :
var ne =[41.90911210198959, 12.462444305419922];
var sw =[41.897932883580054, 12.442960739135742];
var bounds = [ne, sw];
var rectangle = new L.Rectangle(bounds,{color:"#ff7800", weight:3,opacity:0.7,fillOpacity:0.5});
mymap.addLayer(rectangle);
Nella prima e nella seconda riga definiamo i due punti estremi del rettangolo : ne e sw.Nella terza riga definiamo l’array dei due punti appena creati [ne, sw] dove ne = NorthEast e sw = South West.
Nella quarta creiamo l’oggetto rectangle passando come primo parametro il bound e come secondo le opzioni dell’oggetto stesso. In questo caso definiamo oltre al colore, anche lo spessore del contorno (weight), l’opacità del contorno(opacity con valori compresi tra 1 strong e 0 trasparente) e l’opacità di riempimento (fillOpacity definito come opacity).
Infine aggiungiamo l’oggetto rettangolo alla mappa con l’istruzione già vista ovvero addLayer.
Le opzioni degli oggetti Marker e Rectangle differiscono tra i due, vi lascio alla documentazione di LeaFlet per ulteriori approfondimenti.
Se in qualunque istante volessimo rimuovere ad esempio l’oggetto rectangle dalla mappa basta semplicemente :
mymap.removeLayer(rectangle);Per verificare se l’oggetto è già incluso nella mappa :
var rectangleInTheMap =mymap.hasLayer(rectangle);Vi lascio il codice sorgente con gli esempi appena illustrati, alla prossima
