Categorie
WebGIS

Un biglietto di Natale a passo con i tempi

Merry Christmas Gistonickers, Gistipster & a tutti quelli che ampliano il loro #target con le #mappe ( le mappe di qualità sono il tuo #kpi ) #xmas2017🎄

Quest’anno col gruppo GIStonic tra le varie mappe & dati abbiamo analizzato gli archivi relativi al programmato del Trasporto Pubblico Locale sono scaricabili nel formato GTFS. E’ ancora presto per creare un’applicazione simile a Moovit, ma in questo biglietto i markers arancioni si muovono proprio sulle linee di trasporto (Bus, Metro, Tram …).

Un po’ è stato seguita l’idea del Plugin Time Manager di QGis ed in particolare il tutorial di Anita Graser e la spiegazione pratica di Massimiliano Moraca, ma poi la scelta è andata su LeafletJS e questo è l’ottimo risultato!

Mappa Video

Download video & GIF senza brand:

Riferimenti:

Categorie
tutorial

Modificare con QGis le geometrie di una mappa online con PostGIS e LeafletJS

Questa soluzione ci permette di aprire con QGis i dati cartografici pubblicati su una mappa web, pubblicata ad esempio con LeafletJS. Sto usando un sistema operativo Windows 10 e mediante il software PuTTY, creo un tunnel ssh alla porta 5432 di un server con PostGIS. La modifica dei dati quindi è possibile farla con il potente software QGis, che legge nativamente la connessione con un database Postgres; in questo i modo i dati, estratti direttamente dal database in formato GeoJson, vengono visualizzati subito sulla mappa web.

Categorie
FAQ Map tutorial

A che serve QGis senza questi file?

Accedi alla cartella con tutti i file

Perchè?

Ciao, da qualche mese ho dovuto mettere da parte la consulenza sui GIS a spot e, per far fronte a questa necessità, ormai diffusa, ho avviato un gruppo di WhatsApp e uno di Telegram in cui potrai trovare altre persone disposte a darti una mano e con cui scambiare idee; ti invito ad iscriverti subito!

Aggiungi il mio numero di telefono:

  • 348 7448152

oppure usa questi link:

Molti considerano Google+ un social network che non ha mai preso forma, ma questo solo se si guardano i numeri. Certo che se volete vedere un post o un video con 10k visualizzazioni è difficile, se si parla di Geographic Information System…

Ho iniziato l’anno scorso con una cerchia privata di professionisti ma, diverse altre persone erano interessate a vedere i contenuti. Così, ho così iniziato a pubblicare le slide e gli esercizi delle lezioni e l’interesse è cresciuto sempre di più.

Google+ è divertente, in termini tecnici, perché offre sempre strumenti nuovi, non solo social ma anche per lavorare, come Drive. In particolar modo, il collegamento diretto di questa pagina al canale di YouTube da uno slancio in più a questo social network rispetto ad altri.

Circa 250 contenuti tra video, slide ed esercizi e ogni settimana c’è sempre qualcosa di nuovo.

Se avete domande specifiche, scrivetemi pure una email a lima.cityplanner@gmail.com

Accedi alla cartella con tutti i file

Categorie
Idee e progetti

Welcome to Pokèmon MAP

La Pokemon Go mania si vede soprattutto nelle grandi città, proprio come a Milano. Quindi perché riprendere un discorso di cui tutti parlano?

Chi si trova di solito in questo blog, forse trova delle cose ovvie, ma provate a pensare a quando parlate di geolocalizzazione, dati geografici, mappe vettoriali … e di GIS: è difficile trovare delle persone per parlare di questi argomenti. Ma con Pokémon GO, tutto sembra diventare più semplice, eppure gli argomenti sono gli stessi.

Con questo articolo presento un progetto personale, che porto avanti col gruppo gistonic-milano dove l’intento è quello di giochare un po’ con i numeri.

I Pokémon appaiono, scompaiono nelle nostre città e questo può significare che esistono dei luoghi dove è più probabile che i Pokémon “rari” riappaiono. Ho creato una mappa, dove raccolgo dati sui “ritrovamenti” dove qualsiasi utente, con pochi click, può aggiungerne uno nuovo. Le funzioni alla base permettono di temporizzare la “scoperta” e mediante la seguente pagina ci si può localizzare col proprio dispositivo.

Vai alla Welcome PAGE

Welcome to Pokèmon MAP


Per chi vuole qualcosa di più

reddit.com/wip_pokemon_go_map_visualization…
PokemonGoMap/PokemonGo-Map su GitHUB
step-by-step instructions – article
onury/geolocator
Developer documentation

Pokemon Milano MAP

Categorie
WebGIS

LeafletJS: carica un file Geo JSON in modo diretto con jQuery e Ajax

Quando si crea una mappa online con la libreria LeafletJS, si usa il metodo getJSON() come se fosse una variabile e questo in diversi casi risulta scomodo, per i seguenti motivi:

  1. il file geoJSON che si carica, anche se la struttura è identica, non può essere caricato direttamente nei comuni software, come geometria, ad esempio in QGis;
  2. logicamente, bisogna fare qualche passaggio in più;
  3. il codice nell’insieme può risultare confuso, perché deve essere caricato come script secondario, apparentemente slegato dal file;
  4. il pre-caricamento, anche se non serve, può rallentare l’applicazione;
  5. sempre più spesso si trovano esempi, che fanno uso del metodo spiegato in questo articolo;

I thought about this for a minute. Why wasn’t I just passing my GeoJSON file directly into jQuery’s getJSON() method? I thought I had tried it and it hadn’t worked. But then I tried it. And it totally worked!
So let’s take a look at this code and compare it to the code I posted last month.
Passing JSON directly into getJSON method. By Lyzi.

[wc_row][wc_column size=”one-half” position=”first”]

Direct geojson in LeafletJS

[/wc_column][wc_column size=”one-half” position=”last”]

20151017_1_002

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-half” position=”first”]

[wc_button type=”primary” url=”https://youtu.be/e5XO5JD7lTw” title=”Visit Site” target=”self” position=”float”]Video[/wc_button]

[/wc_column][wc_column size=”one-half” position=”last”]

[wc_button type=”primary” url=”http://www.cityplanner.it/experiment_host/leafletjs_example/index_06/index.html” title=”Visit Site” target=”self” position=”float”]Mappa[/wc_button]

[/wc_column][/wc_row]

Riferimenti per caricare Json in LeafletJS

Archiviato in GitHUB e caricato in LeafletJS come RAW

github repository geojson comuni milano

Elenco completo lezioni LeafletJS

  1. il codice HTML e qualche stile
  2. HTML, CSS e Bootstrap
  3. qgis2leaf … e dopo?
  4. condividi la tua mappa (parte 1)
  5. condividi la tua mappa (parte 2)
  6. carica un file GeoJSON in modo diretto
Categorie
WebGIS

LeafletJS: condividi la tua mappa (parte2)

 

Questa mappa è un esercizio, il 5° che permette di condividere la nostra mappa sui social network.

[wc_row][wc_column size=”one-half” position=”first”]

LeafletJS 5 : share your map 2 (ITA)

[/wc_column][wc_column size=”one-half” position=”last”]

LeafletJS condividere la mappa

[/wc_column][/wc_row]
[wc_row][wc_column size=”one-half” position=”first”]

[wc_button type=”primary” url=”https://youtu.be/h45zs8-_m9M” title=”YouTube” target=”self” position=”float”]Guarda video[/wc_button]

[/wc_column][wc_column size=”one-half” position=”last”]

[wc_button type=”primary” url=”http://www.cityplanner.it/experiment_host/leafletjs_example/index_05/index.htm” title=”LeafletJS map” target=”self” position=”float”]Guarda mappa[/wc_button]

[/wc_column][/wc_row]
Nella lezione 4 abbiamo visto come creare una mappa e poi inserirla in un articolo di WordPress. Così facendo possiamo condividerla sui social network con una bella anteprima. Sarà possibile avere lo stesso risultato anche condividendo direttamente la mappa?

— EN
In Lesson 4 we saw how to create a map and then putting it in an article by WordPress . By doing so we can share it on social networks with a nice preview . You can have the same result even sharing directly map ?

Elenco completo lezioni LeafletJS

  1. il codice HTML e qualche stile
  2. HTML, CSS e Bootstrap
  3. qgis2leaf … e dopo?
  4. condividi la tua mappa (parte 1)
  5. condividi la tua mappa (parte 2)
  6. carica un file GeoJSON in modo diretto
Categorie
Idee e progetti

C’è chi va e c’è chi viene: matrice origine-destinazione

Nell’Aprile 2015, la Regione Lombardia ha pubblicato un nuovo dataset, intolato Matrice OD2014 che può essere scaricato dal Geoportale OpenData della Regione qui.

Questo dataset, contiene un numero di identità che si spostano da un comune A ad un comune B, diviso temporalemnte ed in base al mezzo utilizzato.

Matrice regionale Origine Destinazione degli spostamenti distinti per origine, destinazione, fascia oraria, motivo e modo prevalente dello spostamento.

Matrice OD2014


Come si evince fin dalla favicon del portale, la Regione ha scelto la piattaforma Socrata che ha sua volta è un portale dove vengono archiviati i dati ed in particolar modo gli opendata. Molte città nel mondo utilizzano questo portale e si nota subito la qualità.

Socrata mette a disposizione una piattaforma di sviluppo da cui si possono estrarre i dati, senza doverli archiviare sul proprio server, mediante le cosidette API. Il modello di richiesta è abbastanza semplice, si tratta di un indirizzo url, che se richiamato nel browser, restituisce i dati in formato JSON:

https://data.ct.gov/resource/hma6-9xbg.json?category=Fruit&item=Peaches

Così ho iniziato ad ispezionare la struttura del dato e ho iniziato a fare qualche query sulla MatriceOD, con dei codici jQuery. Ho unito i risultati su una mappa LeafletJS e lavorato un po’ sullo stile: il risultato lo vedete nell’immagine in copertina.

Questo sistema, di visualizzazione, che partiva con un filtro “destinazione:milano” è già pronte ad ospitare la funzione che cliccando su una origine, facesse diventare questa la destinazione, rigenerando il grafico.

Aver organizzato bene le query fin dall’inizio, semplicemente aggiungendo la funzione all’evento click, il grafico si rigenera, con una velocità decisamente buona.

matriceOD Legnano-Busto Arsizio
matriceOD Monza- Brugherio
matriceOD Cinisello Balsamo - Milano

Infine ho inserito una tabella per la consultazione dei dati grezzi. Ho utilizzato la libreria DataTables che permette di visualizzare i dati in modo “tabella” come semplice input, lasciando alla libreria la creazione degli stili, dei filtri, l’ordinamento e il paging.

MatriceOD DataTables jQuery


Ho inserito il tutto nel mio nuovo sistema WebGIS v.0.1 e funziona perfettamente.

Provalo subito

  • SOCRATA: http://dev.socrata.com/foundry/#/www.dati.lombardia.it/wbii-r5a6
  • 10 Tips for Optimizing MySQL Queries: http://20bits.com/article/10-tips-for-optimizing-mysql-queries-that-dont-suck
Categorie
Idee e progetti

Grafo origine destinazione dinamico

La mappa utilizza i dati della Matrice OD2014 (link ai dati) e come sfondo un TileLayer di MapBox. La libreria per la generazione della mappa è LeafletJS e i dati sono caricati col metodo $.getJSON. La particolarità di questa mappa è relativa all’evento sul click delle destinazioni, a cui è associata una funzione che richiama il file JSON, che viene filtrato in base all’identificativo associato al cerchio rosso cliccato. La mappa di esempio funziona sono per i nodi Legnano e Milano (da provare) mentre ogni altro cerchio rosso a cui non è associato nessun valore, restituisce una mappa vuota.

The map: cityplanner.biz/webapp/grafo_od2014

Categorie
Lezioni WebGIS

WEBMAP: struttura sorgente pagina

Sono arrivato a creare il 16° ebook e ho l’obiettivo di arrivare a 99, per creare la mia raccolta condivisa, di risorse sui GIS open source, per la pianificazione territoriale.

Per accedere a questa collezione, nella seguente pagina ho raccolto le informazioni necessarie per conoscere i canali di comunicazione che utilizzo http://goo.gl/C3ewyD.

WEBMAP struttura della sorgente pagina

[wc_button type=”primary” url=”http://www.slideshare.net/pjhooker/webmap-struttura-della-sorgente-pagina” title=”WEBMAP: struttura sorgente pagina” target=”self” position=”float”]Visualizza slide[/wc_button]

Diverse discussioni nei vari forum, riportano quesiti, che sicuramente derivano da metodologie acquisite sui software detti desktop, dove bisogna adattarsi ai molti “bottoni” disponibili e alle interfacce complesse, che solitamente non sono molte. Prima di tutti i software CAD, dove si rimane la maggior parte del tempo sull’area di disegno (o area di lavoro) e poi si passa al layout per la stampa e la rifinitura della tavola. Nei GIS, troviamo invece qualche schermata in più, prima di tutti la visualizzazione della tabella (o attributi), ma anche le schermate guidate per fare operazioni di geoprocessing o analisi di altro tipo.

L’evoluzione naturale, che ha portato allo sviluppo dei webgis, continua a mantenere questa logica, dove c’è una mappa centrale, una toolbar con vari strumenti e delle sidebar con legenda e informazioni varie.

GeoMoose - WebGIS

Questi sistemi molto validi, permettono la visualizzazione e la gestione dei geodata, senza installare alcun software, ma semplicemente avendo la connessione ad internet e di solito le credenziali di accesso.

Lo scopo di questa presentazione teorica, è quella di guardare questi webgis, o mappe online, con una logica più semplice, adatta soprattutto a visualizzazione veloci delle informazioni e adatte ad un pubblico più ampio, che non necessariamente sappia usare un software GIS. Questo però non esclude l’utilizzo ai tecnici, che possono comunque trovare beneficio da questi strumenti “semplificati” perché la navigazione per la ricerca delle informazioni, diventa naturale, essendo più simile ad un blog che ad un gis.

Questo documento presenta una novità visto che la diffusione del linguaggio HTML5, risale a pochi anni fa e lo sviluppo di queste mappe è proprio legato al suo successo.

Vi anticipo queste righe:

Ogni elemento disponibile nel linguaggio HTML5, può essere manipolato attraverso i CSS. Ogni elemento può avere proprietà specifiche, ma per comodità si crea una struttura logica a cui associare dei riferimenti di stile: tutti gli H1, tutte le immagine, lo sfondo della prima pagina, il bordo delle miniature … Una mappa, racchiusa in un contenitore è un insieme di elementi HTML5, gestibili come una normale pagina web continua sulle slide >>

Categorie
Map tutorial

Caccia al tesoro?

Una tecnica di dataviz georeferenziata su una mappa per cercare il tesoro dei dati nascosti! Un po’ di analisi spaziale, un pizzico di javascript e php per rappresentare gli hashtag più diffusi nei vari quartieri di Milano, magari per cercare qualcosa di interessante fuori da Expo2015.

Caccia al tesoro dei geodata

Per capire cosa piace a Milano, cosa succede e quali sono le tendenze, forse è scontanto, ma i social network offrono una finestra a tema veramente unica.

Guardare la città dall’alto può dare un senso di dispersione, troppe cose da vedere, così le mappe tematiche, che ci insegnavano al corso di Pianificazione territoriale PTUA, prendevano un senso, e ci dicevano ciò di cui avevamo bisogno.

Anche se con pennarelli o con post-it le carte su cui pensavamo per ore erano una vera attrazione. Dagli archivi cartografici, ai cd della Regione e ai Geoportali, l’idea di scoprire qualsiasi cosa era sempre a portata di mano, ma così difficile da raggiungere.

Dai libri di urbanistica da Astengo ai masterplan delle città nordiche, le tecniche di rappresentazione erano veramente infinite e adesso non so neanche più come classificarle. Quando parlo di DataVIZ su Mappe devo essere sincero: scopro sempre qualcosa di nuovo …

[wc_row][wc_column size=”one-fourth” position=”first”]

[wc_image attachment_id=”4031″ size=”” title=”” alt=”” caption=”” link_to=”post” url=”http://www.cityplanner.it/?attachment_id=4027″ align=”none” flag=”Pin” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-fourth”]

[wc_image attachment_id=”4030″ size=”” title=”” alt=”” caption=”” link_to=”post” url=”http://www.cityplanner.it/?attachment_id=4026″ align=”none” flag=”Random” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-fourth”]

[wc_image attachment_id=”4029″ size=”” title=”” alt=”” caption=”” link_to=”post” url=”http://www.cityplanner.it/?attachment_id=4025″ align=”none” flag=”Map” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-fourth” position=”last”]

[wc_image attachment_id=”4028″ size=”” title=”” alt=”” caption=”” link_to=”post” url=”http://www.cityplanner.it/?attachment_id=4024″ align=”none” flag=”Style” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][/wc_row]