Wednesday 8 August 2012

Showing GPS tracks with Leaflet

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  (12345, 6, 7) . The trek included the Norway’s highest mountain, Galdhøpiggen (2,469 m), and the deepest valley, Utladalen.

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

You can style the track as you like. The resulting map looks like this:

Fullscreen map


Tomo Krajina said...

Great photos!

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 :(

Bjørn Sandvik said...

Hi Tomo,

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"]


Tomo Krajina said...

Of course I can, but it is not standard. And from what I see on the site, it won't be any standard in the future because it is meant for geo shapes and a track is not just a shape (but a lot of other metadata like elevation, time, point measuremen precission, etc.).

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.

Anonymous said...

Use the properties attribute of the geojson feature. I think this is the cleanest way to add custom values.

Unknown said...

Geojson uses properties that are specifically designed to store arbitrary data with each point

Unknown said...

first, great blog and always intersting posts.
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?

Anonymous said...

Also check out LeaftletPlaybcak, which allows playback of GeoJSON GPS tracks in Leaflet.

Anonymous said...

Hello there, I believe your web site could possibly be having
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!