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

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