TUTORIAL: creare una mappa online con fotografie in uMap aggiornabile con EtherCalc 35

Share Button

Cosa è uMap

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 Francehttp://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 cambialayers oltre che la possibilità di caricare upload 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

fontanelle_acqua

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

esporta_overpassapi

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/9×3).
carica_remotoLa 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 (icona_layers)
  • 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

scegli
o quella raggruppata
raggruppa
o quella a densità
densita

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

ethercalIl 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 (osm_share) 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.
ethercalc_table
setupDa 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 setting 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: {{http://image.url.com}}
Immagine con larghezza personalizza (in px): {{http://immagine.url.it|larghezza}}
Iframe: {{{http://iframe.url.com}}}
Iframe with custom height (in px): {{{http://iframe.url.com|height}}}
--- per una linea orizzontale

Nel caso presentato questo si traduce nel seguente modo

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

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

mappa_foto

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

Share Button

35 thoughts on “TUTORIAL: creare una mappa online con fotografie in uMap aggiornabile con EtherCalc

  1. Reply maria Mag 22,2015 23:09

    http://www.arcgis.com ArcGIS Online non ha uguali…..

    • Reply napo Mag 23,2015 05:30

      mi aspettavo un feedback più interessante che una marchetta ad n software proprietario che fa più del necessario.
      Nel post è spiegato come sviluppare una soluzione usando tool open source, in cloud, privi di registrazione e collaborativi a basso costo.
      uMap è pensato per visualizzare dati geografici.
      Per soluzioni più sofisticate esistono altri tool interessanti come CartoDB.

  2. Reply ciro Mag 23,2015 21:55

    grazie Napo
    prima usavo solo spreadsheet di google per alimentare Umap.
    Ma con ethercalc.org è più semplice praticamente.

    Bisogna solo descrivere i campi da far comparire nel pop up della mappa, nella sezione “Popup content template” del “Popup options”, …tipo così
    # Ufficio: {Ufficio}
    Indirizzo: {Indirizzo}
    telefono: {telefono}
    email: {email}
    web: {web}

    grazie davvero per avermi semplificato la vita nell’alimentare Umap da un db

    a presto
    ciro

    • Reply napo Mag 23,2015 23:11

      Yes!
      Very easy.
      Hai provato la funzione slideshow di uMap?
      Puoi dare un campo per l’ordinamento (basta il nome senza graffe), il tempo di rotazione in millisecondi e poi o premi il tasto play o le frecce sx o dx per cambiare geometria da visualizzare 😉

  3. Reply andy Mag 23,2015 22:09

    Caro napo,
    un tutorial che avrei voluto scrivere io 🙂
    Mi piace.

    Solo una domanda, ma nella versione hosted di ethercalc non c’è modo di disabilitare l’editing anonimo?
    Perché se non c’è, è dura da usare: ci si potrebbe ritrovare con un foglio elettronico vuoto per una cancellazione fortuita da parte di chiunque.

    Grazie

    • Reply napo Mag 23,2015 23:07

      Ti che confesso Andrea che non lo so 🙂
      Devo documentarmi meglio
      Quello che però devi sapere è che ethercalc memorizza tutte le modifiche e puoi recuperare quindi lo stato del dataset quando vuoi 😉

    • Reply napo Mag 26,2015 09:01

      Ciao Andrea,
      non mi sembra si possa disabilitare l’editing anonimo.
      Qui c’è una issue in merito
      In ogni caso, su ethercalc c’è la funzione per recuperare lo storico delle modifiche attraverso il tasto verde in alto a destra

      In ogni caso l’url non è facilmente ricordabile e può essere condiviso da un numero ristretto di persone.
      uMap ha un modello di gestione di permessi che può essere usato sia come utente registrato che utente anonimo.
      Ammetto che può essere percepito debole come sistema.
      Tutto sommato la proposta è solo quella di mostrare cosa si può fare con uMap e EtherCalc e volendo Postimg (per le immagini) senza aver bisogno di un utente registrato e in maniera collaborativa.

  4. Reply ciro Mag 24,2015 07:52

    si infatti lo stesso dubbio di Andrea era venuto pure a me. Proteggere i dati nel db di EtherCalc in qualche maniera.
    EtherCalc è ottimo e facile come strumento collaborativo, se si riesce a trovare un tool di protezione è fantastico.

    No Napo, ancora lo slideshow di uMap non l’ho provato, e ovviamente mi accingerò a breve a provarlo, sono curioso.

  5. Reply pjhooker Mag 26,2015 08:07

    Cavoli! Interessante, grazie!

  6. Reply GianfrancoDP Mag 26,2015 16:00

    Complimenti per il post!
    sarebbe carino monitorare gli sviluppi derivati da questo progetto open. Ovvero se in futuro altri seguirannno le sue orme 😉 e implementeranno altri webware con il codice già sviluppato che a mio modo di vedere è molto potente e ha poco da invidiare ai suoi colleghi proprietari, che che ne dica maria, forse avrà scritto così per una stizza d’invidia…

    • Reply napo Mag 26,2015 16:32

      lo sviluppo di uMap è fermo da qualche mese – https://bitbucket.org/yohanboniface/umap/commits/all ma Yohan è molto attivo su diversi fronti (ha sviluppato anche diversi plugin per Leaflet che sono entrati in uMap).
      Ho fiducia che ci sarà ancora molto.
      A me piaceva mostrare la versatilità del software integrato con altri e, in particolare, il fatto che senza registrazione è possibile fare molte cose.

  7. Reply CristianCantoro Mag 27,2015 23:33

    Ciao,

    c’è questo paragrafo:
    «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 all’indirizzo http://umap.openstreetmap.fr»

    che si ripete due volte nella prima parte del post ;-).

  8. Reply matteo tempestini Mag 28,2015 19:59

    Napo, che tu sappia su un foglio Ethercalc è possibile scrivere con delle API da un’applicazione esterna? Grazie!

  9. Reply ilmistra Giu 6,2015 12:17

    Ti voglio bene Napo !! Con questo post hai risvegliato una vecchia idea, che è quella di un geospreadsheet, dove la celle possano contenere non solo coordinate spaziali, ma che possano aggregarle a creare una sorta di geojson, potendo di fatto creare geometrie più complesse del punto. Ma soprattutto modificabili con la stessa agilità di un foglio elettronico. Un cerchio puoi vederlo come insieme finito di punti o come funzione trigonometrica con parametri variabili. Altro che Fusion Tables…

  10. Reply matteo Set 21,2015 20:22

    grazie Napo

    Ho un database con le coordinate di 135 meridiane del trentino in sessagesimali, sistemerò in sessadecimali.

    ho fatto una prova
    https://ethercalc.org/ProvaMeridianeRiva

    e la mappa
    https://umap.openstreetmap.fr/it/map/20150921provameridianeriva_53617#13/45.9092/10.8446

    ma non vedo nemmeno una foto.
    non ho inoltre capito come aggiungere dinamicamente i punti

  11. Reply michele Set 22,2015 22:27

    Ciao!
    sono capitato qua per caso, ma questa guida è fantastica! la coppia ethercalc e umap funziona benissimo… fino a quando i dati non sono moltissimi, almeno così è sembrato a me.. ho fatto una prova con un csv da circa 2700 righe, e il caricamento iniziava ad essere davvero lento…
    scusami se mi permetto, ma vorrei chiederti qualche suggerimento per rendere un po’ più rapido questo caricamento! magari ci sono altri tool migliori… grazie! 🙂

    • Reply napo Set 24,2015 12:53

      Purtroppo non ho suggerimenti se non quello di provare a presentare i dati in cluster
      Dovrebbe cambiare qualcosa nella gestione in visualizzazione ma i tempi di caricamento rimangono

  12. Reply Cascafico Set 24,2015 18:17

    A quanto pare ethercalc ha dlele limitazioni nel numero di righe. Ne ho inserite 8000, visualizzate, ma poi, senzapreavviso, spariscono.

  13. Reply Nico Ott 1,2015 07:40

    Ciao Napo,
    utilizzando Umap con Overpass Turbo è possibile far visualizzare nel popup i valori dei tag che compongono l’elemento. Es. se cerco amenity=restaurant far in modo che nel popup esca cuisine=…. , phone=….
    grazie

  14. Reply Yann Vandeputte Gen 5,2016 16:24

    GRAZIE TANTO MAURIZIOOOOOO

    Scopro appena il tuo blog che mi ha fatto trovare quello cercavo da un’ora 🙁
    La sintassi per formattare i contenuti nel campo della descrizione!

    Impossibile trovarlo nella documentazione francese. Roba da matti!!! Eppure in ottobre del 2014 abbiamo ricevuto Yohan Boniface nel nostro BarCamp “Vous êtes libre ce soir” dedicato al software libero.

    Ancora grazie tanto. Scriverò un post prossimamente sul nostro blog per ringraziare.

    Una curiosità: dove hai trovato queste informazioni? Saranno esaustive oppure esistono altri elementi di formattazione?

    • Reply napo Gen 6,2016 11:28

      ciao
      complimenti per il tuo italiano e per l’attività che svolgete.
      La documentazione sulla sintassi per formattare i contenuti nel campo della descrizione è presente in umap stesso.
      È sufficiente premere sull’icona con il punto di domanda vicino al titolo ‘Description’

      Consiglio di guardare i vari tutorial sulla pagina wiki di OpenStreetMap
      http://wiki.openstreetmap.org/wiki/UMap
      Grazie!

  15. Reply Yann Vandeputte Gen 6,2016 16:26

    Grazie Napo,

    La cosa stava proprio nell’aria perché poco dopo aver mandato il mio commento, è arrivato un mio volontario che conosce benissimo OSM e mi ha dato subito la risposta!!

    È un amante dell’Italia pure lui 😉 Si chiama Olivier ed è specialista dei database. Con HTML Slidy, ci ha fatti una presentazione del progetto F4Map che conosce bene nonché una sua modesta creazione per trovare le placche di architetti presenti su alcuni edifici parigini. Non sono state registrate tutte le placche. Con i gentili contributori che vanno a zonzo per le strade di Parigi, avremo, pian pianino, una “collezione” di placche interessante.
    Per adesso, il 20° arrondissement è coperto.

    Effettivamente, sul link della documentazione che hai dato, ho trovato l’URL del tuo sito ed altri tutorial.

    Buone cose per il tuo blog

    Yann

  16. Pingback: Umap : syntaxe pour formater les éléments du champ description | Le blog

  17. Reply Roberto Gen 27,2016 17:26

    Ciao Napo,
    ho seguito passo passo il tutorial.
    Ho creato un file di prova con ethercalc
    è lo inserito come .csv in umap.
    Fin qui tutto ok ma non riesco a rendere
    dinamica la mappa..aggiorno il file di ethercalc
    ma non riesco a collegarlo ad umap perchè
    sulle proprietà del layer inserito non visualizzo
    in nessun modo “dati remoti” così da inserire l’url.

    Grazie ancora

    • Reply napo Gen 27,2016 17:38

      Ciao Roberto
      non ho capito se con la frase “lo ho inserito come .csv in umap” fai riferimento al fatto di averlo caricato dinamicamente, o se, invece, hai fatto l’upload del file.
      Ethercal ti genera il file .csv aggiungendo “.csv” all’indirizzo del browser.
      QUell’indirizzo è quello che va inserito come url per i dati remoti, facendo anche attenzione ad abilitare la funzione di proxy.
      Correggimi se ho capito male.
      Grazie

  18. Reply Roberto Gen 28,2016 18:14

    Grazie, nel frattempo sono riuscito.
    Ne approfitto per chiederti ancora una cosa:
    pur modificando i permessi della mappa con “solo
    il proprietario può fare modifiche”..se verifico
    l’url breve inviato ad altri anche questi, a mia sorpresa,
    riescono a modificare cliccando sulla matita..
    Come si fa a creare un link che non sia modificabile?
    Grazie mille

  19. Reply Roberto Feb 2,2016 16:56

    OK grazie,
    ma non si riesce a importare la visualizzazione
    di wms in umap giusto?

  20. Reply LUANA Mag 10,2016 11:33

    Figherrimo!
    ora mi ci metto a smenettare..sperando di non perdermici come al solito 😀

    Secondo te si può usarlo da totali neofiti? Tipo…provare a farlo usare in un microcorso per mappare alcuni percorsi specifici sul Baldo?

Leave a Reply