Creare una Web Map ed integrarla in un sito WordPress

Oggi le web map hanno risvolti pratici molto importanti, basta pensare a Google Maps e ai webgis forniti dalle regioni italiane.

Per motivi di lavoro, mi sono imbattuto nella creazione di una web map dei percorsi escursionistici e dei geositi presenti nel Parco Nazionale dell’Aspromonte:
questa web map ha generato molti vantaggi, sopratutto sul lato pubblicitario. Ma come si crea una web map? Quali strumenti si usano?
Il primo strumento che ho usato è stato CartoDB (una piattaforma di cloud computing che fornisce strumenti GIS e mappatura web in un browser web) e postato il risultato sul mio sito WordPress. Questo però non mi ha soddisfatto del tutto: la mappa non era interattiva!

Ho imboccato la strada giusta quando ho scoperto, a Novembre 2017, l’esistenza di LeafletJs (http://leafletjs.com).

Ma andiamo con ordine. La prima cosa da fare è creare gli shapefile, contenti gli oggetti che si vogliono rappresentare, usando QGIS.

Cosa è QGIS

QGIS è un software GIS (Geografic Information System) open source: infatti questo software è tenuto in piedi da un gruppo di sviluppatori volontari che pubblicano una nuova versione ogni 4 mesi circa.

qgis

Il software è multi-piattaforma, infatti gira su macOS, Linux, UNIX, Microsoft Windows e, sperimentalmente, anche su Android.

Questo software, essendo distribuito Open Source, il suo codice sorgente è liberamente messo a disposizione per essere scaricato e modificato. Questo permette la sua riprogrammazione per rispondere alle esigenze personali.
Le funzionalità di QGIS possono essere implementate con l’installazione di plugin, piccole estensioni caricate al momento del lancio del programma.
Ad esempio, un plugin molto utile per la creazione di web map è qgis2web.

Cosa è Leaflet?

LeafletJs (http://leafletjs.com) è la principale libreria Javascript open-source per la creazione di mappe interattive.
Un corso molto utile su LeafletJS è tenuto dal dott. Massimiliano Moraca (http://massimilianomoraca.it/blog/webmapping/); inoltre nel sito ufficiale di Leaflet c’è una vasta documentazione e molti esempi funzionali all’apprendimento.

web map

Va precisato che, per creare una webmap, oltre a conoscere Leaflet QGIS servono basi di <, HTML e CSS.
Per l’implementazione web di questo l’editor Atom .

Come integrare la webmap in un sito WordPress

Una volta costruita la web map con ho avuto il problema di come integrarla con il template del mio sito WordPress. La soluzione che ho adottato è stata quella di incorporare la pagina della mappa tramite iframe.

Collegandomi tramite FTP (con FileZilla, scaricabile da qui) sull’host che ospita il mio sito ho caricato la cartella contenente il mio progetto. Quindi ho creato una pagina php con il seguente codice:

<code “font-size: 6px”>
<?php get_header(); ?>

<div class=”mappa”>
<iframe width=”100%” height=”500″ src=”https://www.intrageo.it/geotour.html”></iframe></div>

<?php get_footer(); ?>

Il <div class="mappa"&gt contiene l’iframe, il quale attraverso weight e height controlla le dimensioni della mappa richiamata da src="".
Questa pagina deve essere caricata nella directory contente il tema del sito.

Il risultato finale può essere consultato con questo link: www.intrageo.it/geotours.

Sia le icone dei punti di interesse che quelle dei geositi, sono state scaricate dal geoportale della Regione Emilia-Romagna.

Approfondimenti

Per approfondire l’argomento trattato in questo post si consigliano i seguenti testi:

Ringraziamenti

Un ringraziamento particolare va a Giovanni Nirta – webmaster presso Graphicompany – per il suo preziosissimo aiuto nell’inserimento della mappa all’interno del template WordPress.

Ciao, mi chiamo Antonio Nirta e sono un geologo. Mi sono laureato all’Università di Pisa e dal 2017 svolgo la libera professione.

Attraverso i post presenti in questo blog cercherò di trasmettere la mia passione per le Scienze Geologiche e di fornire informazioni che riguardano il bellissimo settore della Geologia.

2 thoughts on “Creare una Web Map ed integrarla in un sito WordPress

    1. Ciao Piergiorgio, ti ringrazio per l’apprezzamento. Condivido con te l’opinione che una webmap è più coerente all’interno di articoli e siti web: esprime al meglio la sua utilità. A presto, Antonio.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *