Mapping your moves (with Mapbox Studio!)

Here are two years of my walks, runs, and bike rides loaded into Mapbox Studio.

YELLOW/RED is biking, PINK is running, BLUE is walking --- View full screen

Organizing your data

I’m using Facebook’s Moves to track my activities throughout the day. The app provides your data in several formats, but I’ll use just the GPX files as they capture the app’s smart activity filtering, separating walking, running, cycling, flying, and driving.

Create a source in Mapbox Studio

We have our data, so now we need to create a source from it. Sources are vectorized data sets that can be composited into any Studio style after uploading.

Open Mapbox Studio and click on Projects in the lower left - this will open up a listing of your projects. Click on New project, then tap the + Blank source button.

I was only interested in my physical activities, so I took the full data sets for cycling.gpx, running.gpx, and walking.gpx. To add each, click on + New layer in the top right and add the GPX files.

You’ll notice a lot of layers provided by Moves. To keep the vector tile size down and because I’m only interested in the tracks themselves, I deleted everything but the _tracks layers.

Save the source in the top left, then click Settings. Add a name and description if you’d like, then take a look at the Maxzoom slider. It defaults to zoom 11, but I wanted a bit higher fidelity at higher zooms, so I bumped this up to 13.

Save again, then click Upload to Mapbox. If you have a lot of activities, this could take a little bit as it tiles all of the data. Two years worth of my own data took about 5 minutes to upload. When it’s done, you’ll be given a Mapbox source ID and a link to view it in your Data page. You’ll want to copy this ID, as you’ll need it for the next step.

Add the source layer to a new style

Now that I’ve got a source, I want to composite it into a map. I’ll go to the Projects button again and this time create a new style. I love the look of ”High Contrast”, so I chose that one.

To add the layer, click on Layers, then Change source. In the input at the bottom, paste in the source ID and click Apply.

Style the data

You’ll see the map flash, but won’t notice anything different quite yet. The data is there, but there are no styles applied to it yet.

On the right side, you’ll see three tabs for style, road, and labels. I didn’t love how dark the roads were in the High Contrast style, so I clicked on the road style and changed the motorway hex color:

@motorway:          #ccc;

From here, add a new style file with the + button. I named it “activities”. If you recall, I pushed three datasets to the custom source - cycling_tracks, running_tracks, and walking_tracks. These are IDs that can be referenced in the style pane. Using these, I can quickly assign some hex codes to a variable for reuse and create a quick basic style:

@running: #FF69B4;
@walking: #00eaff;
@cycling: #ffCD2F;

#running_tracks, #walking_tracks, #cycling_tracks {
  line-width: 1;
}

#running_tracks {
  line-color: @running;
}

#walking_tracks {
  line-color: @walking;
}

#cycling_tracks {
  line-color: @cycling;
}

This looks cool, but doesn’t communicate much about how much I’ve done certain activities in certain places, and the various activities are kind of stepping over each other for attention. We can use line-comp-op to composite them on top. I played around with some options, and landed here:

#running_tracks {
  line-color: @running;
  line-comp-op: hard-light;
}

#walking_tracks {
  line-color: @walking;
  line-comp-op: multiply;
}

#cycling_tracks {
  line-color: @cycling;
  line-comp-op: multiply;
}

I kept going here, adjusting line width for different zooms and even converting the lines to dots at low zooms so they’re easier to spot. Download the final activities style here. If you’d like labels to appear on top of the map like I’ve done in the final version, take a look at how to do that in this guide.

Once you’re happy with the design, click on Settings again, then Upload to Mapbox. It will appear in your Styles page on Mapbox.com, where you can share to your heart’s content.

View my activities map here, which should give you an interesting peek into how much time I spend on my feet. If you want to start tracking your own activities, check out Moves, OpenPaths, PlaceMe, or any other fitness tracking app.

And if you haven’t tried Mapbox Studio out yet, download the latest version - it’s open source and publishing your map on Mapbox.com is free.