Last week I had a great 5 day trek through Jotunheimen in Norway, the same area featured on this blog in a number of posts
(1, 2, 3, 4, 5, 6, 7) . The trek included the Norway’s highest mountain, Galdhøpiggen (2,469 m), and the deepest valley, Utladalen.
I used my Garmin GPSmap 60CSx to track the route, which allows me to save the tracklogs on the memory card. After the trek I had 5 GPX files, one for each day. I used GPSBabel to merge the files into one GPX, jotunheimen_track.gpx.
Leaflet don't have native support for rendering GPX files (there is a plugin though), so I decided to convert the GPX track to GeoJSON. This can easily be done with ogr2ogr program (part of the great GDAL library):
ogr2ogr -f GeoJSON jotunheimen_track.json jotunheimen_track.gpx tracks
I'm only using the tracks from the GPX files, not waypoints and routes. The command generates a file, jotunheimen_track.json, where the complete track is represented as GeoJSON. Leaflet has very good support for GeoJSON. Just assign it to a JavaScript variable and add the following lines of code (using Leaflet 0.4):
L.geoJson(mytrack, {
style: {
color: '#ff0000',
weight: 1,
opacity: 1
}
}).addTo(map);
You can style the track as you like. The resulting map looks like this:
Fullscreen map
 |
| A foggy day on Galdhøpiggen (2,469 m). |
 |
| Visdalen close to Spiterstulen (1,100 m). |
 |
| The view from Kyrkja (2,032 m) |
 |
| Storutla river |
 |
| Avdalen farm in Utladalen. |
I used my Garmin GPSmap 60CSx to track the route, which allows me to save the tracklogs on the memory card. After the trek I had 5 GPX files, one for each day. I used GPSBabel to merge the files into one GPX, jotunheimen_track.gpx.
Leaflet don't have native support for rendering GPX files (there is a plugin though), so I decided to convert the GPX track to GeoJSON. This can easily be done with ogr2ogr program (part of the great GDAL library):
ogr2ogr -f GeoJSON jotunheimen_track.json jotunheimen_track.gpx tracks
I'm only using the tracks from the GPX files, not waypoints and routes. The command generates a file, jotunheimen_track.json, where the complete track is represented as GeoJSON. Leaflet has very good support for GeoJSON. Just assign it to a JavaScript variable and add the following lines of code (using Leaflet 0.4):
L.geoJson(mytrack, {
style: {
color: '#ff0000',
weight: 1,
opacity: 1
}
}).addTo(map);
You can style the track as you like. The resulting map looks like this:
Fullscreen map
Comments
I'm also about to implement Leaflet to my site but was thinking on the format to use. I didn't know about GeoJSON, thanks for the link! At the moment I'm using some custom JSON format but GeoJSON is definitely better.
PS. Looking at GeoJSON foramat specification. It seems there is now (standard) way to save elevation and time with points :(
Even though there is no standard way, you can add elevation and time to each point:
[5.309478, 60.39291, 287, "2011 05 25, 20:04:09"]
Bjørn
I'll probably have to do what you suggested with a minor difference that I'll use a integer instead of timestamp strings. With strings the entire JSON will become too big.
Then, I'm just starting out with mapbox.js, I followed your post but what I want to do is to animate the gpx.
Any help?
browser compatibility issues. Whenever I look at
your website in Safari, it looks fine however, if opening in I.E.,
it has some overlapping issues. I simply wanted to provide you with a quick heads
up! Besides that, wonderful site!