Add a Hillshade Layer
A hillshade layer simulates sunlight hitting a terrain surface to produce shadows that make mountains and valleys visually clear. In Maptoolkit Maps JS, you add a raster-dem source and a hillshade layer on top of it to enable this effect. Use hillshade to give topographic context to hiking maps, ski resort apps, or any visualization where understanding terrain shape matters.
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://vtc-cdn.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-exaggeration': 0.5,
'hillshade-shadow-color': '#473b24'
}
}]
},
center: [11.39085, 47.27574],
zoom: 10,
attributionControl: { compact: false }
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Hillshade Layer - Maptoolkit Maps JS</title>
<meta property="og:description" content="Add a hillshade layer to visualize terrain relief." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/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://vtc-cdn.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-exaggeration': 0.5,
'hillshade-shadow-color': '#473b24'
}
}]
},
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.
Use the Maptoolkit Connector. Create an interactive map with zoom level 10, centered around [11.39085, 47.27574], displaying a hillshade layer.