alsperGIS DATI
SOFTWARE


  
QGIS plugin
   QGIS2Leaf: realizzare mappe da inserire in siti internet



Pagina del plugin: https://github.com/geolicious/qgis2leaf
Una buona spiegazione in italiano è qui ma riguarda la versione 0.8.4 (un po' vecchia). Nell'esempio di questa pagina ho usato la versione 1.5.2.

Questo plugin permette di convertire la vista di QGIS in una mappa interattiva Leaflet consistente in una pagina .html, alcuni files .css e alcuni files .js; tale mappa può essere facilmente inserita in un sito web. Inoltre è possibile scegliere mappe già online basate su open street map da usare come sfondo.

Per installare il plugin è sufficiente usare il menù "Plugins", scegliere "Gestisci e installa plugin...", cercare "qgis2leaf", installarlo e abilitarlo (dev'esserci il segno di spunta nell'elenco dei plugins installati).
L'uso è molto semplice. Per prima cosa nella vista di QGIS dobbiamo rendere visibili i layer che vogliamo includere nella mappa html. Nel mio esempio ho usato tre layers: uno di punti (con relative etichette), uno di linee e uno di poligoni.



Ora attiviamo il plugin: "Web > qgis2leaf > Exports a QGIS Project..."



La finestra è abbastanza intuitiva. Con "Get Layers" importiamo i layers visibili nella vista di QGIS. Ci sono varie opzioni (la maggior parte sono spiegate nella scheda "Help"); io mi sono limitato a spuntare "create labels" per importare le etichette presenti nella vista di QGIS e "labels on hover" in modo da visualizzarle solo al passaggio del mouse (la versione 1.5.2 del plugin ha problemi nella comparsa on hover delle etichette ma poi spiego come risolvere).
Con "Frame width/height" possiamo indicare subito la dimensione in pixels che avrà la mappa. Personalmente preferisco creare una mappa a pieno schermo e poi usare iframe per includerla nelle pagine che voglio; in tal modo posso usare la stessa mappa in più pagine, anche con dimensioni diverse specificate dall'iframe.
Alla voce "Basemaps" possiamo selezionare una o più mappe on-line da usare come sfondo per i nostri dati. Con più mappe chi visita la pagina ha la possibilità di scegliere quella che preferisce.
Infine scegliamo il percorso in cui salvare la mappa, il suo nome e i titoli da visualizzare. La mappa viene salvata nel percorso indicato in una cartella con nome "export_YYY_MM_DD_hh_mm_ss".
Questo è il risultato:



Nel mio caso ho rinominato la cartella "export_YYY_MM_DD_hh_mm_ss" in "_mappa". Essa contiene il file "index.html" (che io ho rinominato "index0.html) con le caratteristiche principali della mappa e alcune cartelle con altri files necessari al funzionamento dei livelli della mappa; in particolare la cartella "data" contiene i dati vettoriali visualizzati nella mappa (nel mio caso si tratta dei files exp_itinerari.js, exp_Places.js e exp_puntidinteresse.js).
In seguito alle opzione di qgis2leaf che ho scelto, index0.html mostra la mappa a pieno scermo, mentre il riquadro soprastante è un iframe con dimensione 700x600 px collegato a index0.html con il seguente codice:

<iframe src="../slowphoot/_mappa/index0.html" height="600" width="700">iframe_map0</iframe>


Ecco il codice della pagina "index0.html":


Per capire meglio tale codice ho dato colori diversi alle diverse parti:
- in grigio e nero: parte iniziale con i riferimenti ai files .js e parametri come l'inquadratura iniziale della mappa (livello di zoom e coordinate);
- in viola: le diverse basemaps che possono essere usate come sfondo;
- in diversi toni di blu: le parti relative ai layers vettoriali "Places", "itinerari" e "punti d'interesse";
- in verde: parte che aggiunge il titolo e l'elenco di basemaps e dati al layout della mappa.

Nella parte relativa ad ogni layer vettoriale vediamo che c'è sempre una definizione var exp_layer = new L.geoJson(exp_layer,{...}) che richiama la funzione pop_layer e stabilisce la simbologia (style). Quest'ultima viene definita direttamente nel caso del layer puntuale ("punti d'interesse") mentre per gli altri avviene attraverso la funzione doStylelayer.
La funzione pop_layer fa comparire una finestra Popup (layer.bindPopup(popupContent)) quando si clicca su un elemento. In genere il contenuto di tale finestra (
popupContent) corrisponde all'elenco degli attributi di quell'elemento (questo è ciò che avviene per il layer "Places"). Invece per i layers "itinerari" e "punti d'interesse" il contenuto della finestra Popup è diverso: infatti se creiamo la colonna "html_exp" nella tabella attributi del layer il plugin considera solo l'attributo in essa contenuto come dato da visualizzare nella finestra (var popupContent = feature.properties.html_exp). Il bello è che si può inserire una stringa in html; il brutto è che la stringa non può superare i 255 caratteri. Per aggirare il problema ho inserito nella colonna "html_exp" un collegamento mediante iframe a files html.
La tabella degli attributi del layer "itinerari", ad esempio, contiene:

id
html_exp
3
<iframe src="../_mappa/i003.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>
2
<iframe src="../_mappa/i002.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>
1
<iframe src="../_mappa/i001.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>
6
<iframe src="../_mappa/i006.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>
5
<iframe src="../_mappa/i005.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>
4
<iframe src="../_mappa/i004.html" height="310" width="300" frameborder="0">iframe anteprima</iframe>




Ci sono però un paio di difetti da aggiustare.
Per prima cosa il layer "punti d'interesse" appare scritto "puntidinteresse" (sono saltati le spazio e l'apostrofo). Questo si risolve molto facilmente aprendo il file html e sostituendo "puntidinteresse" con "punti d'interesse" nella parte finale che aggiunge l'elenco dei layers al layout della mappa.
Ecco come cambia (in rosso la parte modificata):


Un secondo difetto è che sui punti d'interesse dovrebbe comparire un etichetta al passeggio del mouse, invece questo non avviene. Si risolve cercando la parte relativa al layer ed aggiungendo .bindLabel(feature.properties.campo_con_etichetta) al termine del comando return L.circleMarker(...):



Ecco la mappa risultante (passando il puntatore del mouse sui punti azzurri ora compare l'etichetta):





altre modifiche possono essere apportate alla mappa semplicemente modificando il file index.html: >>> parte 2a, modificare la mappa Leaflet




 
Argomenti correlati

>>> modificare la mappa Leaflet
>>> QGIS




Collegamenti esterni

Leaflet
https://github.com/geolicious/qgis2leaf
esempio QGIS2Leaf versione 0.8.4










Ottobre 2015
Alessandro Perego