Palermo 3D Maps WRLD

Qualche giorno fa Ciro Spataro, che è sempre alla ricerca di notizie interessanti, mi consiglia di leggere un post su Medium. E’ un post del Team WRLD, Build a Dynamic Map of London.

Nel post si parla di una mappa dinamica 3D, più leggo e più la cosa mi intriga, grazie Ciro!

Voglio capirne di più!

Per prima cosa mi chiedo chi e cosa sia WRLD scoperto che:

è una piattaforma dinamica di mappatura 3D per edifici intelligenti, città, giochi, e esperienze virtuali, crea fornisce un ambiente 3D completamente testurizzato che utilizza un sistema di coordinate globali in modo reale, quindi è pronto per essere utilizzato immediatamente – non è necessario creare un ambiente 3D o importare dati aggiuntivi di GIS. Crea stili personalizzati e utilizza lo strumento Unity per selezionare i livelli di dati desiderati – strade, edifici, alberi, etichette, ecc, tutto questo per una varietà di sistemi operativi / dispositivi come iOS, Android, OSX, OculusVR e WebGL.

Proseguendo la ricerca trovo questo post Building Gorgeous 3D Maps with eegeo.js and Leaflet.

Leaflet è la principale libreria JavaScript open-source per mappe interattive mobile, e che utilizzo quasi sempre per realizzare le nostre mappe, ma cos’è eegeo.js?

eegeo.js  è libreria JavaScript open-source, per creare l’interfaccia di 3D web mapping;

Quindi con eegeo.js, Leaflet e OpenstrettMap possiamo realizzare mappe 3D open-source, Ottimo! non mi resta che provare.
Seguendo la guida del post Building Gorgeous 3D Maps with eegeo.js and Leaflet, costruire una mappa base è molto semplice.

Di cosa abbiamo bisogno?

Leaflet (documentazione, esempi)

eeGeo.js (documentazione, esempi)

free eeGeo API key, per ottenere le api key basta registrarsi gratuitamente al sito WRLD

Server o spazio web online dove caricare il file HTML, CSS e JavaScript (in locale la mappa non funziona).

A seguire il codice html per realizzare una semplice mappa 3d, basta sostituire le coordinate su cui centrare la mappa ed inserire  le proprie api key

Per migliorare la mappa si  possono inserire molte funzioni, descritte qui.

Per migliorare la mappa si  possono inserire molte funzioni che troviamo spiegate qui.
Ad esempio possiamo aggiungere una funzione per Spostare la fotocamera  (Moving the camera) o per  Regolazione della direzione e dell’inclinazione (Adjusting heading and tilt) possiamo aggiungere subito dopo “ zoom: 16   }); ” del codice precedente
questa nuova funzione;

Tutto molto semplice!

Volendo si può anche far cambiare il tempo meteorologico o cambiare l’ora del giorno.

Visto che parte del codice è basato sulla libreria  Leaflet, ho inserito qualche plugin di leaflet che normalmente uso per realizzare le mappe.

In questo caso ho inserito solamente:

Sidebar-v2, per creare una sidebar a scomparsa;

Leaflet-hash, per generare URL che contengono livello di zoom e posizione corrente;

Leaflet.MousePosition, è un semplice controllo della posizione del mouse. Esso mostra le coordinate geografiche del puntatore del mouse, mentre viene spostato sulla mappa;

Leaflet.zoomhome, che aggiunge un pulsante Home al controllo zoom per ripristinare la visualizzazione;

Ecco la nostra mappa con tema standard!

Palermo 3D Maps WRLDMappa fullscreen

Ecco i comandi per facilitare la navigazione della mappa

Usage Mouse

Left button + Move:    Pan

Middle button (Scroll whell)+ click: Orbit

Scroll whell: Zoom

Right button + Move: Rotate

Registrandosi al sito si ha possibilità di accedere al pannello Developer, da dove è possibile accedere a SDK e API per lo sviluppo di mappe 3D in una vasta gamma di piattaforme popolari.

Si può usare lo strumento Map Designer per creare mappe personalizzate, e scegliere un tema di base diverso da quello proposto di default.

strumento Map Designer Mappa con tema minimal Tema Minimal Mappa fullcrenn con tema minimal

Tema CardboardTema CardboardMappa fullcrenn con tema cardboard

Si può aggiungere un ulteriore menu di ricerca personalizzatoLe mappe realizzate con Map Designer  possono essere facilmente inserite nei propri sito/blog grazie alla possibilità di poter incorporare il codice.

Per personalizzare maggiormente le mappe non basta il semplice account free ma si deve attivare un account  a pagamento.

È una piattaforma davvero molto interessante e da approfondire, mi riprometto di fare ulteriori test, magari inserendo in mappa gli opendata sui dati del trasporto pubblico locale di Palermo.

Grazie Ciro per avermi consigliato la lettura del post.

Tutorial da file pdf a shapefile

Dopo il comunicato stampa sul sito del Comune di Palermo   Tram – Entra nel vivo la fase di progettazione per le nuove linee verso ZEN-Mondello, Bonagia e lungo la costa con Ciro Spataro abbiamo pensato di fare una delle nostre mappe…ovvero la mappa del ferro come l’ha chiamata Ciro.

Per realizzare la mappa c’è quasi tutto, occorrono solo le nuove linee del tram in formato vettoriale.

Gran parte dei vettori, (linee tram esistenti, passante ferroviario, etc etc) sono reperibili su OpenStreetMap, facili da estrarre con overpass-turbo.eu, qui un articolo molto utile su geomappando  o un interessante video di GISTIPSTER.

In alternativa si può scaricare l’intera cartografia di Palermo, o qualsiasi altra città, da Estratti OpenStreetMap,

Per ricavare i vettoriali delle nuove linee del tram abbiamo pensato di usare il file pdf allegato al comunicato stampa Tavola 14 – planimetria riassuntiva scala 25.000 dell’intero sistema di trasporti su rotaia.

La stessa e tutte le altre tavole del progetto si trovano sul sito del Comune di Palermo, (qui l’intero progetto in file pdf del trasporto pubblico di massa)

Screenshot del file pdf Tavola 14 – planimetria riassuntiva scala 25.000

L’idea è semplice…

  1. Convertire il file pdf in dxf
  2. Georeferenziare il nuovo file ottenuto con Qgis
  3. Verificare il risultato della georeferenziazione e correggere manualmente eventuali imperfezioni.
  4. Esportare i nuovi file in versione geojson per umap

Conversione da PDF in DXF

Per la conversione da pdf a dwg/dxf in rete si trovano tanti programmi, open source e non.

Dopo qualche ricerca e qualche test, abbiamo scelto di usare progeCAD 2017 Professional in versione di prova gratuita completa per 30 giorni. Gli stessi risultati si possono ottenere con DraftSight o con il più semplice PDF to DWG Converter.

Qui trovate un breve video che spiega come caricare un file pdf in progeCAD

Qui un video che spiega come caricare un file pdf in DraftSigh

Seguendo il video dimostrativo di progeCAD 2017 Professional si intuisce facilmente come caricare un file pdf

Dopo qualche minuto di elaborazione il pdf è stato convertito in dwg.

L’importazione è riuscita, adesso non resta che pulire il file e lasciare solo quello che ci interessa.
Come si può notare dalle immagini ad ogni colore presente nel file pdf corrisponde un layer nel dwg.

A questo punto disattiviamo/eliminiamo tutto ciò che non ci interessa e facciamo un po di ordine.

Rinominiamo i layer, così li riconosciamo subito.

Con il comando elimina, presente nel menù File → Utilità → Elimina

Eliminiamo tutto il superfluo, questa utility, ci consente di tenere il file sempre pulito e leggero.

Una volta ripulito il file, è necessario posizionare le linee sulle coordinate di Palermo, in modo da non complicarci troppo il lavoro con Qgis.

Per far ciò, abbiamo inserito come riferimento esterno, un file georeferenziato e convertito in dxf della base cartografica scaricata da OpenStreetMap.

Dal menù Inserisci → riferimenti esterni, carichiamo una parte della cartografia OSM, (dallo screenshot si nota poco, ma è quel puntino all’interno del cerchio rosso)

Come si può notare le linee importate dal file pdf, sono fuori scala e posizionate a caso.

Utilizzando il comando Allinea e con un po di pazienza riusciamo, traslare le nuove linee del tram sulle coordinate di Palermo.

Adesso le linee, grossolanamente, sono sulle coordinate di Palermo, affineremo la georeferenziazione con Qgis.

Per ottenere un buon risultato finale, è opportuno georeferenziare separatamente le 4 linee che ci interessano.

Di conseguenza salviamo/esportiamo ogni linee in un nuovo file dfx.

Ecco un file dwg con la singola tratta c – d, grossolanamente posizionato sulle coordinate di Palermo.

La georeferenziazione

Per questa seconda fase è necessario un software gis, nel nostro esempio usiamo Qgis e il plugin Plugin Vector Bender spiegato in questo video da Salvatore Fiandaca

Per prima cosa importiamo il file dxf in qgis, per farlo abbiamo diversi metodi, usare i plugin  dxf2shp o dxf import/convert, o nel caso di file dfx con molte più informazioni si può usare Spatialite, tutto spiegato sempre da Salvatore Fiandaca nel suo blog pigrecoinfinito

Dove aver caricato il file dxf, salviamo lo stesso in formato shp, perchè sul formato dfx non possiamo fare modifiche.

Attiviamo il plugin Vector Bender ed iniziamo ad inserire punti per la georeferenziazione.

Questo è il risultato di un primo test, più punti inseriamo e più precisi siamo, migliore sarà il risultato finale.

…e dopo qualche  tentativo e dopo alcune correzioni manuali la linea “sembra” essere al suo posto. Salviamo il lavoro appena fatto in un nuovo file shp.

Sicuramente non è precisa come l’originale, ma rende l’idea.

Per completare il lavoro, basta ripetere la stessa procedura per le altre 3 linee rimanenti

Qualcuno si starà chiedendo… Ma non era più semplice ridisegnare le linee…?
Forse si, ma il tempo e la pazienza non mi mancano e soprattutto mi piace sperimentare, magari si può usare questo metodo con file pdf molto più complessi, ed in quel caso si risparmia un bel po di tempo…

Osservare il cambiamento di una città grazie alla cartografia: il caso di Palermo

Dopo aver letto l’articolo di @napo mappa di Trento 1915 – da un libro di Cesare Battisti, ne sono rimasto affascinato, sia per il gran lavoro fatto dalla biblioteca comunale di Trento, nel digitalizzare il contenuto del libro e renderlo di dominio pubblico e sia per la parte tecnica e dall’analisi, che si può fare agevolmente, mettendo a confronto una carta storica ed una di oggi.

Brevemente, con il plugin leaflet-tileoverlay-mask, si ottiene un effetto “spot” sulle cartografie, che ci permette di mettere a confronto, dinamicamente e istantaneamente, una carta storica con lo stato attuale.

La realizzazione tecnica, è più semplice di quello che si pensa

Subito ho pensato come poter usare questa tecnica sulle cartografie storiche e non di Palermo.

Il primo test l’ho fatto, con la cartografia del nuovo schema di massima del PRG di Palermo presentato dal Comune nel 2015 e georeferenziata da @cirospat, con mapwarper.net 

constatando, in prima persona, la bontà del lavoro fatto da @napo.

In questo caso ho semplicemente sostituito la base cartografica “L.tileLayer.mask” di riferimento, nel file di esempio fornito con plugin leaflet-tileoverlay-mask”.

Inserendo la nuova mappa tiles e centrando la mappa sulle coordinate di Palermo, il lavoro è fatto.

Nuova base tiles

var prg = L.tileLayer.mask(‘http://mapwarper.net/maps/tile/19437/{z}/{x}/{y}.png

Zoom e coordinate di base

var map = L.map(‘map’, {attributionControl:true}).setView([38.11127,13.3534422], 14);

Usando la versione originale del plugin leaflet-tileoverlay-mask, ho notato un limite, ovvero, l’impossibilità di utilizzare più basi cartografiche, per fare l’analisi.

Con il contributo fondamentale di @piersoft, sono riuscito a superare l’ostacolo.

Dopo questo piccolo test, mi sono chiesto, come poter sfruttare al meglio la tecnica.

Confrontandomi con @aborruso e @cirospat, del gruppo di opendatasicilia, sull’uso della tileoverlay-mask e conoscendo il Portale Cartografico, realizzato dalla Sispi spa (società in house del comune di Palermo), subito abbiamo pensato di utilizzarla, con le cartografie storiche. Rese disponibili dall’ottimo lavoro di scansione e georeferenziazione del geom. Liborio Plazza, dipendente del Comune di Palermo e  dalla Sispi.

L’obiettivo era chiaro, costruire un atlante, dove poter mettere a confronto, velocemente, le carte storiche con la città dei nostri giorni.

Scaricate e georeferenziate le cartografie storiche, da @aborruso e @cirospat, a me, non è rimasto altro da fare, che organizzare il materiale e dargli una veste grafica user friendly.

Spero di esserci riuscito!

L’URL è questo http://siciliahub.github.io/mappe/atlante_carto_pa/index.html

Gli strumenti che abbiamo utilizzato per il il progetto dell’atlante sono:

  1. Dati da un server WMS: scaricarli, riproiettarli, comprimerli, tassellarli e piramidarli da riga di comando, di @aborruso;
  2. Leaflet, per creare l’interfaccia di web mapping;
  3. Leaflet-hash, per generare URL che contengono livello di zoom e posizione corrente;
  4. Leaflet-tileoverlay-mask, per la sovrapposizione delle tile con effetto svg maschera, un effetto “spot“ che ci permette di vedere come era la città al tempo in un particolare punto;
  5. Sidebar-v2, per creare sidebar a scomparsa;
  6. Leaflet.MousePosition, è un semplice controllo della posizione del mouse. Esso mostra le coordinate geografiche del puntatore del mouse, mentre viene spostato sulla mappa;
  7. Leaflet-graphicscale, è un semplice barra di scala con effetto animato al cambio dello zoom;
  8. Map Warper, è uno strumento open source per georeferenziare immagini, nato grazie al contributo del progetto spacetime della Biblioteca Comunale di New York, sviluppato, ospitato e mantenuto da Tim Waters;
  9. Btns, è un piccolo modulo CSS che permette di inserire pulsanti reattivi.
  10. Leaflet.Basemaps, consente di creare un controllo dell’interfaccia utente per la scelta della mappa di base utilizzato sulla mappa.

Il codice script usato per il progetto è liberamente scaricabile dalla pagine html dell’atlante. Basta sostituire i relativi L.tileLayer.mask e il setView([38.11127,13.3534422] per adattarla alle proprie esigenze.

Gli sfondi della mappa sulla quale visualizzare le cartografie storiche sono vari Openstreetmap, Google Road e Satellite, Esri Standard e Satellite.

Alcuni esempi

Il bello di questa mappa è scoprire come questa città sia cambiata e ognuno troverà degli esempi diversi nei luoghi che conosce meglio.

Villa Trabia

La via Piersanti Mattarella, già “Via Villa Trabia” si estendeva da via Notarbartolo a poco dopo l’ingresso del CEI (l’istituto Gonzaga).

Un “fiume” limitrofo a Villa Sperlinga

Il “Passo di Rigano” che costeggia Villa Sperlinga è un colpo d’occhio.

Il mare era “più vicino”

Era subito dopo Porta Felice e probabilmente se ne sentiva molto più forte la presenza.

……. e ora scopri anche tu i cambiamenti nel tuo quartiere, …..buon viaggio nella storia cartografica della città di Palermo