Passa ai contenuti principali

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 host : Zuckerberg cambia continuamente l'url . Io uso https://x10hosting.com

Poi da dentro Google Sheets ,dal menu File ==> Pubblica il foglio

(NB: 1948 è il nome del foglio con le immagini del 1948 , perché si potrebbe associare ad ogni "layer" della mappa osm un foglio diverso, ad esempio uno per anno di Storia; ma non è l'argomento del post: in questo esempio tutte le immagini stanno in un Foglio solo)

Apparirà così la mappa:

http://u.osmfr.org/m/378628/

Per centrarla usare il simbolino con 2 frecce che puntano un cerchietto e poi salvare la mappa.





Visualizza a schermo intero

Commenti

Post popolari in questo blog

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…