running in mapbox-gl

24 Jan 2017



okc
OKC Memorial in 2016

I run…well, I attempt to run, but it’s fun for me! There are plenty of posts that walk through how to map out runs. Catalina marathon, Runkeeper routes, and the one that got me hooked are some of the ones that come to mind.

I played around with the entire dataset of my runs a while back:

However, the Catalina marathon blog post inspired me to start visualizing my individual runs.

I started with a fundamental thought of “automated” as much as possible. Starting with exporting a run from Strava, Runkeeper, or your tracker of choice as a GPX file all the way to viewing the dataset on a map.

tulsa
Tulsa Route-66 in 2014

Using togeojson, I convert the GPX file a geojson format of the run. When uploading the tileset to Mapbox, I did not have much control over the metadata (elevation, heart rate, segment time, etc.). The output of togeojson are parallel arrays: one of the arrays is the linestring of the route and the other arrays are the metadata sitting in the properties object of the feature. In comes Turf to help out.

Using Turf meta, I merged the parallel arrays to an array of objects (datapoints).

I create segments of the run by grabbing the n and n+1 datapoints. I wanted to minimize overlapping segments, so I used turf.distance and turf.lineSliceAlong to crop out 2 feet of each segment. After that, all the segments are stuffed into a feature collection.

disney
Walt Disney World in 2016

I wrote the geojson to disk and uploaded via Mapbox. That’s great, but it’s still a manual process. Fortunately for me, Mapbox provides an API and a JavaScript SDK to take care of my manual process. From there I was able automatically upload the dataset and I build a quick map to display the run.

With the metadata of the runs attached to each segment, I was able to take advantage of some great gl styling features. I used data driven styling to visualize my heart rate using the same heartrate colorization of Strava. I also used 3D extrusions to visualize the elevation of the run, but mapping my Oklahoma runs will not show much.

Here is the finished product, my run of the OKC Memorial Half Marathon back in April of 2016. If you would like to check out the code, it can be found here. Click here to view the standalone map.