We are starting a major update to MapBox Terrain. We are designing this specifically for outdoor apps, making it easy to find running trails, check out ski slopes, or visualize your bike rides.

There are two main aspects to the work in progress. First, we want to integrate hillshade and landcover data into the vector tiles workflow. This allows for a very high degree of design control and labeled contour lines down to zoom level 19 (currently at 15). Second, we want to include more features for outdoor recreation in MapBox Streets. The OpenStreetMap community is full of enthusiasts who map their favorite places for cycling, hiking, skiing, camping, and countless other outdoor activities, and we want to better share this information.

Here’s an interactive demo of the San Francisco Bay area. Note how footpaths and cycling trails add detail in offroad areas. Labeled contour lines show elevation down to the highest zoom levels:

Outdoor details

Adding more details from OpenStreetMap is relatively straightforward in a technical sense. The challenges are in choosing the right data to show and effectively translating that to vector tiles for styling. OpenStreetMap contains much more information than we can display, so we generalize and reclassify things quite a bit.

One of the features we’re focusing on is cycling. Bike paths and mountain bike trails are distinguished from footways and generic paths by color. Cycleways are shown as dotted lines and mountainbike trails as dashed lines. Footways and paths are distinguished similarly.

Relief and elevation

Our terrain layer includes both shaded relief (hillshades) and elevation contour lines. Elevation labels are placed along the more prominent index contours.

Raw data vs styled

Compared to our current terrain layer, the hillshades in our experimental layer are quite different. The biggest difference is that we’re using a vectorized representation of the shaded relief, not raster images. This allows us to show hillshades down to high zoom levels where otherwise rendering rasters would come at a very high expense.

The power of vector tiles

Working with vectorized hillshades as opposed to raster hillshades brings a lot of flexibility. The highlights and shadows are completely customizable, along with the lines and text of the contours and elevation labels.

Having the shaded relief available as vector data means we have all of Mapnik’s polygon styling features available to use - colors, patterns, outlines, image filters, and compositing operations. Not only can we experiment with different palettes and effects, we can do it rapidly and with instant feedback since we don’t have to reprocess any data.

As an example of this flexibility, Ian Villeda designed a bold punk-poster cartographic style using the exact same vector tiles as in the images above.

Let me know what you think about the new design, I’m @aj_ashton and if you’re an app developer and want to be an early beta tester ping @lxbarth and @ericg.