Si tratta di questo tool:
https://tyrasd.github.io/osmtogeojson/
https://tyrasd.github.io/osmtogeojson/
In pratica si copia nella finestra a sinistra il risultato di overpass-api (es: JSON, ma potrebbe essere un xml) e, dopo aver cliccato il bottone viola, si ottiene il file GeoJSON
Come spiegato nella pagina , i sorgenti javascript possono essere scaricati.
Per quanto riguarda html, il sorgente è il seguente:
al click del bottone viene chiamata la funzione (toGeo) che:
carica nella variabile data il contenuto della finestra di sinistra (identificata nell'html che non si vede sotto come 'osmxml') , lo modifica a seconda che sia xml o json, chiama lo script javascript osmtogeojson passandogli data nella forma corretta (xml o json) mettendo il risultato nella variabile geojson e infine copia nella finestra identificata come 'geojson' (quella di destra) il contenuto della variabile geojson.
A questo punto occorre una digressione su come usarlo in una app .
Il componente WebViewer di appinventor (che si trova nella User Interface, da non confondere con il componente Web che si trova invece sotto Connectivity) esegue javascript quando accede alla rete. Ma può essere usato per far girare javascript qualsiasi.
Per farlo "parlare" con il resto della app, occorre inserire (nell'html/script) delle chiamate ben definite, basate sulle funzioni di appinventor AppInventor.getWebViewString e AppInventor.setWebViewString.
La prima funzione carica in una variabile data (ad esempio) la stringa che arriva dal resto della app (in particolare dal blocco setWebViewer_WebViewString, vedere più avanti):
var data = window.AppInventor.getWebViewString();
Questa sostituisce
data = document.getElementById('osmxml').value || "<osm></osm>", geojson;
dell'html originale
La seconda funzione fa il contrario : passa il contenuto di una variabile risultato (ad esempio) la stringa che arriva dal calcolo fatto da javascript:
window.AppInventor.setWebViewString( risultato );
dove risultato=JSON.stringify(geojson, null, 4);
e va a sostituire l'originale
document.getElementById('geojson').value = JSON.stringify(geojson, null, 4);
Questo accorgimento fa eseguire la funzione quando la pagina html verrà caricata dal WebViewer:
<body onload="toGeo();">
Occorre dunque scaricare l'html del convertitore e modificarlo.
Tenerlo nel cell all'indirizzo:
file:///android_asset/javascriptWebViewProcessor.html
oppure (per debuggare):
file:///mnt/sdcard/AppInventor/assets/javascriptWebViewProcessor.html
Va poi assegnato al blocco Web come URL:
Ora vediamo gli altri blocchi:
il setWebViewer è quello che passa il JSON che è arrivato da Overpass-api (che sta ancora nella Label2)
la callWebViewer carica la HomeURL settata prima e quindi fa eseguire il javascript lì citato:
la (get)WebViewer si usa per copiare il risultato nella Label3:
Riassumendo tutto il giro :
Il file geojson può essere salvato nel telefonino con il blocco apposito:
Appendice 1 : parte iniziale (fino a fine script) del file html da 'Uploadare' nella sezione Progetto di appybuilder. Esso è derivato direttamente da quello di tyrasd (i commenti di linea servono ad evidenziare i cambi , ad esempio il preventDefault non piace ...).
<!-- saved from url=(0038)https://tyrasd.github.io/osmtogeojson/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>osmtogeojson</title>
<body onload="toGeo();">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="https://tyrasd.github.io/osmtogeojson/osmtogeojson.js"></script>
<script type="text/javascript">
function toGeo(e) {
<!-- e.preventDefault(); -->
var data = window.AppInventor.getWebViewString();
data = data || "<osm></osm>", geojson;
<!-- var data = document.getElementById('osmxml').value || "<osm></osm>", -->
<!-- geojson; -->
try {
data = $.parseXML(data);
} catch(e) {
data = JSON.parse(data);
}
geojson = osmtogeojson(data);
<!-- document.getElementById('geojson').value = JSON.stringify(geojson, null, 4); -->
var risultato=JSON.stringify(geojson, null, 4);
window.AppInventor.setWebViewString( risultato );
console.log(geojson);
}
$(function() {
$("#toGeo").click(toGeo);
});
</script>
Commenti
Posta un commento