Leaflet: una breve introduzione

      Commenti disabilitati su Leaflet: una breve introduzione

 

Leaflet è attualmente una delle librerie open source javascript più importanti per la creazione di mappe interrative. Ad oggi siamo arrivati alla versione aggiornata 1.2.0 in quanto la precedente creava alcuni problemi con diversi plugin di cui la libreria si serve per estendersi verso funzionalità più specifiche nel fare WebMapping.

Prendendo spunto dal tutorial ufficiale, ecco un rapido modo per pubblicare una webmap analizzando il codice passo a passo con la pubblicazione di una basemap.

La prima cosa da fare è preparare i link che puntano al motore della libreria, qui si utilizza la versione CDN e i suoi fogli di stile CSS. Infatti prima ancora di partire col codice nella parte script bisogna inserire nel nostro foglio html i seguenti link .
NB. Leaflet incoraggia l’uso dei link CDN (Content Delivery Networks ) con l’utilizzo di un Subresource Integrity, ovvero una stringa che permette ai browsers di verificare che il contenuto dei file che si andranno a  caricare per le librerie non sia manipolato.

<!- Leaflet’s CSS –>

<link rel=“stylesheet” href=“https://unpkg.com/leaflet@1.2.0/dist/leaflet.css” integrity=“sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==” crossorigin=“”/>

<!– Make sure you put this AFTER Leaflet’s CSS –>

<script src=“https://unpkg.com/leaflet@1.2.0/dist/leaflet.js” integrity=“sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==” crossorigin=“”></script>

Nel nostro <head> ricordiamo di inserire la parte dello style per l’oggetto mappa:

 

    <style type=”text/css”>
html, body,#map {
height: 100%;
width: 100%
}
</style>

 

Quest’ultimo sarà dichiarato nel <body> cosi come segue:

<div id=”map”></div>

 

Nello stesso <body> inseriremo anche il cuore del codice dove verranno eseguiti i comandi di javascript per richiamare le librerie di leaflet.

 

<script>
        var map = L.map(‘map’).setView([48.854716, 2.349014 ], 14);
        mapLink =  ‘<a href=”http://openstreetmap.org”>OpenStreetMap</a>’;
        L.tileLayer(
            ‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
            attribution: ‘&copy; ‘ + mapLink + ‘ Contributors’,
            maxZoom: 18,
            }).addTo(map);
</script>

 

Analizzando il semplice script si nota l’uso del metodo setView all’interno del quale è possibile settare le coordinate del centro mappa, mentre con tileLayer inseriamo url per prelevare una semplice mappa di OpenStreetMap oltre allo zoom, in questo caso con valore 18. L’oggetto map viene dato in pasto al metodo addTo che non fa altro che aggiungere il layer in modo da poterlo visualizzare e passarlo al <div> della mappa.
Il risultato finale è questa bella zoomata su Parigi!

Un ulteriore step è introdurre dei Marker. In tal caso facilmente basta aggiungere tale stringa di codice

var marker = L.marker([48.854716, 2.349014 ]).addTo(mymap);

 

Per avere tale risultato:

 

E se volessimo inserire un popup? niente di più facile, con la funzione bindPopup, leghiamo l’informarzione che ci appare nel Pupup al marker:

marker.bindPopup(“<b>Qui c’è Notre Dame de Paris</b>”).openPopup();

 


Chiaramente per un tutorial base, non possono mancare poligoni e linee da inserire nella mappa. Per cui aggiungiamo al codice:

var circle = L.circle([48.86096,2.36077], {
                                           color: ‘red’,
                                           fillColor: ‘#f03’,
                                           fillOpacity: 0.5,
                                           radius: 500
                                       }).addTo(map);
var polygon = L.polygon([
                               [48.85095,2.33506],
                               [48.84591,2.34232],
                               [48.84472,2.33852]
                        ]).addTo(map);
var polyline = L.polyline([
                             [48.86095,2.34506],
                              [48.85591,2.31232],
                             ]).addTo(map);

 

Finisce qui questa panoramica introduttiva a questa utilissima libreria. Le potenzialità di tale strumento sono molteplici e possono essere utilizzate nelle più svariate maniere per rendere il proprio WebGIS sempre più versatile e interattivo possibile.

Please follow and like us:
0