Obbiettivo
https://github.com/MrMufflon/Leaflet.Elevation
Passaggi
- ricalca un tracciato con geojson.io o qgis
- esporta in kml per GPS prune
- calcola l’elevazione con GPS prune
- copia index.html di leafletjs.elevation
- crea un file index.html su hosting personale
- ripristina la path dei file relativi
- sostituisci file gpx esempio con quello creato nell’esercizio
- visualizza risultato finale
Ricalca un tracciato con geojson.io o QGis
Quando si deve disegnare una geometria su una carta, di solito non si pensa molto alle alternative e si avvia subito un software GIS e la mia scelta è in questi casi QGis. Da qualche anno, Google Maps permette di creare queste geometrie online oppure con Google Earth. Google Maps è molto usato, tanto è che sembra uno dei “GIS” più utilizzati, soprattutto perchè offre semplici strumenti che chiunque può disegnare e distribuire le proprie idee su una mappa. Oggi c’è un’altra alternativa (anche se risale al 2013) che si chiama http://geojson.io che all’apparenza sembra per veri nerds, ma è estremamente facile creare geometrie, aggiungere proprietà e condividere informazioni. Ho testato questo strumento con un quantità discreta di dati e sembra funzionare bene e il salvataggio avviene direttamente su GitHub.
Esporta in kml per GPS prune
I formati di esportazione che offre geojson.io non sono molti, anche se quelli principali, ma ad esempio non c’è il formato GPX, che in alcuni settori, come l’escursionismo, è molto utilizzato. GPS Prune, un ottimo strumento di gestione dei file GPX legge ed esporta un’altra parte di file principali, più comuni nell’ambito dell’escursionismo e dei navigatori GPS e fortunatamente legge anche i file KML, dai quali si può passare al formato GPX all’istante. Un altro software desktop valido è GPS Viking, ma ultimamente cerco sempre dei tools online e ho trovato http://wtracks.appspot.com/ e http://www.gpsvisualizer.com/ che sono complementari: il primo serve per editare e migliorare il tracciato, mentre il secondo punta di più all’analisi e alla conversione.Calcola l’elevazione con GPS prune
Si con GPS Prune che col tool online GPSvisualizer si può associare al tracciato, che in alcuni casi risulta piano, le informazioni sull’elevazione. GPS Prune offre solo una possibilità per calcolo dell’elevazione, cioè SRTM (Shuttle Radar Topography Mission), mentre ho notato che GPSvisualizer offre anche quelle USGS e ASTER. Anche questo calcolo è abbastanza veloce e si crea in pochi click.
Copia index.html di leafletjs.elevation
Arriva il momento della mappa online e della visualizzazione del profilo e ho scelto questo progetto di MrMufflon su Github. (https://github.com/MrMufflon/Leaflet.Elevation). Procedo col Fork!
https://github.com/pjhooker/Leaflet.Elevation
Si tratta di una mappa generata con la libreria LeafletJS unita ad un grafico del profilo creato con la libreria d3JS. Ci sono due demo, quella a sinistra dove viene caricato direttamente il file GPX, mentre quella a destra dove utilizza un file geoJSON. Io ho scelto quella a sinistra. Il caricamento diretto del file GPX deriva da un altro progetto chiamato semplicemente leaflet-gpx (https://github.com/mpetazzoni/leaflet-gpx).|
|
 http://mrmufflon.github.io/Leaflet.Elevation/example/example.html |
Crea un file index.html su hosting personale
Adesso sono pronto a creare la mia demo ed invece che caricare tutta la cartella che trovo sul progetto GitHub, mi limito a creare un file index.html e a inserire tutto il codice che trovo nella sorgente pagina di http://mrmufflon.github.io/Leaflet.Elevation/example/example_gpx.html Credo che questo modo di operare, risulta facile ed intuitivo per chi non è sviluppatore web e ha poca confidenza con GitHub. Questa operazione non deve essere fatta necessariamente su un hosting web, ma può essere fatta anche in locale sul proprio pc e non necessita di una piattaforma software apache php mysql. Qundi potete creare questo file index.html sul vostro desktop e dopo i passaggi seguenti, avrete una mappa tutta vostra.Ripristina la path dei file relativi
Quando aprite la sorgente pagina potrete notare che ci sono dei file preceduti da ./ o da ../ che ha un significato ben preciso. Sono delle path relative e indicano che sono presenti dei file nell’organizzazione delle cartelle, che il file index.html ha bisogno. Il più delle volte basta scaricare l’intera cartella da GitHub, ma se non si vuole toccare il codice delle librerie, consiglio di copiare l’indirizzo originale ed inserirlo come percorso completo, al posto di quello relativo, nel vostro nuovo file index.html. Nel mio fork su GitHub ho commentato esattamente tutti questi cambiamenti. Nel codice ho trovato ache dei path relativi anche per le immagini, che bisogna sistemare.
Sostituisci file gpx esempio con quello creato nell’esercizio
Per verificare che tutte le operazioni sono andate a buon fine, aprite la vostra index.html nel vostro browser preferito. Se funziona passate alla sostituzione del file GPX originale con il vostro creato in questo esercizio. Il risultato sarà simile a questo di seguito, che ho pubblicato qui: https://www.cityplanner.biz/experiment_host/tracker_esercizio/index.html
Visualizza risultato finale
