LeaFlet–Cerchi e poligoni e spostamento

Abbiamo visto come creare Marker e Rettangoli, ora vediamo come creare cerchi, polilinee e poligoni.


Per poter creare un cerchio utilizziamo la funzione Circle:

    function addCircle(){
        
    var circle = new L.Circle([41.88451216480288,12.463416520896356],1000)
    mymap.addLayer(circle);
}        

Il primo parametro indica il centro del cerchio, il secondo definisce il raggio in metri, nel nostro caso 1Km. Ovviamente possiamo definire un terzo parametro di opzioni in modo da indicare colori etc… Fin’ora abbiamo passato le coordinate come array, ma LeaFlet mette a disposizione un oggetto LatLng e quindi la nostra funzione di definizione del cerchio diventa :

function addCircle(){
    var posizione = new L.LatLng(41.88451216480288,12.463416520896356);
    
    var circle = new L.Circle(posizione,1000)
    mymap.addLayer(circle);
}

Possiamo ad esempio utilizzare l’oggetto LatLng per poterci spostare sulla mappa da una posizione ad un’altra :

var posizioni = [ 
    L.latLng(41.88451216480288,12.463416520896356), //Roma
    L.latLng(45.43423778818443,12.338805198669434), //Venezia
    L.latLng(45.464088787666256,9.19182300567627), //Milano
    L.latLng(40.83576203938251,14.248580932617188), //Napoli
    L.latLng(37.50244037178123,15.088090896606445), //Catania
];


function spostamento(){
    var posIndex = 0;
    setInterval(function(){
        mymap.panTo(posizioni[posIndex],{animate : true, duration:3});
        posIndex++;
        if (posIndex >= posizioni.length){

            posIndex = 0;
        }

    }, 5000);       
}

Come documentato sulla documentazione LeaFlet il panTo accetta come parametro un LatLng e delle opzioni.
Riutilizziamo l’array delle posizioni precedentemente creato per poter creare una Polyline:

function addPolyline(){
    var polyline = L.polyline(posizioni, {color: 'red'}).addTo(mymap);

    mymap.fitBounds(polyline.getBounds());
}

Da quest’ultima funzione c’è da notare due cose:la prima è che creiamo l’oggetto polyline senza il costruttore new. LeaFlet infatti ci da la possibilita per tutti gli oggetti due modi alternativi di creazione : con la lettera maiuscola dovremo utilizzare la keyword new (nel nostro caso ad es. new L.Polyline), con la lettera minuscola invece l’oggetto sarà già creato (quindi L.polyline); la seconda cosa da notare è l’ultima riga, ovvero il mymap.fitBounds. Tutti gli shape che andremo ad inserire nella nostra mappa hanno il metodo getBounds che ritorna il limite della figura appena aggiunta. Con il metodo fitBounds diciamo alla mappa di effettuare un pan e uno zoom in automatico affinchè venga visualizzato tutte le coordinate che gli passiamo. Ad esempio avremo potuto fare mymap.fitBounds(posizioni) e sarebbe stata la stessa cosa.
Infine vediamo i polygon:

function addPolygon(){
    L.polygon(romaContorno,{color:'orange'}).addTo(mymap);
    setTimeout(function(){
        mymap.fitBounds(romaContorno);
    }, 3000);
}

La procedura è sempre la stessa, in questo caso creiamo il poligono e lo aggiungiamo direttamente alla mappa senza creare la variabile e, dopo 3 secondi, facciamo un fitBounds sul contorno, semplice no?
Come al solito i sorgenti li potete trovare qui: sorgenti
Ho inoltre creato un repository su github