Dal sito di LeaFlet potete trovare le Feature che tale libreria mette a disposizione oltre che ai plugin disponibili raggruppati per categoria in quanto… sono veramente molti.
Nella sezione tutorial ci sono molte guide su come programmare LeaFlet e se per caso avete un CMS come WordPress potrete trovare numerosi plugin per poter aggiungere una mappa sul vostro CMS di fiducia.
Ma come funziona LeaFlet? Funziona principalmente con le Tile utilizzando il TileLayer.
Il TileLayer permette la selezione di mappe differenti come ad esempio quelle di OpenStreetMap o dei sopracitati siti web che vi ho elencato. Potrete utilizzare anche le mappe di Here o di BingMaps. Tutte meno che quelle di Google, anche se, tramite un plugin apposito, possono essere utilizzate contravvenendo però alla licenza di utilizzo.
Ma che cos’è il TileLayer? Il TileLayer è un livello che permette, in base alla dimensione della mappa, il caricamento delle immagini che compongono la mappa visualizzata. Se vi incuriosisce la cosa microsoft ci mette a disposizione la spiegazione del funzionamento del Marcator con tanto di codice C#.
Quindi in LeaFlet avremo un provider che, date le tile che sono necessarie, ci darà le immagini necessarie per il render della nostra view.
Scaricate da questo link il codice sorgente base per iniziare con LeaFlet e iniziamo a vedere il codice assieme.
Nella pagina index.html includicamo sia il css di leaflet che il javascript della libreria stessa e abbiamo il seguente pezzo di codice :
<style>
#mapid { height : 600px; }
</style>
<div id="mapid"></div>
lo style serve per indicare l’altezza dell’elemento mapid che sarà poi l’altezza della nostra mappa. Poi abbiamo il seguente codice javascript :
<script type="text/javascript">
var mymap = L.map('mapid').setView([41.88451216480288,12.463416520896356], 12);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
mymap.addLayer(osm);
</script>
Con l’istruzione L.map definiamo la mappa vera e propria, e indichiamo che vogliamo utilizzare l’elemento mapid. Con setView indichiamo tra parentesi quadre la latitudine e la longitudine della posizione di visualizzazione della mappa, e con 12 la zoom (da notare che valori decrescenti indica una distanza elevata, per capirne il motivo guardatevi il Marcator come indicato sopra).Nella variabile osmUrl viene indicato l’url di download delle tile mentre con osmAttrib è l’attribuzione del provider
Dopodichè creiamo il TileLayer indicando l’url delle tile, e un pò di opzioni, tra le quali il minimo e il massimo livello di zoom, e il logo di attribuzione appunto e infine aggiungiamo questo Layer appena creato alla mappa appena creata.
Semplice no?
LeaFlet–Marker, Rettangoli e popup
