Styling realistic terrain in Mapbox Studio with dynamic hillshading
Tags: mapbox, webmapping, cartography, design
Published: 2018-04-18 23:11:58

---
title: Styling realistic terrain in Mapbox Studio with dynamic hillshading
published: true
description: 
tags: Mapbox, Web Mapping, Cartography, Design
---

_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](https://blog.mapbox.com/new-in-studio-dynamic-hillshading-2027c77781d8). While styling any map in our cartography editor, Mapbox Studio, this data is available by [adding the tileset as a new layer](https://www.mapbox.com/help/studio-manual-styles/#hillshade-layer):


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523914880773_image.png)


This guide specifically will use [Tristen’s Relief style](https://www.mapbox.com/studio/styles/add-style/mapbox/cjfshapp373un2rsyqe11pbvc/?utm_source=multi-step-map&utm_medium=email&utm_content=add-relief-style&utm_campaign=multi-step-map) (← 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](https://www.mapbox.com/help/studio-manual-styles/#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.


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523814581722_image.png)


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 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523917639324_image.png)


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) - 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523973279989_color-opacity.gif)


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

![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523814905353_image.png)


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 - 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523973209411_image.png)


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: 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523973613612_image.png)



## 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 🎨: 

![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523915086296_image.png)

![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523815910183_image.png)


One interesting note about Tristen’s original map design - he uses the styling technique `set value by zoom` as described in [the Studio Manual](https://www.mapbox.com/help/studio-manual-styles/#set-value-by-zoom) 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: 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523917888057_image.png)




## 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](https://blog.mapbox.com/realistic-terrain-with-custom-styling-ce1fe98518ab). For your `hillshading` layer, click into `illumination direction` and play around with the slider - 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523974592771_high+res+terrain+styling.gif)


It’s worth noting that Molly accomplishes this effect [in her post](https://blog.mapbox.com/realistic-terrain-with-custom-styling-ce1fe98518ab) with the JavaScript library Mapbox GL JS. Check out the [hillshade code example](https://www.mapbox.com/mapbox-gl-js/example/hillshade/) and the [hillshade style spec](https://www.mapbox.com/mapbox-gl-js/style-spec/#layers-hillshade) 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](https://www.mapbox.com/contact/support/#products/studio)! While in the app - you can contact us from the  `Help` panel on the right side of your screen - 


![](https://d2mxuefqeaa7sj.cloudfront.net/s_8AED25FC82CB6C241545BF740F064C73E1B15B16CDB163B4F93AB51FC754ECEA_1523813254622_image.png)

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