Passa ai contenuti principali

Caricare dati da app dentro umap

Dalla app fatta con appybuilder carichiamo una riga nel Google SpreadSheet che è collegato con una umap.

Riferimento : puravida (Taifun) https://puravidaapps.com/spreadsheet.php#select

Del riferimento occorre capire solo il blocco "POST", quello che carica nel Google Spreadsheet la riga con il marker.

Idea d'esempio  : vedo una buca in strada e la mappo in una umap (che poi trasformeremo in tipo heatmap):

Copio passo passo il metodo di Taifun.

Creo Spreadsheet nuovo nel mio account Google, lo nomino e poi creo un Modulo:

Strumenti ==> CreaModulo

Metto come minimo i campi Nome , tipo buca, lat e long:


e, come spiega bene Taifun, verrà automaticamente creato il foglio delle risposte nello spreadsheet.



Provare a compilare il modulo e inviarlo per essere sicuri che il giro funziona, perché la app farà proprio la stessa cosa.




Fin qui è come si fa di solito per fare sondaggi etc.

Ricordarsi però che (come visto in altro post del blog, punto 3 ) il foglio delle risposte deve poter essere visto da umap (dati remoti) come csv:


e che lo spreadsheet deve poter essere modificato dalla app (condivisione attiva, da tendina: PUO' MODIFICARE):



Ora, come spiega Taifun, occorre raccogliere le informazioni da mettere nella app affinché l'invio allo Spreadsheet vada a compilare le colonne della nuova riga (riga = marker su umap).
Occorre andare sul Modulo Live (menu modulo dello spreadsheet) col tasto destro IspezionaElemento e cercare i 'numerelli' entry.xxxxx corrispondenti alle colonne.



Inoltre dove c'è form action occorre copiare l'URL - quello che finisce con FormResponse -  che serve come indirizzo dello Spreadsheet a cui mandare le informazioni.



Quei numerelli sono da mettere nel web POST: questo è il programma che carica il marker (POSTa la riga) alla pressione del bottone apposito:


L'interfaccia utente più o meno sarà così (poi la attiveremo con lo SpeechRecognizer per quando si sta guidando):
serve un WebViewer per visualizzare la umap, un Location Sensor per catturare le proprie coordinate, il componente Web per caricare la riga-marker nello spreadsheet. Nel telefono alla pressione del bottone "GRANDE" apparirà questo: 


Metto sistemati i 3 bottoni sparo un po' di marker random (*) verso lo spreadsheet e poi scelgo nella umap come rappresentazione del layer "heatmap" e fisso i raggi della heatmap, la mappa da così 
diventa così:

(*) coordinate random per i test in poltrona...:






un po' di colori



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…

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 par…

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…