We’ve been playing with mapping GoPro video, most recently using some of Bobby’s biking footage and overlaying it with his Strava GPX track. We synced up the video track using MapBox.js that embeds a video in a marker’s popup and moves it along a route. Similar to the Marker Movement example, a popup with the video in an iframe is bound to the marker’s track so it can go along for the ride. We have similar examples on the new MapBox.js examples page and I also pulled together this tutorial, starting with an initial route and marker from your GPX data, and then show how to set a marker along the vertices of a route to animate it along a line and then showing how to bind a popup to a marker so the video traverses the route.
Setting up the map
We start by setting up our basic map, position, and zoom level. The popup is also set to stay open in case it is clicked to close.
Loading the JSON
Tracks recorded by Strava can be easily exported as a GPX file and loaded into geojson.io for conversion into a GeoJSON format that’s easy for MapBox.js to consume.
There are other ways to include GeoJSON, but for this example, we’re
a snippet of ridelapse.js
Next, we make a style for the line then add the ride variable into our
example as the GeoJSON. A marker is also added to indicate the current
position starting at the beginning coordinates of the ride.
Following the route
We create a function, tick(), that moves the marker by setting its placement on each point in the list of coordinates
that form the route’s line.
The synchronization of the video’s time over the total distance of the path is an estimate since the video has small variations.
Binding the popup
Finally, we bind the video to the marker’s popup and set the popup’s latitude and longitude to pan with the marker.
The marker._popup.setLatLng is a minor hack to prevent the video from resetting when changing the popup position - a quirk that will be fixed in the next MapBox.js version.
You can continue to extend this example with time sliders, custom popups, and clean styles for routes and markers. Check out a complete example on our expanding examples page and start adding some new perspectives to your routes.