Mapbox GoPro map

I was fortunate enough to have attended a FOSS4G 2014 workshop by Rafa Gutierrez on Leaflet and Mapbox JavaScript API Fundamentals. Not too long ago I came across one of Rafa’s posts entitled GoPro video maps that got me thinking more about combining map and video content – exactly what it was designed to do.

An animated marker moving along a cycle route with associated GoPro video view. Video and animation! need I say more. I got really excited about the possibilities and immediately started cooking up some ideas for an overhaul.  I find with Mapbox/Leaflet builds that there is a tendency to add more functionality than one might need just because it is so fun to work with, kind of like adding more synth to an 80s pop song – I sometimes need to remind myself of Vladamir Agofonkin’s mantra that simplicity will save GIS.



  1. Adjust animation marker speed – It is unlikely that a marker will travel at a constant speed from start to end, stop and start for observations and speed fluctuations depending on terrain or other factors are likely to be a reality.
  2. An unobstructed view of the animated path – Place video to the side of the main map content and animation path.
  3. Control video based on interaction with map – Introduction of map click nearest to and marker drag and snap functionality, both of which update the video to the time associated with the nearest location.
  4. Control map based on interaction with video – Enter HTML5 video API. Play, pause and seek functionality controls marker behavior on map.
  5. Rotate marker to reflect direction of sight – The thinking here was, how can I support the user experience by providing an indicator as to which direction the video is pointed in. Think quad copter moving in one direction but capturing video from the opposite direction – the idea, to introduce a directional icon that will minimize confusion- code for this functionality courtesy of Benjamin Becquet.



A JSON variable that stores the latitude and longitude coordinates, a time in seconds that corresponds with when each location features in the video and an angle that represents direction of sight at that location in time. The JSON would be better off stored in a database but I have bundled it into the JavaScript for a local quick start solution.

Next, construct the animation path based on the JSON data points and display it on the map.

To rotate a marker based on the JSON direction value, I have used Benjamin Becquet’s code featured in the mapbox rotating and controllable marker example.

Add  marker to map, make it draggable and setup animation functionality. Ensure the video and marker are in-sync with regards to location and associated time featured in the video and feed the location direction in to rotate the marker accordingly.

Setup video listeners to work with animated marker location based on HTML5 video API.

Handle nearest point functionality based on map click and animated marker drag drop.

The GoPro unit used for this demo did not capture GPS or direction so the JSON build was very much a manual effort. QGIS was used to generate a path and extract point locations. A time and direction was then assigned to each location, the more points the smoother the animation. The assumption being that, with a GPS enabled video DEVICE, the JSON build process could be automated.

A working example can be found here

The full source code is available on GitHub

  2 comments for “Mapbox GoPro map

  1. Gary
    December 11, 2017 at 6:08 pm

    I know this project on Git hasn’t been updated in a year but I was wondering can the same results be achieved in OpenLayers?

    • denelius
      January 11, 2018 at 9:48 pm

      Hi Gary, I’m almost certain you can achieve the same results using OpenLayers

Leave a Reply

Your email address will not be published. Required fields are marked *