Add a Multidirectional Hillshade Layer in Maptoolkit Maps JS
A standard hillshade layer simulates light from one direction, which can leave north-facing slopes looking flat or too dark. The multidirectional hillshade type blends several light angles to reveal terrain detail more evenly across the entire map. Use this variant when a single-direction hillshade creates too much shadow in valleys or creates misleading depth in complex mountain terrain.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: {
version: 8,
sources: {
'dem': {
type: 'raster-dem',
tiles: [`https://tiles.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
tileSize: 256,
minzoom: 5,
maxzoom: 12,
encoding: 'terrarium'
}
},
layers: [{
id: 'hillshading',
type: 'hillshade',
source: 'dem',
paint: {
'hillshade-method': 'multidirectional',
'hillshade-highlight-color': ['#FF4000', '#FFFF00', '#40ff00', '#00FF80'],
'hillshade-shadow-color': ['#00bfff', '#0000ff', '#bf00ff', '#FF0080'],
'hillshade-illumination-direction': [270, 315, 0, 45],
'hillshade-illumination-altitude': [30, 30, 30, 30]
}
}]
},
center: [11.39085, 47.27574],
zoom: 10,
attributionControl: { compact: false }
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Multidirectional Hillshade Layer - Maptoolkit Maps JS</title>
<meta property="og:description" content="Add a multidirectional hillshade layer that simulates light from multiple angles." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: {
version: 8,
sources: {
'dem': {
type: 'raster-dem',
tiles: [`https://tiles.maptoolkit.net/terrain/{z}/{x}/{y}.webp?api_key=${API_KEY}`],
tileSize: 256,
minzoom: 5,
maxzoom: 12,
encoding: 'terrarium'
}
},
layers: [{
id: 'hillshading',
type: 'hillshade',
source: 'dem',
paint: {
'hillshade-method': 'multidirectional',
'hillshade-highlight-color': ['#FF4000', '#FFFF00', '#40ff00', '#00FF80'],
'hillshade-shadow-color': ['#00bfff', '#0000ff', '#bf00ff', '#FF0080'],
'hillshade-illumination-direction': [270, 315, 0, 45],
'hillshade-illumination-altitude': [30, 30, 30, 30]
}
}]
},
center: [11.39085, 47.27574],
zoom: 10,
attributionControl: { compact: false }
});
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
How it works
'hillshade-method': 'multidirectional' is the whole difference from a standard hillshade.
The default method lights the terrain from one direction, which leaves slopes facing away
from that light flat or uniformly dark. Multidirectional blends several light angles, so
detail survives on every aspect of a mountain rather than only the lit side.
Note that this example builds a style object from scratch rather than loading a style
URL. version: 8 with just the DEM source and the hillshade layer produces terrain shading
on a blank background, which is how you get a relief map with no roads or labels. Swap in a
style URL and add this layer to it if you want shading over a normal map.
The source is raster-dem, not raster, so the renderer reads each pixel as a height value
instead of painting it. encoding: 'terrarium' is required. The tiles are Terrarium-encoded even though the path says terrain, and the wrong encoding does not error: it decodes the same pixels with the wrong formula and produces plausible but incorrect elevation.
Next steps
Because this builds the style from scratch, the obvious next move is putting it over a real basemap instead of a blank background: load one of the styles from Vector Tiles and add this layer to it, so you get roads and labels with the relief.
The other direction is a pure relief map, which is what the blank version is good for. Adding contours and a few labelled summits on top gives you something close to a topographic sheet, and the Elevation API supplies the heights to label.