Tailoring Maps for Strava Athletes

You may have noticed some significant improvements to the look, feel and utility of the the maps on Strava’s activity and segment pages. Our design and engineering teams have worked with the expert cartographers from Mapbox to customize our maps to best meet the needs of avid runners and cyclists around the world.

Read on for an in-depth review of the most exciting features of these new maps, and the thought and technical energy that went into them.

Footpaths and cycleways

When we set out to customize our map, we knew we wanted to make trails and footpaths pop. Pedestrian-only footpaths are now cleanly distinguished as a dashed line, while cycleways are a solid line. Both are styled white with yellow casings to highlight their paths across the map and make visually set them apart from roads with vehicular traffic.

Pedestrian footpaths clearly visible and distinct from cycling trails. Left: before, right: after.

Other highlights:

• We’ve calibrated the styling to work well for for busy inner city streets and mountainous areas at the same time.
• In addition to paths, we’re giving more emphasis to pedestrian roads and public outdoor areas (where motor vehicles are not permitted). Pedestrian roads have a similar yellow casing style to paths, while maintaining the width of similar size roads. Pedestrian areas are marked with a yellow and white hash pattern that mimics the path styling.
• Steps are clearly displayed as broader, hatched lines.

Parks

When a motorist looks at a map, they typically use well-known road (especially highways) to orient themselves. Strava athletes are a little bit different; parks and green space are much more important than highways! At all zoom levels, parks are the most brightly-colored areas on the map, making both their location and boundaries easy to distinguish. This helps to quickly find relevant locations in lower zoom levels.

We made parks easy to identify on mid zoom levels.

Other highlights:

• Labels for peaks and parks are more prominent, too!
• Just because it’s green doesn’t mean you can run or ride there. We’ve toned down outdoor areas that may not be relevant to an athlete’s activities, like golf courses, cemeteries, and zoos.

Vivid terrain

The overall color palette of Strava’s maps is now more vivid; we’ve bumped up contrast on the terrain to give hills and mountains a lush, vivid appearance. We’ve also added subtly-textured patterns for water bodies and beaches for more visual emphasis. Along with the high-contrast terrain, these patterns create visual depth, pushing these interesting outdoor features into the foreground.

More vivid terrain colors add depth to the map.

Clean roads

“Label density” isn’t a term many of us at Strava were familiar with before this project, but Mapbox’s team of experts took the time to address visual noise at all zoom levels. We’re being much more judicious about the number of street labels that appear to make it easier to see the map — not just a bunch of words. At each zoom level, we’re using a strict tolerance for label positioning and filtering by road classification and street length to only show what’s necessary. We’re offsetting road labels and street names, so you can still see them even when viewing them on the activity page or segment page.

We’ve also highlighted high-traffic roads you shouldn’t walk or ride on in grey. More aggressive highway shield labeling at mid-zoom levels allows motorways and other major roads to be clearly marked, while still being unobtrusive.

We’ve offet labels from the street to not have them hidden by athlete activity.

Cafes, shops and bicycle rental locations

We’ve added more points-of-interest (coffee shops, cafes, bicycle shops and bicycle rental locations) and we kept them light grey to keep the focus on outdoor features, roads, trails and your activities. Labels for neighborhoods and other categories of point-of-interest are lower contrast and blend into the background to allow easier reading of road, park, and peak labels.

Points-of-interest labels are secondary to road labels.

Satellite with elevation

We added contour lines and elevation labels to satellite to show terrain on otherwise flat imagery. The road and trail styling is equivalent to the terrain map, but on higher zoom levels we hide roads and trails altogether to clear the view for what’s in the imagery.

Contour lines on satellite provide crucial visual information on ascents and descents at a glance.

Designing our maps

All our maps were designed with Mapbox Studio Classic. It allows for loading up the data behind the maps and styling it just like a web site. Here’s for instance how styling high-speed roads on our custom map looks like:

Developing a color scheme with Mapbox Studio Classic.

Updating our map data

The data for our maps are coming from the amazing OpenStreetmap project. This allows us to very quickly update maps exactly where our athletes need them improve. For instance, we detect Route Planner failures and fix them in collaboration with the OpenStreetMap community.

Unlocking maps

The deep level of control over the design and the rich data it is built on is what’s exciting about our new maps. This is an entirely new foundation for us to expand on and build functionality for our athletes — expect more updates as we’re diving into the possibilities of our new mapping platform.

Special thanks to Mapbox’s Alex Barth and Nicki Dlugash for contributing to this post.

Originally published at labs.strava.com by Andrew Valko.