Creare una Web Map ed integrarla in un sito WordPress

Oggi le WebMap 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 WebMap ha generato molti vantaggi, sopratutto sul lato pubblicitario. Ma come si crea una WebMap? Quali strumenti si usano?

I principali strumenti per creare una WebMap sono:

  1. QGIS2Web; un plugin di QGIS;
  2. LeafletJS, una libreria Javascript;
  3. Folium, una libreria Python.

Va precisato che, oltre a conoscere QGIS, Leaflet e Python, per creare una WebMap  servono basi di  HTML e CSS.

QGIS2Web

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.

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

Questo software, essendo distribuito Open Source, ha il codice sorgente free, ovvero può 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. Fra questi plugin c’è QGIS2Web: in questo link potete trovare un tutorial molto ben fatto.

LeafletJS

LeafletJs è la principale libreria Javascript open-source per la creazione di mappe interattive. Leaflet pesa solo 38Kb e ha tutte le caratteristiche di webmapping di cui gli sviluppatori hanno bisogno. Questa libreria è sviluppata con semplicità, performanza a usabilità. Lavora efficentemente su tutte le principali piattaforme mobile e desktop e può essere ampliata usando numerosi plugins. La WebMap presente in questa pagina l’ho sviluppata usando questa libreria.

Folium

Folium è una libreria Python che ci permette di visualizzare i dati spaziali in modo interattivo. Folium costruisce le mappe unendo i punti di forza di Python con quelli di LeafletJS: i dati vengono elaborati con Python e visualizzati con LeafletJS attraverso Folium.

Questa libreria, open-source, è altamente intuitiva e consente un alto grado di interazione. La documentazione ufficiale è consultabile qui.

In questo link trovate un tutorial su come creare una WebMap usando Folium.

Come integrare la WebMap in un sito WordPress

Una volta costruita la WebMap per integrarla con il template del nostro sito WordPress possiamo seguire la soluzione spiegata di seguito.

Ci colleghiamo tramite FTP (usando FileZilla, scaricabile da qui) all’host che ospita il sito, carichiamo la cartella che contiene la WebMap. Quindi creaiamo una pagina php con il seguente codice:

<?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.

Approfondimenti

Per approfondire il tema trattato in questo post consiglio i seguenti testi:

Questi testi possono essere acquistati con Amazon Prime, che prevede una prova gratuita di 30 giorni. Potete iscriversi a questo servizio cliccando sul banner sottostante.

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.

Spread the love

Lascia un commento

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