Say hello to Strava’s new maps for runners and cyclists. Strava’s mobile app and website lets users track, plan, and browse their runs and rides, and displays these activities on a map. Working with the Strava design team, we used OpenStreetMap data, vector terrain data, and high-resolution satellite imagery to build a set of maps specifically for outdoor activities.
Strava activity in Vancouver.
Multi-purpose maps tend to favor a motorist’s point of view, and focus on getting people efficiently from point A to point B. For Strava athletes, however, the journey is just as important as the destination. Surroundings and topography help runners and cyclists decide what routes are enjoyable and appropriate for their fitness goals. Completed activities are a type of digital trophy, so we wanted to do them justice by capturing the essence of each activity’s environment on a beautiful map.
Designing for a specific use case allows us to be highly opinionated about the visual hierarchy of features. We can highlight features that matter, and create meaningful stylistic distinctions where needed. All other information, we can remove or simplify. Here’s how we adopted this principle for Strava’s maps:
Parks as key landmarks
While highways are primary features for helping motorists orient themselves, parks are primary features for Strava athletes. That’s why we styled park polygons and labels to be highly visible at all zoom levels, clearly distinguishing their location and boundaries. Parks look distinct from other green spaces that are not suitable for athletic activities, such as cemeteries, golf courses, and zoos. Water bodies and beaches – other useful outdoor landmarks – are also pushed to the foreground through use of subtle textures.
Parks in the San Francisco Bay Area.
Prioritizing paths and non-vehicular streets
Multi-purpose maps often downplay streets and paths where vehicular traffic is not allowed, but for Strava athletes these are some of the most popular routes. At high zoom levels, paths and pedestrian areas are highlighted in yellow. High-traffic roads you shouldn’t walk or ride on are distinguished in grey.
Popular paths and pedestrian streets in Paris.
A footpath or a cycleway?
While there are various ways to subcategorize paths, we decided the most useful distinction for Strava athletes was between footpaths and cycleways. We kept path styling simple and intuitive – dashed lines for footpaths and solid lines for cycleways.
A footpath and a cycleway in the Panhandle, San Francisco.
We offset road labels to give more visibility to both the labels and the road geometries themselves. Road labels don’t obscure roads, and the red lines of athlete activity don’t obscure the labels. There’s enough visual space on the map to cleanly offset these labels because we’ve moved all secondary features to the background, using low-contrast styling.
At mid-zoom levels, roads have a low label density so athletes can clearly follow the pattern of the road network. We used a strict tolerance for label positioning and filtering by road classification and street length to show fewer labels.
Clearly visible roads, road labels, and activity route in Rock Creek Park, Washington, D.C.
Elevation and grade greatly impact the difficulty level of outdoor activities, so we integrated highly visible, detailed terrain information into both the terrain map and its accompanying satellite map:
Working with OpenStreetMap not only gives us the best data for outdoors trails, cycleways, and foot paths, but also allows us to respond fast to issues Strava athletes flag actively or passively, simply by using Strava. The feedback we receive directly drives updates, like improving the accuracy of sidewalk mapping. If you’re a Strava athlete with an OpenStreetMap account, you can update the maps yourself, directly where it matters most to you.
Visualization of the raw terrain data in Strava’s new maps.