How to extrude vector terrain with hypsometric tints

By: Erin Quinn

Ever since Damon tweeted about extruding Mapbox vector terrain and applying hypsometric colors with Studio, I’ve been chomping at the bit to share how he did it.

Left: Mt. St. Helens | Right: The Grand Canyon

We’ll continue building upon your custom terrain styling by extending Tristen’s original style, Relief Shading, with a new data layer.

You can click here to start fresh with the Relief canvas or head to https://www.mapbox.com/studio/styles to open your custom version. Let’s 🤘.

Adding a Contour data layer

Inside the Studio Style Editor, we’ll start by adding a new layer -

In the upper left, click + Layer then Click to select a source to see a list of available sources. Within the Vector Terrain V2 category, choose the Contour tileset.

Now set the Type as Fill extrusion in the highlighted dropdown menu, then Create layer.

If you’re interested in learning more about the data within the contour layer, check out the features in the Mapbox Terrain vector style source, https://www.mapbox.com/vector-tiles/mapbox-terrain/#contour.

Set the height value of the contour layer to be data driven

To focus on our contour layer, let’s hide the hillshading layer by selecting it, then clicking the hide button in your toolbar. I also brought my contour layer to the top of the list (and hierarchy order). You can do this by hovering over an individual layer, clicking the hamburger menu, and dragging the the layers in any order you like -

Set the field to ele as well as adding a stop of 6000 | 6000 meters:

Set the colors of the contour layer to be data driven

If you hover over an individual layer you’ll see a hamburger menu that allows you to re-arrange the layers in any order you’d like:

You’ll need to zoom down on your map to zoom level 11 or 12 to see the contour layer, but as just a single color it won’t make much sense — let’s start assigning values to the color property by clicking value options and set value by data:

Now we have the chance to add stops by any increment of your choice to represent distinct bands of elevation heights. Each of these can have unique fill color on a value based ramp, ele (elevation). You’ll adjust the color for each elevation by clicking the dot like this:

Here’s a look at Damon’s color choices:

Customize, and share!

From here, you get to customize the colors and elevation bands completely to your liking, take amazing screenshots, share on twitter with the hashtag #mapwithmapbox.

Pro tips:

• Zoom out your browser window
• Use Control and pan the map to adjust the pitch
• Use the search box to jump to a mountainous region like “Snowbird, Utah” or “Kilimanjaro”

I’ll end with a few of my examples:

Stuck? Reach out to @Mapbox on twitter at any time!

Erin Quinn