Umap

INTRODUZIONE

La rete, la tecnologia, internet ha un indiscusso vantaggio, ovvero quello di aver accorciato le distanze e di aver portato un concetto meraviglioso, quello della democrazia dell'informazione.

L'informazione è diventata libera e soprattutto non unidirezionale. Non assistiamo passivi a quanlcuno che ci racconta contenuti, ma possiamo noi stessi contribuire al passaggio e alla creazione di conoscenza condividendo quello che sappiamo (un pò come sto facendo io con questo articolo).

Questo concetto OPEN è alla base di progetti come Wikipedia o Openstreetmap che permetto la diffusione di informazioni e dati in forma di testo o di mappa. Certo occorre prestare attenzione, diventare consapevoli nella lettura di queste informazioni, capaci di vagliarle e analizzarle con spirito critico, ma questa è altra storia.

OpenStreetMap (OSM) è un progetto collaborativo finalizzato a creare mappe a contenuto libero del mondo. Il progetto punta ad una raccolta mondiale di dati geografici, con scopo principale la creazione di mappe e cartografie.

La caratteristica fondamentale dei dati geografici presenti in OSM è che possiedono una licenza libera, la Open Database License. È cioè possibile utilizzarli liberamente per qualsiasi scopo con il solo vincolo di citare la fonte e usare la stessa licenza per eventuali lavori derivati dai dati di OSM. Tutti possono contribuire arricchendo o correggendo i dati.

Le mappe sono create usando come riferimento i dati registrati da dispositivi GPS portatili, fotografie aeree ed altre fonti libere.

OpenStreetMap è stato ispirato da siti come Wikipedia: la pagina in cui la mappa è consultabile espone in evidenza un'etichetta "Modifica" per procedere con la modifica dei dati ed il progetto è accompagnato da un archivio storico delle modifiche (cronologia e log). Gli utenti registrati possono caricare nei database del progetto tracce GPS e modificare i dati vettoriali usando gli editor forniti.

Insomma una possibilità democratica per tutti di arricchire la conoscenza del nostro territorio.

Una parola sulle license, argomento da approfondire, magari in un altro articolo.

Il database di OpenStreetMap è pubblicato secondo la licenza Open Database License. La cartografia contenuta nelle tavole e la documentazione sono invece rese disponibili sotto licenza Creative Commons Attribuzione - Condividi allo stesso modo 2.0 (CC-BY-SA).

Tutti i dati inseriti dagli utenti, invece, devono essere caricati secondo una licenza compatibile con la Creative Commons Attribuzione-Condividi allo stesso modo. In questo modo possono essere inclusi anche dati nel pubblico dominio o sotto altre licenze compatibili. Tutti i contributori devono essere registrati al progetto ed accettare di sottoporre i propri dati con la licenza Creative Commons BY-SA 2.0 o specificare che la licenza con cui i loro dati sono forniti è compatibile con questa.

UMAP

UMAP è una piattaforma che fornisce una interfaccia grafica di semplice utilizzo per personalizzare mappe e geolocalizzare dataset appositamente creati o recuperati negli archivi Open Data. UMAP si basa su OpenStreetMap e rispecchia le specifiche raccontate nell'introduzione. Obiettivo di questo Tutorial è quello di mettere in condizioni chiunque di creare con pochi click una mappa personalizzata.

L'interesse è del tutto didattico. Ritengo UMAP uno strumento capace di sviluppare quelle che nella Scuola sono oggi definite competenze di cittadinanza, mettendo gli studenti in condizione di raccontare il loro territorio ricostruendone storie, tradizioni, raccontandone disagi ed esigenze, proponendo così il tema della cittadinanza attiva.

Valga come esempio il lavoro fatto dai miei ragazzi della IIID a.s. 2017/2018 (iniziato a dirla tutta lo scorso anno col la IIID precedente), lavoro arrivato tra i finalisti della Global Junior Challenge 2017, di Fondazione Mondo Digitale. I ragazzi stanno tutt'ora mappando le scritte sui muri della città dividendole per categorie. La mappa in basso è navigabile.

TUTORIAL

Veniamo al tutorial e scopriamo come creare una mappa. Il tutorial illustrerà tutte le funzionalità dell'interfaccia permettendo alla fine di creare un dataset e di collegarlo dinamicamente. Ma procediamo per gradi.

La home page di UMAP risponde all'indirizzo https://umap.openstreetmap.fr/it/, il sito è francese anche se ne esiste anche una versine italiana identica anche nelle funzionalità, http://umap.geonue.com/it/.

Conviene registrarsi per poter lavorare con calma. Le possibilità di accesso sono molte, con un account Twitter ad esempio, o con un account OpenStreetMap, come faccio io. In ogni caso la procedura è particolarmente semplice. Molti di questi account richiedono di essere maggiorenni. Nel mio caso, avendo studenti delle scuole medie, preferisco, per un fatto formale, farli lavorare col mio account.

Si può adesso accedere, come per ogni piattaforma, alla pagina personalizzata.

Siamo pronti per iniziare il nostro viaggio creando la nostra prima mappa.

Appena cliccato su crea mappa ci appare letteralmente il mondo. Generalmente con zoom più o meno centrato sul canale della manica. la mappa è navigabile con in tasti +/- presenti in alto a sinistra, ma meglio ancora con la rotella del mouse e con il drag and drop che ci permette di spostare la mappa tenendo premuto il tasto sinistro del mouse. Ma prima di fare tutto questo occorre dare un nome alla mappa e salvare.

Questo è un consiglio dettato dai mille errori fatti per imparare. Ad ogni più piccola modifica fatta lavorando direttamente sulla mappa conviene sempre SALVARE.

Appena cliccate per cambiare il nome farete conoscenza con l'interfaccia delle impostazioni, nella quale, per ora, inserite soltanto il nome della mappa e la sua descrizione. Nella foto, dopo uno zoom su Lecce, ho rinominato la mappa e ne ho scritto un breve descrizione. Appena fatto SALVATE.

Se doveste uscire adesso e riconnettervi anche dopo un solo minuto, scoprireste di trovarvi ancora sul Canale della Manica. Per carità, il posto merita davvero, ma se il vostro lavoro è in provincia di Lecce dovrete ogni volta impazzire con lo zoom.

Ecco perché la prima opzione che vi mostro serve a FISSARE LO ZOOM, in modo da ripartire sempre da una mappa centrata sulla zona di interesse. Certo una volta iniziata la navigazione, se ne sentite la nostalgia potrete sempre tornare al vostro Canale della Manica, sapendo tuttavia che, quando ricomincerete a lavorare, tutto ripartirà da Lecce (o da qualsiasi posto abbiate scelto).

Ovviamente se non SALVATE, sapete che tornerete al Canale della Manica.

Mi prema introdurre un argomento ora, argomento che sarà tuttavia approfondito successivamente, i LAYERS. Il concetto di livello è generalmente comune a tutti i programmi che hanno a che fare con la grafica, da Photoshop a Corel Draw, da AutoCad a ArchiCad ed in questo UMAP non fa eccezione.

I Layers, o Livelli che dir si voglia, sono come i lucidi delle vecchie lavagna luminose. Fogli trasparenti sovrapponibili su cui inserire ogni dato che si vuole. Sono visualizzati tutti contemporaneamente, ma possono essere SPENTI in qualsiasi momenti lasciando in visione soltanto quelli che interessano.

Pensate alla mappa sulle scritte sui muri. In ogni Layer c'è una tipologia di scritta che potete disabilitare in qualsiasi momento. Vedete le prossime foto e poi provate.

Nella Foto 10 il bottone (in alto a sinistra nella mappa) che vi dà l'accesso ai livelli che avete creato o che creerete ed in foto 11, invece, ne troverete l'elenco. Qui esiste un solo livello, quello preimpostato, ma già adesso vedete una specie di occhietto alla sinistra del nome "layer 1", cliccandolo spegnerete il layer.

Provate sulla mappa delle scritte sui muri che ho inserito all'inizio del tutorial e spegnete tutti i layer tranne quello delle "Scritte d'Amore", vedrete man mano sparire tutti gli altri tag sulla mappa.

MODIFICA ED IMPOSTAZIONI GENERALI DELLA MAPPA

Beh iniziamo a giocare. Cominciamo a vedere come dare le impostazioni alla mappa che verrà (no non è una canzone di Dalla). In alto a destra c'è una bella matita in evidenza ed è quella che aprirà la nostra mappa in modalità EDIT, ovvero rendendola pronta ad essere modificata.

Cominciamo, invece, dalla prima delle opzioni, ovvero l'importazione dei dati.

Come si vede nella foto 14, c'è la possibilità di importare i dati dall'esterno. Si può usare un URL per dare l'accesso diretto ad una banca dati in rete, ma forse è meglio aspettare il prossimo paragrafo per questo. Cliccando su "scegli file", tuttavia, si può scegliere di importare un dataset da remoto. Ha un senso qualora si tratti di dati statici, una dato statistico di un certo anno, piuttosto che la fotografia di un evento che sappiamo non cambi più. Ovviamente, qualora sia abbia a che fare con un dataset dinamico ed in continua evoluzione, sappiamo che questa è una scelta scomodissima, perché dovrebbe essere ripetuta ad ogni ulteriore modifica del file sorgente.

Nella foto 15, poi ci toccherà scegliere il formato del file supportato dalla mappa. Noi utilizzeremo un file CSV, uno dei file tipici degli OPEN DATA secondo la scala di Tim Berners Lee.

Nella foto 16, infine, potete scegliere su quale layer inerire i dati importati. Alla fine vi basterà cliccare IMPORTA ed il gioco è fatto.

Avete SALVATO? Male, molto male.

La prima opzione di modifica della mappa è quella che dà accesso all'interfaccia utente, ovvero a quello che vede l'utente generico che visiterà la vostra mappa. Nella foto 17 potete vedere come accedere alle opzioni, mentre nella foto 18 potrete scoprire tutte le possibilità che potete dare all'utente, dalla navigazione dei layer, allo zoom, dalla possibilità di condivisione, piuttosto che alla possibilità di ricerca interna. A voi tutto il divertimento di scopirle una per una.

Seconda opzione, la Default Shape. Potete vedere come si accede nella foto 19, mentre nella foto 20 troverete tutto l'elenco delle modifiche che potete fare.

Innanzitutto il colore (Foto 21), dove per colore si intende il colore degli oggetti che creerete. Attenzione che le modifiche fatte qui riguarderanno tutta la mappa. Se avete dieci layer, ad esempio, e modificate qui un colore ai tag, tutti i tag di tutti i layer prenderanno quel colore.

Potrete cambiare la forma dei Tag (Foto 22) da quella preimpostata a quella a goccia, da quella a pallina su bastoncino a quella a punto.

Infine (foto 23), potreste utilizzare una icona preimpostata con una segnaletica che è quella riconosciuta dalla comunità Open Data tra cui scuole, chiese, parcheggi, aeroporti e così via.

Tralasciando le "proprietà preimpostate" e le "Default Interactions Options" che invece vedremo quando modificheremo i layer, passiamo allo "Sfondo personalizzato" che può tornare utile quando occorre inserire una mappa che non ha un riferimento preciso, o meglio, una mappa storica in nostro possesso. Guardate e navigate sulla mappa che segue che nel frattempo vi racconto una storia.

Il problema è che, come vedete, non esiste una mappa. In particolare il vecchi centro abitato non è più riportato in nessuna delle mappe esistenti. Ecco allora che, da una vecchia fotografia, utilizzando uno spettacolare strumento, MAPWARPER, abbiamo generato una mappa tramite la sovrapposizione geografica della foto e la abbiamo esportata tramite indirizzo WMS (lo genera il sito in automatico). In questa maniera abbiamo ottenuto il nostro sfondo personalizzato su cui inserire manualmente tutti i tag che vedete.

Se mi chiedete la procedura, magari in un prossimo tutorial potrei mostrarvela. Tutto questo si fa come indicato nella foto 25.

GOOGLE SHEETS

Siamo alla fine, ma ora l'attenzione deve essere massima. Finora, infatti, abbiamo solo visto come settare le opzioni della mappa ed, in fondo, semplicemente che veste grafica dare al nostro risultato finale. Occorre lavorare un pò sui dati.

Useremo come generatore di file CSV un google sheets messo a disposizione dalla Suite Google Drive, uno strumento formalmente gratuito (lo è nel risultato anche se non è esattamente così). L'aspetto è quello del più comune Microsoft Excel, ma ha delle funzionalità che lo rendono uno strumento indispensabile. Andiamo a vedere.

Innanzitutto la condivisione. Un documento del Drive, di qualsiasi documento si tratti, è un documento che può essere condiviso e su cui è possibile lavorare anche contemporaneamente in più persone e da più computer diversi. Interessante anche l'idea di poter chattare in tempo reale sul canale messo a disposizione dalla suite. Tutto questo lo rende uno straordinario strumento didattico.

Detto questo occorre che noi creiamo un file che abbia tutti i campi che vogliamo. possiamo mettere tutto ciò che ci pare per poterlo poi richiamare direttamente dall'interfaccia di UMAP. nella foto 27, come esempio, il file del CSV delle "scritte sui muri", la mappa che vi ho mostrato all'inizio.

L'unica attenzione in questa fase deve essere quella di riservare gli ultimi due campi a LAT e LON, ovvero, come facile intendere, a Latitudine e Longitudine, i parametri di georeferenziazione che consentono ad UMAP di leggere ed individuare automaticamente la posizione in cui mettere i TAG. Se vi collegate sil sito di OpenStreetMap non dovreste avere difficoltà, una volta inserito un indirizzo, a recuperare i valori di Latitudine e Longitudine cercati. Potreste anche impostare una Query sul sito di OpenStreetMap, ma diventa complicato soprattutto per un tutorial come questo.

Nella foto 28 sono evidenziati tutti i fogli in cui raccogliamo le informazioni. Ognuno di questi fogli diventa per noi un layer da inserire in UMAP da personalizzare.

Come certo sapete ogni volta che lavorate sul Drive, non avete bisogno di salvare (cosa che invece dovete fare spessissimo in UMAP). E' possibile tuttavia pubblicare il lavoro sul web in varie forme in modo che diventi un vero e proprio sito (anche quello su cui state leggendo è fatto con un'APP di Google Drive).

Nelle foto 29 e 30 potete vedere come si accede alla pubblicazione e come sia possibile pubblicare l'intero documento come web page. Nel nostro caso tuttavia, preferiamo una pubblicazione parcellizzata, un foglio alla volta e pubblicati come foglio csv, per poterle inserire direttamente nei layer. Non resta che copiarvi il link sottostante. Nelle foto 31 e 32 si vede come.

Resta un ultimo dettaglio, i contenuti multimediali. come inserire le foto? E come inserire i video? Nel nostro file csv, come si vede nella foto 33, le foto sono inserite come link multimediale. Personalmente ho usato un sito di host image in cui entrare e postare le foto. Ogni volta che ne inseriamo una ci viene restituito un link da utilizzare. Le foto 34 e 35 sono esplicative di quanto detto.

Il consiglio è di creare un account anche qui, pur essendo il sito gratuito e accessibile ai suoi servizi anche in assenza di account, è un modo per organizzare e tenere sotto mano il materiale multimediale.

Per i video è possibile utilizzare il link Iframe di Youtube.

LAYERS

Siamo alla fine, non resta che un ultimo passaggio. Cominciamo però da come si creano i layer e da come si caratterizzano. Nelle foto 36 e 37 potete vedere dove cliccare per entrare nella modifica dei Layer. Nella foto esiste solo il layer 1, quello predefinito. Se cliccate sulla matitina indicate nelle foto 37 iniziate il percorso che vediamo inseguito di modifica. Non cambia se cliccate, ovviamente su "aggiungi layer" che vi consente di inserire un nuovo Layer.

Una volta entrati nell'interfaccia, che a meno di piccole modifiche è esattamente identica a quella generale dell'intera mappa che abbiamo in dettaglio analizzato in precedenza, potete immediatamente inserire il nome del layer e una dettagliata descrizione.

La descrizione apparirà quando si cliccherà in basso a sinistra sulle "informazioni" in calce alla mappa, informazioni che potranno essere visualizzate da tutti gli utenti, conviene perciò essere ampi (vedi foto 38 e 39).

C'è una possibilità di formattazione del testo la cui sintassi vi apparirà se cliccate sul punto interrogativo alla destra della parola "descrizione". Vedrete che sarà possibile scrivere in grassetto (mettendo la parola tra due coppie di asterischi), piuttosto che in corsivo, inserire spaziature e linee di separazione e tante altre possibilità che potrete divertirvi a scoprire da soli ricordandovi sempre di SALVARE ad ogni modifica.

Tralasciando le "shape properties" e le "proprietà avanzate" che sono le stesse viste precedentemente, con la sola differenza che ogni modifica si riferisce solo ed esclusivamente al layer in oggetto (potete così ad esempio differenziare i colori), andiamo a discutere delle "Interactions Options" dove formatteremo la visione dei contenuti.

Nella foto 40 il menu delle "Interaction Options" e nella foto 41 la prima delle opzioni, il "popup Style", ovvero come volete che appaiano i dati che avete inserito. Potete scegliere di lasciare nome e descrizione, oppure riferirsi alla tabella di riferimento del vostro dataset. personalmente quella che preferisco e che vi consiglio di usare è "pannello laterale" che apre un pannello laterale appunto in cui saranno inserite tutte le informazioni che riterrete utile inserire.

Nelle due mappe incorporate nel tutorial potete apprezzarne l'effetto.

Immaginiamo di aver già collegato il nostro file csv (vedremo come si fa tra un attimo). Come facciamo a dire al nostro Layer cosa leggere e cosa visualizzare?

Nel contenuto del popup dobbiamo inserire il testo così come volgiamo visualizzarlo, ma possiamo anche dirgli qualcosa di speciale. In foto 42 le regole di formattazione (le stesse che abbiamo visto precedentemente, ma possiamo aggiungere altro.

In foto 43, infatti, vediamo come abbiamo scritto ad esempio *Luogo:* {INDIRIZZO}. Il testo tra asterischi apparirà in corsivo così come scritto nel pannello laterale, mentre tra le parentesi quadre verrà visualizzato direttamente il contenuto della cella corrispondente a quella posizione geografica nella colonna indicata, INDIRIZZO in questo caso.

Vale per tutte le altre indicazioni, ovviamente. Interessante è il caso della foto in cui {FOTO} indica dove andare a prendere il link di riferimento per la foto caricata sull'host image, mente il numero 400 è la larghezza massima della foto così come apparirà nel pannello laterale (largo per l'appunto 400 pixel).

Sembra difficile, ma ci vuole, come per tutte le cose solo un pizzico di pratica e tanti tanti SALVATAGGI.

EASTER EGG

Come spesso si usa in Informatica aggiungo un piccolo dettaglio al tutorial che è virtualmente finito.

Avete la possibilità di modificare la mappa sullo sfondo, non solo mettendo una mappa personalizzata come vi ho raccontato, ma utilizzando formati di mappa diversi e magari più confacenti alle vostre esigenze.

Nell'EDIT generale della mappa, quello in cui modificate i parametri di tutta la mappa indipendentemente dai livelli, potete cliccare su "cambia i livelli di sfondo". Vi appariranno una serie di mappe tra cui scegliere, ognuna con delle caratteristiche ben definite. Nella foto 46 vi accorgete del loro numero dalla barra di scorrimento laterale.

Può esservi utile.