1 of 15

David Leoni

Coder Dojo Trento

Open Street Map Servizi di Rovereto

v2.1 18/07/2018

2 of 15

UMAP with OpenStreetMap!

3 of 15

Prendiamo i dati

I dati li abbiamo trovati su dati.trentino.it, alla risorsa dei Servizi di Rovereto:

4 of 15

Cos’è un JSON?

Il contenuto del file è un JSON:

Per georeferenziare in UMap servono campi chiamati esattamente lat e lon

5 of 15

JSON vs CSV

Problema: UMAP non accetta JSON (a meno che non siano in formato GeoJSON, ma al momento non ci interessa).

Ma se avessimo un CSV...

6 of 15

Da JSON a CSV

Convertiamo il JSON in CSV con http://konklone.io/json/

In seguito possiamo cliccare Show the raw data e copiare

7 of 15

Importiamo in UMap 1/3

Creiamo una mappa nuova

8 of 15

Importiamo in UMap

2/3

  • Incolliamo qua i dati
  • Specifichiamo il formato CSV

Seleziona la freccia su

Importiamo

9 of 15

Importiamo in UMap 3/3

Tabella nei pop up

Quando si clicca sulle icone vogliamo che appaiano tutti i dati

  • Scegli Default Interaction options
  • Da Popup style

Scegli ‘tabella’

Seleziona l’ingranaggio

10 of 15

Problemi...

Se si vede un segno di vietato sulle icone o se non appaiono le tabelle...

...cliccare in alto a destra Disattiva la modifica.

11 of 15

Mostrare solo i campi che vogliamo noi 1/2

12 of 15

Mostrare solo i campi che vogliamo noi 2/2

  • Scegli Default Interaction options
  • Da Popup style

Scegli ‘nome e descrizione’

  • Da Template del contenuto del popup inserisci nomi di colonna del CSV tra graffe:

# {nome}

{indirizzo}

{url}

Seleziona l’ingranaggio

Il cancelletto è per l’enfasi

13 of 15

Esportiamo in HTML 1/2

4. Mettere su ON

“Vista attuale invece che quella della mappa predefinita”

2. Cliccare qua

3. Cliccare “Opzioni di esportazione iframe”

1. Centrare la mappa sugli agritur

14 of 15

Esportiamo in HTML 1/2

Copiare l’iframe risultante

e incollarlo nel codice HTML del proprio sito

15 of 15

David Leoni

Coder Dojo Trento

Special thanks to data providers:

Thank you!