The new Mapbox Outdoors is all about bringing the background forward. Hill shades orient runners, topography lines help hikers judge ascents, roads are designed to overlay GPS tracks from your rides. All features are globally available at highest zoom levels and fully customizable. We see this map becoming a core part in outdoor apps, letting developers tailor its design exactly to brand and type of activity. Creating Mapbox Outdoors meant not only processing terabytes of new landcover and elevation data, but taking a completely fresh look at all aspects of designing a map for adventure. Here are my favorite highlights of the new design.

A world’s worth of data

Global elevation and landcover data is at the core of what makes this design possible. We processed the best elevation and landcover information we could find from around the world — 24 different datasets from 13 different organizations, including the US Geological Survey, the Norwegian Mapping Authority, and the Canadian GeoBase data portal. We built up a processing pipeline that is repeatable, modular and extendable, this allows us to ingest updates and additional data as it becomes available. The screenshot above shows our processing dashboard.

Designing hillshades zoom level by zoom level

We took extra care to make sure that the terrain layers are visualized in a scale-appropriate manner. Instead of running the hillshade algorithm just once or a few times and scaling the results up or down to fit multiple zoom levels, we generated new hillshades with adjusted resolution and lighting settings for every zoom level of the vector tiles. In global views we’re not showing a noisy mess of too much detail, but conveying the general form of mountain ranges as a whole. As you zoom in the details reveal themselves.

hillshades at 3 scales

For the final styling of the data we’re bringing lighting to the hills that evokes a more natural outdoors feeling. The highlights are tinted slightly yellow as if lit by the sun, and the shadows are slightly blue-purple.

Labeled contour lines

We used the same detailed elevation data from hillshading also for contour lines. In Mapbox Outdoors, contour lines are plainly styled to not be overpowering, with index lines slightly darker and clearly labeled. Contour lines are available down to the highest zoom levels, providing topographical context even when navigating the closest surroundings.

elevation contour lines

Global landcover

For global landcover coverage at all scales we rely on several raster-based open data sets, and at the more zoomed-in levels we also show OpenStreetMap landcover information for even higher detail where it is available.

The external landcover datasets are mostly created with science, agriculture, or similar applications in mind, however we’re mostly interested in painting a general background picture. Landcover classifications can get pretty specific, and the way things are broken up can vary greatly between different datasets. To keep styling simple we merged dozens of different possible classifications into just a handful of very basic ones: trees, bushes, grass, crops, and bare ground.


OpenStreetMap for Outdoors

OpenStreetMap contains amazing trail data. For Mapbox Outdoors we’re updating our vector tiles to include more details from OpenStreetMap such as ski trails, hiking trails, and mountain biking trails. The style also includes points of interest like mountain peaks marked with Maki icons, which we’ve specifically designed for digital cartography.

OpenStreetMap landuse areas (such as schools, hospitals, airports, etc) are assigned bright colors to stand out from the background but multiplied over hillshades and landcover so that things like forests and shading show through.

All vector tiles

All data is processed first into vector tiles before we generate and style image tiles from them on the fly as they are delivered to the client. This gives us a high degree of design flexibility. For instance, we can overlay labeled contour lines on satellite imagery for a clearer picture of the terrain.