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…

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…

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…