I recently undertook the expedition phase of my Gold Duke of Edinburgh in a Canadian open canoe. The team and I paddled from just outside Thetford all the way down to Cambridge on the River Thet, the Little Ouse, the Great Ouse and finally, the Cam.

For the expedition, we needed to have an “aim”. This could be anything from photographing the team at checkpoints to measuring the water PH levels. My team opted to photograph wildlife along the way and due to this, I took along my Nikon Coolpix P610 because it featured GPS - something I thought would be useful when it came to showing where the photos were taken! The camera also had a “logging” mode which allowed logging of it’s location, speed and altitude, every n number of seconds for x amount of time. I set it to every 30s for 12 hours each morning before we left so that I could see our precise route.

When we got back from the trip, I copied over all the GPS data and photos and set to work on building my presentation. I opted to build a website as I thought it would be the easiest way of showing all the data, maps and photos.  I wrote a couple of Node.js scripts to munch the data into a form I could easily display on the site, you can have a look at those at GitHub.com/developius/data-munching. The two programs are for extracting the EXIF information from the pictures and for collating the GPS points that were logged by the camera.

To glue everything together, I opted to go for a Leaflet.js and OSM combination using a custom map layer from Mapbox, alongside Chart.js for the interactive graph at the bottom of the page which shows altitude in meters and mean and maximum speed in kph. I think it worked quite well, although I now regret not taking more photos - there are noticeably large gaps on the map with regards to imagery. The nicest part of the whole trip was definitely going through Cambridge itself; avoiding punters and various other waterborne hazards was a lot of fun!

The full source code (sporadic comments - sorry) is available at github.com/developius/DoE and you can view the site in all it’s glory at finnian.io/DoE.