Leaflet: una breve introduzione - Geopillole

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!