Styling realistic terrain in Mapbox Studio with dynamic hillshading

This post needs to be updated based on a recent Studio release. Hold tight!

Recently, we released a new raster digital elevation model (DEM) source for styling terrain maps called Mapbox Terrain RGB. While styling any map in our cartography editor, Mapbox Studio, this data is available by adding the tileset as a new layer:

This guide specifically will use Tristen’s Relief style (← which you can add to your account from this link) as a canvas to build a custom styled terrain map. Let’s dig in!

Adjust the colors & intensity of your hillshading layer

Take a second to orient yourself to the Studio interface. On your left is the layers list which details the types of data that make up your map. This style uses a short number of common land-use types which is ideal for a shaded relief map to really stand out.

Let’s start by choosing a color scheme to make this map your own:

• Select your hillshading layer from the layers list (as shown above)
• Click into each panel - shadow color, highlight color , and accent color - to experiment with complimentary colors of your choice

Note that accent color works well from a design perspective when the color opacity of the shadow and highlight properties are adjusted (using the right toggle in your color window) -

For my style, I’ve chosen a festive, bright pink/purple/blue theme:

Another styling option is adjusting the Intensity of all the colors your layer uses - the intensity of this screenshot is set to .65 for a softer look, while the others below are a set to a full 1 -

While you’re styling, you may find it helpful to use the search box to find mountainous territory - try Kathmandu, Nepal or Denali National Park, Alaska:

Continue styling color and intensity for all 12 layers

Click into each layer and choose colors that fit your theme as described above. My palette 🎨:

One interesting note about Tristen’s original map design - he uses the styling technique set value by zoom as described in the Studio Manual to create a better contrast between water and hillshading when shown at higher zoom levels.Zoom in on the map yourself to see the water fade from turquoise → baby blue:

Styling illumination direction

Now that you’ve got the basics down, we can try to mirror Molly’s simulation of how the sun moves across terrain in her blog post Realistic Terrain With Custom Styling. For your hillshading layer, click into illumination direction and play around with the slider -

It’s worth noting that Molly accomplishes this effect in her post with the JavaScript library Mapbox GL JS. Check out the hillshade code example and the hillshade style spec to change any of these properties at runtime with JavaScript.

Stuck? We’re here for you!

We’ll be on Twitter from this Thursday from 1-2 pm PST for #mappyhour answering questions. Send any questions using that hashtag and we’ll solve them with you, live. But don’t worry, we’d love to help you at any time on the chance you get incredibly stuck - reach out to us! While in the app - you can contact us from the Help panel on the right side of your screen -

Hit me up with questions or requests for the next guide!