Outdoor map design and styling with Strava
Terrain + minimalism make GPS activity stand out
By: Madison Draper
New Mapbox blog posts are now published on www.mapbox.com/blog. Leave your email to receive email updates when new posts are published or subscribe to the new RSS feed.
Strava’s new custom maps are designed specifically for athletes’ needs. This new design puts athletes first with a focus on minimalism to make activity stand out — highlighting landscape features including terrain shading, elevation contours, and peaks, and providing just the context necessary for athletes to orient themselves.
Elevation contours and peaks
Contour lines let Strava athletes know just how difficult an activity was by showing the rate of change in a mountain’s slope. Contour lines are styled as a gradient of light grey for lower elevation to rich green for elevations 300 meters and higher. Designed specifically with city athletes in mind, contour elevation starts as low as 10 meters. This was inspired by the notorious hills of Strava’s founding city of San Francisco, where the grey to green gradient mirrors the urban asphalt transition to a vegetation-filled summit.
Names of peaks are labeled, along with their respective elevation, in both urban and rural (in meters). Showing the peaks like this complements the contour lines and provide better information around elevation data.
Vector hillshade
Hillshading gives depth to the map and brings the contours of the map into a realistic representation, letting athletes look at the map and have a reflection of the journey. It shows how demanding uphill hikes are and how steep switchbacks climbs are.
Each hillshade polygon has metadata for what side of the mountain it’s on, and the level of the slope. With this level of granularity, it was easy to add the hillshade polygons and style it according to its metadata in Studio. For terrain to maintain a rich green, dark and light greens were used for the shadows and light-facing parts of mountains.
Minimalism starts with color
GPS activity is overlaid on the map as a bright orange line. Using the right set of colors better defines locations on a map and gives a more accurate view of the route. Athletes shouldn’t have to guess where they went. This map should have athletes asking, “Where next?”
To remove any distractions from the athlete’s journey, the map’s colors were reduced and simplified using ColorBrewer, a tool for picking map color palettes. We designed this palette that was aesthetically pleasing and color-blind friendly. Adobe Color helped generate the other harmonious shades and complementary colors. The palette is lightened slightly to maintain the minimalist theme and keep the athlete’s route at the forefront.
Navigation Context
For urban athletes, highway shields are an immediate way to indicate location. By adding highway shields from across the world, this map better serves and connects athletes internationally.
Outdoors POIs
Points of interest are focused on parks and other outdoor areas, rather than shops.
