Passa ai contenuti principali

come importare il JSON file in appybuilder per fare le app

Sito per costruire app: http://gold.appybuilder.com

Chiamata GET come riferimento per osservare il file JSON da processare:
https://www.overpass-api.de/api/interpreter?data=[out:json];node[natural=tree](45.36386820715566,9.692811369895935,45.36502340932776,9.69470500946045);out%20meta;

Per "visualizzarlo", andare qui e copiarlo dentro: https://vanya.jp.net/vtree/

Preparare un Bottone (Button1) e un Web (Web1) nell'interfaccia utente.
Nei blocchi costruire il GET del JSON file così (l'URL è quello indicato prima)
Poi inserire il blocco che gestisce il file che arriva dalla Rete. Per ora predisporre delle Label per capire come funziona la logica:


Lat e Lon verranno poi usate per definire (e piazzare) i marker sulla Map1 (da inserire nella interfaccia Utente).



Occorre apprendere il concetto di lista e lista di liste.

Infatti il blocco fondamentale prende un JSON e lo trasforma in una lista di liste  (vedere cosa arriva nella Label3 per capirci, i delimitatori sono le parentesi tonde):






Questo unico elemento è a sua volta una lista , fatta di quattro items:
 elements , generator, osm3s e version .

Si estrarrà il primo, quello con indice 1, perché lì ci sono i dati che interessano.

Prendiamo il secondo elemento (quindi indice 2) , cioè il resto.

Il resto è una lista di 13 elementi, gli alberi.
Ogni elemento è una lista (da 10 elementi in particolare) a sua volta : estraiamo nell'esempio il secondo elemento, quello che inizia con (changeset 76247509) per intenderci.

Infine, per cambiare un po', sfruttiamo la possibilità di estrarre info con il blocco "look up in pairs", così è più leggibile.

Una volta capita la struttura delle liste di liste si può procedere al ciclo for che crea i marker sulla Map1 (figura precedente), uno per ognuno dei 13 alberi:


PS: altro modo di accedere usando il numero solo per distinguere gli items, per il resto solo usando lookupinpairs:



file sorgente (.aia) sperimentale:
https://drive.google.com/file/d/1YVfxU5bzDuy-BiJZaV7JfcT_CsXU53mf/view?usp=sharing

nel prossimo post del blog : uso di una estensione di appinventor.

appendice
Notare lo scambio elementi lista principale fra JSON e app:
{
  "version": 0.6,
  "generator": "Overpass API 0.7.55.1009 5e627b63",
  "osm3s": {
    "timestamp_osm_base": "2019-11-12T20:49:02Z",
    "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
  },
  "elements": [

{
  "type": "node",
  "id": 6875887073,
  "lat": 45.3646829,
  "lon": 9.6932692,
  "timestamp": "2019-10-26T16:34:06Z",
  "version": 2,
  "changeset": 76247509,
  "user": "luca scandelli",
  "uid": 1786966,
  "tags": {
    "diameter": "60cm",
    "leaf_cycle": "evergreen",
    "leaf_type": "needleleaved",
    "natural": "tree",
    "species:wikidata": "Q623489",
    "species:wikipedia": "it:Cedrus atlantica"
  }
},
..........
{
  "type": "node",
  "id": 6960043944,
  "lat": 45.3640026,
  "lon": 9.6947031,
  "timestamp": "2019-11-09T14:07:25Z",
  "version": 1,
  "changeset": 76845103,
  "user": "luca scandelli",
  "uid": 1786966,
  "tags": {
    "denotation": "urban",
    "leaf_cycle": "deciduous",
    "leaf_type": "broadleaved",
    "natural": "tree",
    "species:wikidata": "Q43284",
    "species:wikipedia": "it:Ginkgo biloba"
  }
}

  ]
}

lista di liste:
(
(elements
(
(
(changeset 76247509)
(id 6875887073)
(lat 45.36468)
(lon 9.69327)
(tags
(
(diameter 60cm)
(leaf_cycle evergreen)
(leaf_type needleleaved)
(natural tree)
(species:wikidata Q623489)
(species:wikipedia it:Cedrus atlantica)
)
)
(timestamp 2019-10-26T16:34:06Z)
(type node)
(uid 1786966)
(user luca scandelli)
(version 2)
)

......
(
(changeset 76845103)
(id 6960043944)
(lat 45.364)
(lon 9.6947)
(tags
(
(denotation urban)
(leaf_cycle deciduous)
(leaf_type broadleaved)
(natural tree)
(species:wikidata Q43284)
(species:wikipedia it:Ginkgo biloba)
)
)
(timestamp 2019-11-09T14:07:25Z)
(type node)
(uid 1786966)
(user luca scandelli)
(version 1)
)
)
)
(generator Overpass API 0.7.55.7 8b86ff77)
(osm3s
(
(copyright The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.)
(timestamp_osm_base 2019-11-13T19:41:02Z)
)
)
(version 0.6)
)



Commenti

Post popolari in questo blog

UMAP: mappare con fotografie nel popup

Premessa: come esempio non userò alberi perché non ho il tempo di uscire , ma foto di Crema del passato prese da Gruppi facebook.

I dati saranno messi in un Google Sheet:
ogni riga un segnaposto sulla mappa
ogni colonna una proprietà del segnaposto della mappa

per il tutorial di un prof per alunni delle medie, vedere qui:  https://sites.google.com/view/lucascalzullo/tutorial/umap 

Cosa serve modificare nel LAYER della mappa?

1. La cosa che si vuol far apparire quando il mouse passa sopra il segnaposto (in questo caso l'autore )


2. l'elenco delle colonne da importare nel popup , okkio al numero di parentesi graffe: 3 per le foto

3. i collegamenti allo Sheet (col formato) dove andare a prendere i dati per piazzare i segnaposto.

Il foglio del GoogleSheet sarà composto da tante righe quanti i segnaposti che si vogliono piazzare e le colonne saranno corrispondenti a quelli indicati al passo 2 sopra:



non usare l'URL facebook per le foto di facebook, ma caricarle su un proprio ho…

Utili tutorial in Rete

da Ciro Spataro
Tutorial per creare mappe online su UMAP aggiornabili con file CSV da GOOGLEDRIVE https://cirospat.readthedocs.io/it/latest/tutorial-googledrive-to-umap.html?highlight=umap


<<Ma posso fare una query e scegliere quali colonne avere, usando un linguaggio SQL.
La struttura di una query è questa: SELECTB,C,D,E,G,I,J>> Questi ultimi due URL però contengono (nella query) caratteri strani ed è meglio codificarli, specie per farli parlare con app esterne come uMap. E la query diventa: SELECT%20B%2CC%2CD%2CE%2CG%2CI%2CJ%20WHERE%20I%20Contains%20%27.%27 «%20» è il modo corretto di scrivere uno spazio. «%2C» è la virgola. Altre info sui caratteri qui: http://www.w3schools.com/tags/ref_urlencode.asp La documentazione ufficiale qui: https://developers.google.com/chart/interactive/docs/querylanguage La sintassi esatta (dicesi «encoding») può essere ottenuta anche utilizzando questo strumento online http://meyerweb.com/eric/tools/dencoder/ dove inseriamo codice da tenere se…