Categories
Idee e progetti

Geodata visualization con QGIS

Ciao, ieri sera ho creato questo video, su come utilizzare QGIS per rappresentare ed elaborare un tematismo puntuale.

Categories
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:

Categories
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. Questa pagina su Google+ è il riferimento principale e il più comodo dove potrete trovare tutto il materiale.

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

Accedi alla cartella con tutti i file

Categories
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

Categories
WebGIS

LeafletJS: qgis2leaf … e dopo?

Abbiamo visto l’HTML da 0; gli abbiamo aggiunto un stile Bootstrap; … e adesso, cosa possiamo fare con l’output di qgis2leaf?

Link mappa esercizio 3: leafletjs_example/index_03

  • 0:37 carica i dati dei comuni d’Italia ISTAT in QGis
  • 1:06 crea query dei comuni della provincia di Milano
  • 1:58 verifica proiezione EPSG 3857
  • 3:24 utilizzo del plugin qgis2leaf con impostazioni
  • 5:33 come è composta la cartella di outpu di qgis2leaf
  • 6:57 prime modifiche file css mappa leafletJS
  • 8:25 carica cartella output su hosting
  • 10:12 start editing index.html < head >
  • 11:09 var title = new L.Control()
  • 12:37 identazioni per migliorare la visione del codice
  • 19:00 control layer collapsed
  • 19:50 come gestire il codice HTML nel control title
  • 23:34 popup, tabella e milgiorare la scrittura dell’HTML quando si usa il JavaScript
  • 26:49 selezionare le informazioni che servono nel popup
  • 29:38 gestire i colori dei poligoni (trasparenza, colore, bordo e riempimento)
  • 31:44 creare una funzione per gestire dinamicamente i colori dei poligoni getColor
  • 37:40 con la stessa funzione, creare un tematismo con valore graduato in base alla superficie
  • 40:48 creare un controllo legenda (integrare gli oggetti di altre mappe senza fare tutto da capo)
  • 44:50 creare un rettangolo colorato per la legenda

[wc_button type=”primary” url=”https://youtu.be/pMwlMIwAwaw” title=”Guarda Video” target=”self” position=”float”]Guarda Video 3[/wc_button]

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
Categories
QGis tutorial

QGIS: strumenti di geoprocessing (03)

Ecco QGis, spiegato passo per passo. Venerdì il terzo appuntamento su questo magnifico software che, ormai, ha superato il suo concorrente ArcGIS!

Indice QGIS base GEOPROCESSING

  • 32:10 – categorie, colori e sfondo OpenStreetMap
  • 33:50 – plugin fTools: ricerca, analisi e geoprocessing
  • 34:00 – selezione per posizione
  • 37:53 – buffer
  • 41:13 – buffer con distanza da attributi
  • 44:54 – geoprocessing: dissolve
  • 50:58 – geoprocessing: union
  • 56:06 – geoprocessing: intersect
  • 58:01 – creazione centroidi ed etichette

File esercizio: https://goo.gl/iQnkdZ

[wc_button type=”primary” url=”https://youtu.be/GE1VOcOxl1E” title=”Guarda video” target=”self” position=”float”]Video tutorial Qgis ITA[/wc_button]

Categories
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
Categories
WebGIS

Come scegliere le icone per le mappe web (e non solo)

Google Maps o forse Google Earth hanno diffuso l’uso delle mappe online, introducendo un particolare oggetto di web design, che ora è così tanto diffuso: il PIN.

Infatti i GIS hanno sempre trattato gli elementi puntuali come segni “puntuali”, ma la localizzazione, ad esempio delle attività commerciali, per cui sono famose le mappe di Google, non potevano essere semplicemente disegnate con simboli geometrici base.

I punti su una mappa quando sono diventati POI (point of interest) hanno preso forma e sono diventati dei Pin.

GIS point simple

Google maps pin basic

Una prima alternativa famosa, che usa proprio un Pin per differenziarsi è uscita con OpenLayers 2 dove propone come default un Pin più squadrato, magari non bello come quello di Google, ma è sicuramente stato un ottimo segno distintivo.

openlayers 2 pin basic

Map icons collection

Non è mia intenzione fare la storia dei Pin, ma sicuramente a questo punto è necessario citare, vista la sua diffusione per qualche anno, la Map Icon Collection, che ha permesso di rendere le nostre mappe leggibili, anche senza contenuti testuali, visto che per ogni “punto di interesse” era (attualmente è ancora una collezione in aggiornamento) previsto un simbolo, su sfondo con colore personabilizzabile.

Map icons collection

Oggi siamo forse siamo un po’ stufi di queste icone, dove l’idea è buona, ma ad esempio non si può cambiare la forma del Pin.

Le migliori icone per le mappe web oggi

Da segnalare, ci sono attualmente due fonti dove si possono trovare icone per le nostre mappe:

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

The Noun project ICON

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

MAKI icons

[/wc_column][/wc_row]

In entrambi i le icone sono scaricabili in formato SVG e possono essere quindi colorate a piacimento ed è possibile anche fare dei mashup; si possono anche modificare, ma biosogna cavarsela bene con i software di grafica vettoriale, tra cui cito il potentissimo Inkscape open source. Una nota è da considerare per le icone di The Noun project, perchè sono fatte da molti utenti e ogni icona ha una relativa licenza d’uso Creative commons da rispettare.

Ulteriori fonti di icone per mappe

Web mapping

Una volta che abbiamo scelto il set di icone giuste, come si inseriscono nella nostra mappa?

In QGis, ma anche negli altri GIS, si possono inserire le icone personalizzate in modo abbastanza semplice, infatti nelle impostazioni sono definite le path (cartelle sul disco del proprio PC) dove andare a pescare le icone.

Ma per il web mapping è un po’ diverso: sorvolando lo standard SLD usato da Geoserver per creare gli stili, le librerie Javascript per mappe, come LeafletJS, OpenLayers3, MapBox e Google Maps, specificano nella loro documentazione esattamente come fare.

Ad esempio in LeafletJS è necessario definirla, ad esempio, nel modo seguente:

L.icon({ iconUrl: 'leaf-green.png'})

come la documentazione di sviluppo indica, con tutta una serie di variabili, tra cui l’ombra e la dimensione.

Ma ovviamente il mondo del web open source è pieno di sorprese, quindi possiamo trovare sviluppatori come lvoogdt che creano dei plug-in per fare degli awesome-markers.

Buon divertimento!

Leaflet.awesome-markers plugin v2.0

 

Categories
WebGIS

LeafletJS: condividi la tua mappa

Questa mappa dei comuni della Provincia di Milano è un esercizio, il 4° che permette di comprendere il codice HTML e JS per includere le mappe nel nostro BLOG.

STEP: share your map

  • 0:52 – integrare la mappa creata nell’esercizio 3 in un blog (vedi anche questo articolo meglio una mappa o una immagine)
  • 6:17 – miglioriamo l’integrazione con iframe della mappa nel blog
  • 9:12 – trasformare una mappa con altezza e larghezza definita in una full screen, non è necessario ricreare da zero la mappa con qgis2leaf
  • 19:30 – verificare come quali informazioni vengono messe nell’anteprima dopo la condivisione (tool di verifica developers.facebook.com/debug)
  • 23:35 – aggiungere informazioni per l’anteprima condivisa prendendo ad esempio ciò che genera SEO by Yoast

[wc_button type=”primary” url=”https://youtu.be/axKNei4qE4I” title=”Vai a YouTube” target=”self” position=”float”]Guarda video tutorial[/wc_button]

Qui di seguito l’integrazione della mappa della provincia di Milano

Vedi mappa FULLSCREEN

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
Categories
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.

[wc_button type=”primary” url=”http://www.cityplanner.it/map/webgis/grafo-od2014/” title=”Guarda mappa” target=”self” position=”float”]Provalo subito[/wc_button]

  • 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