Our latest release of the Jawg Lab allows you to include the best shaded relief on your maps.

Quick tutorial: Add hillshades to your style

Go to the style manager.
Click create a new style and select the base style.

Tick the Hillshade box in the Details tab

That's it !

If you are going to use hillshades in your site using mapbox-gl-js make sure to upgrade its version to v0.43.0 or later.

How it works

The new DEM tileset

The hillshades layer uses our new tileset jawg-dem available at this endpoint:

https://tile.jawg.io/jawg-dem/{z}/{x}/{y}[@2x].png?access-token={your-access-token}

Encoding

This tileset encodes global elevation as png24 using RGB channels, giving a 3-digits base-256 integer. The unit used is 0.1 meter giving us enough precision to render hillshades on a map.

To decode a given pixel and get the elevation in meters use the equation:

elevation = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

Below is the visualization of the DEM tileset where each pixel encodes an elevation as explained above for each zoom level up to 10.