Cosa è uMap

uMap è un software potentissimo per la creazione di mappe online, da inserire nel proprio sito, che fanno uso di OpenStreetMap come sfondo. Il software è creato dall’italo-francese Yohan Boniface, rilasciato in open source con la licenza “do what the fuck you want to public license”, scritto in django e leaflet, e reso disponibile sugli spazi di OpenStreetMap France - http://umap.openstreetmap.fr. L’interfaccia per creare mappe è molto intuitiva e, i risultati che si ottengono danno subito soddisfazione. Appena premuto il tasto “Crea una mappa” diventa semplicissimo cominciare ad inserire punti, linee o poligoni sulla mappa, definirne gli stili, le modalità con cui aprire una finestra informativa al clic o crearne uno slideshow automatico. La mappa di sfondo predefinita è quella di OpenStreetMap in francese, ma il software offre diverse alternative oltre che la possibilità di caricare file con coordinate geografiche in latitudine e longitudine (WGS84) che si presentano nei formati: geojson, gpx, kml, georss, osm e csv. Tutte le proprietà contenute contenute file caricato diventano automaticamente dati che uMap è in grado di gestire, eccezion fatta per il formato CSV. In questo caso uMap ha bisogno di avere un minimo di regole: il file può usare come separatore la virgola o il tabulatore o il punto e virgola, può contenere solo entità geografiche fatte da punti, e queste devono essere definite all’interno delle colonne “lat” e “lon” (rispettivamente latitudine e longitudine). A quel punto uMap è in grado di rappresentare i punti e utilizzerà tutte le altre colonne come attributi dei dati da visualizzare. Inoltre, in uMap, la registrazione utente è opzionale (le mappe create ottengono un indirizzo univoco da memorizzare con la possibilità di averne anche uno dedicato alla configurazione), e i dati generati possono essere scaricati e redistribuiti.

uMap e Overpass-turbo

le fontanelle dell'acqua del Trentino prese da OpenStreetMap grazie a overpass-turbo.eu

funzione di esportazione di overpass-turbo.eu

Il supporto al formato .osm è stato pensato per poter ottenere, direttamente da uMap di rappresentare al volo un insieme di dati che vengono inseriti in OpenStreetMap da una query a overpass-api (prodotto open source che offre delle API avanzate di interrogazione dei dati osm). Il risultato è che, ogni volta che un dato viene inserito in OpenStreetMap, può essere visualizzato anche dalla mappa uMap creata. Prendiamo come esempio le fontanelle dell’acqua presenti in Trentino. La query a overpass per fare questa operazione è facilmente realizzabile tramite il front-end open source overpass-turbo specificando l’output in xml (per semplicità si rimanda a qui http://overpass-turbo.eu/s/9x3). La query creata a sua volta può essere esportata anche per essere usata in uMap.

• creare una nuova mappa da umap
• andare sul box di sinistra di gestione dei layer ()
• modificare le proprietà del layer
• e nelle impostazioni selezionare "Dati remoti" aggiungendo come URL quella alla chiamata alle overpass-api generata da overpass-turbo.eu

 

 

Il caricamento di dati dinamici con overpass-api

A questo punto uMap caricherà i dati la cui rappresentazione potrà essere cambiata sia nella vista classica ad icone

o quella raggruppata o quella a densità

Grazie al fatto che i dati sono caricati in remoto, il risultato è che, ogni volta che un dato di tipo “amenity=drinking_water” inserito dell’area geografica del Trentino, verrà presentato anche nella mappa quando ricaricata.

Caricamento dinamico dei dati in uMap usando Ethercalc

Il caricamento dinamico dei dati in uMap in realtà richiede che una sorgente dati si occupi di tenere aggiornato un file nei vari formati supportati per poi caricarlo ogni volta che si accede alla propria mappa. Pertanto un georss (un feed xml di notizie georiferite) può apparire benissimo su uMap, così come un geojson che viene aggiornato periodicamente su un webserver. Una semplice soluzione può essere quella di creare una tabella online (un foglio di calcolo) da tenere aggiornata in maniera collaborativa. Tutto sommato si tratta di seguire le regole base di come un file .csv deve essere dato in pasto a uMap (pertanto le due colonne “lat” e “lon”). Ethercalc è un prodotto open source collaborativo utilizzabile dal sito http://ethercalc.org senza alcuna necessità di registrazione. Ogni foglio di calcolo generato può essere esportato nel formato .csv aggiungendo, semplicemente, la stringa .csv all’indirizzo. Es. se l’url generata da ethercal è https://ethercalc.org/ridy7cf5er, con https://ethercalc.org/ridy7cf5er.csv si otterrà il file .csv della tabella descritta.

preparazione di una tabella in ethercalc

Supponiamo lo scenario di voler far inserire, in maniera collaborativa, le fotografie di una città con relative descrizioni. Il primo lavoro da fare è definire i campi. Ad esempio: name per il nome, desc per descrizione, url per l’indirizzo web dell’immagine, lat per la latitudine e lon per la longitudine. Fatta questa operazione si comincia a riempire le righe successive. Le fotografie possono essere caricate su siti come flickr o commons o archive o postimg (che non richiede registrazione) rispettando però i copyright. Le coordinate possono essere recuperati in diversi modi: estrando le informazioni dai metadati delle foto (se presenti), rilevandole sul posto con un gps, o ricavandole da un servizio online. In quest’ultimo caso, si può usare il sito web che ospita la mappa OpenStreetMap creando un marcatore sullo schermo, usando la funzione di condivisione presente sulla bottoniera a sinistra () e riportando le coordinate che vengono visualizzate nella barra di navigazione. Per comodità viene riportato un esempio basato sulle informazioni recuperate dalla pagina Trento presente in Wikipedia. Da qui si ripetono i passaggi visti sopra per collegare in maniera dinamica uMap ad una query overpass-api semplicemente inserendo l’url di ethercalc seguita da .csv facendo attenzione a selezionare il formato “csv” e abilitare le variabili “Dinamico” e “Richiesta proxy”. Sulla mappa appariranno subito i dati inseriti nella tabella, che essendo però collegata dinamicamente, ogni volta che sarà aggiunta una riga, si aggiornerà.

Ora si può passare alla personalizzazione della mappa. Cominciamo con l’inserire un nuovo fornitore di mappe di sfondo, come, ad esempio, uno di quelli offerti da Mapbox. Entrando nelle impostazioni di uMap, seguendo la voce “Sfondo personalizzato” è sufficiente assegnare un nome e aggiungere una url secondo lo schema supportato (es. http://{s}.tiles.mapbox.com/v3/tmcw.map-7s15q36b/{z}/{x}/{y}.png). Le icone possono essere cambiate in maniera globale alla voce “Proprietà preimpostate”. Per far apparire invece una pagina informativa al clic, occorre andare ad operare alla voce “Default popup options”. Se non viene definito nulla, uMap, va ad utilizzare il campo “name”. Nel nostro caso vogliamo avere un popup che mostri: il nome del luogo, con il link alla descrizione ed una immagine. Per fare questo occorre usare la sintassi richiesta da uMap che segue questa formattazione

*asterisco per l'italico* **due asterischi per il testo marcato**

un cancelleto per l’intestazione principale

due cancelletti per le intestazioni di secondo livello

tre cancelletti per intestazione di terzo livello

Link semplice: [[http://example.com]] Link con testo: [[http://example.com|testo del link]] Immagini: Immagine con larghezza personalizza (in px): Iframe: } Iframe with custom height (in px): } — per una linea orizzontale</span></code>

Nel caso presentato questo si traduce nel seguente modo

[[{desc}|{name}]] }

Salvata la mappa si può subito farne un test e vederne il risultato.

A questo punto l’indirizzo per le modifiche può essere protetto () e con la funzione di condivisione ) è possibile ottenere: il codice iframe per incorporare la mappa in un sito, l’url semplificata e il download del dataset.