alsperGIS DATI
SOFTWARE


  
QGIS plugin
   QGIS2Leaf, 2a parte: modifica della mappa leaflet



>>> QGIS2Leaf: 1a parte


Alla mappa ottenuta dal plugin ho voluto fare ancora alcuni cambiamenti, sempre modificando il file index.html



   1° modifica: cambiare i layers visualizzati all'inizio

Ho voluto creare due file .html che utilizzano gli stessi dati ma mostrano layers iniziali diversi.
Nel primo voglio che all'inizio vengano visualizzati solo i poligoni del layer "Places". Per far questo occorre modificare le parti relative agli altri layers aggiungendo un doppio slash (//) davanti  ai comandi che aggiungono tali layers alla mappa in modo da disattivarli. Nel caso del layer di punti c'è solo la riga feature_group.addLayer(exp_puntidinteresseJSON). Per il layer di linee invece bisogna disattivare anche il ciclo for soprastante.

Ecco come diventa il codice:


questa è la mappa risultante:




Per il secondo file .html voglio che vengano visualizzati solo i layers "itinerari" e "punti d'interesse" e voglio cambiare basemap iniziale.
Quindi, come sopra, disabilito con // i comandi che aggiungono il layer Places alla mappa. Inoltre disabilito basemap_0.addTo(map) che aggiunge la basemap n° 0 alla mappa ed aggiungo basemap_1.addTo(map), in modo da caricare la basemap n°1.

Ecco come cambia il codice:


e questa è la mappa risultante:



Per vedere un'anteprima delle diverse besemaps e per avere i codici javascript di altre possibili mappe da usare come sfondo condiglio di guardare la pagina https://leaflet-extras.github.io/leaflet-providers/preview/.



   
3° modifica: evidenziare gli elementi al passaggio del mouse

Ho voluto fare in modo che ogni elemento del livello "itinerari" venisse evidenziato al passaggio del mouse per distinguerlo dagli altri. Cercando in internet ho trovato questa discussione che fornisce una soluzione.
Bisogna cercare la parte che determina il comportamento del layer ed aggiungere alcune righe.
All'interno della finzione pop_itinerari va inserita la seguente istruzione:

layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });

che in pratica richiamano le funzioni "highlightFeature" quando il cursore del mouse è sull'elemento (mouseover) e "resetHighlight" quando va via (mouseout).
Le due funzioni sono così specificate:

function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
        fillColor: "yellow",
        color: "yellow",
        weight: 5,
        opacity: 1
    });
    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}

function resetHighlight(e) {
    exp_itinerariJSON.resetStyle(e.target);
}

Nella la prima vengono indicate le caratteristiche (colore, spessore, opacità) del nuovo stile da applicare all'elemento, mentre con la seconda viene semplicemente resettato lo stile originario.

Quindi il file .html diventa:


e ora nella mappa gli itinerari vengono evidenziati al passaggio del mouse:





   4° modifica: click e zoom su un elemento

Per il layer Places (costituito da poligoni) ho voluto fare in modo che al click, invece di aprirsi la finestra popup, ci fosse uno zoom sull'area dell'elemento cliccato con cambiamento della mappa di sfondo (basemap) e dei layers vettoriali visualizzati.
Per fare questo bisogna eliminare o disattivare con // il comando onEachFeature: pop_Places nella definizione var exp_PlacesJSON = ... e richiamare la nuova funzione di zoom per ogni elemento (feature), ovvero onEachFeature: zoom.

La funzione zoom è così definita:

        function zoom(feature, layer) {
            layer.bindLabel(feature.properties.Name),
            layer.on({
              mouseover: highlightPlaces,
              mouseout: resetHighlightPlaces,
              click: clickFeature
            });
          }

con layer.bindLabel(feature.properties.Name) si associano le etichette (campo Name) agli elementi del layer;
all'interno di layer.on vengono richiamate le funzioni per evidenziare l'elemento (highlightPlaces e resetHighlightPlaces di cui ho già detto) e la funzione clickFeature che si attiva al click.

La funzione clickFeature è:

        function clickFeature(e) {
          var layer2 = e.target;
          map.fitBounds(layer2.getBounds());
          map.removeLayer(basemap_0)
          basemap_1.addTo(map);
          map.removeLayer(exp_PlacesJSON);
          exp_itinerariJSON.addTo(map);
          exp_puntidinteresseJSON.addTo(map);
          }

map.fitBounds(layer2.getBounds()) prende l'area (bounds) contenente l'elemento e porta la mappa su tale area;
con il comando map.removeLayer vengono rimossi i layers basemap_0 e exp_PlacesJSON mentre con .addTo(map) si aggiungono i layers basemap_1, exp_itinerariJSON e exp_puntidinteresseJSON.

Ecco come cambia la pagina html:
(la funzione pop_Places, che non viene più attivata, può essere cancellata; io ho preferito lasciarla così se voglio riusarla mi basta togliere // da onEachFeature: pop_Places)


e questa è la mappa risultante:





   5° modifica: titolo e sottotitolo

Ora però serve un modo per permettere al visitatore di tornate alla vista iniziale. La soluzione più semplice è inserire nel titolo o nel sottotitolo un link html alla pagina stessa in modo da ricaricarla con le impostazioni iniziali.

La parte che aggiunge titolo e sottotitolo alla mappa si trova verso la fine del file html:


ed ecco la mappa finale:










 
Argomenti correlati

>>> mappe Leaflet con qgis2leaf
>>> QGIS




Collegamenti esterni

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










Ottobre 2015
Alessandro Perego