---
title: "Add hillshading | JavaScript maps SDK"
description: "Add raster hillshading effect to a MapTiler map."
---
# Add hillshading
To improve the visual appeal of a map, this demonstration incorporates raster hillshading. This is achieved by integrating the [MapTiler Terrain-DEM](https://www.maptiler.com/terrain/) raster tileset, as a raster-dem source for the hillshade layer. By doing so, the map gains a realistic representation of terrain elevation and shading.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
zoom: 0.3,
center: [0, 20],
style: MapStyle.BASE.LIGHT
});
map.on('load', function () {
map.addSource("terrain", {
"type": "raster-dem",
"url": `https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json`
});
map.addLayer(
{
'id': 'hillshading',
'source': 'terrain',
'type': 'hillshade'
},
'Residential'
);
});
```
#### index.html
```html
Add hillshading | NPM example | MapTiler SDK JS
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
### Basic JavaScript setup
```html
Add hillshade
```
## Related examples
### [Add dynamic hillshading](https://docs.maptiler.com/sdk-js/examples/dynamic-hillshade/)
Examples
Adjust hillshade lighting dynamically to simulate sun movement.
### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.
### [Raster layer](https://docs.maptiler.com/sdk-js/examples/raster-layer/)
Tutorials
Add a raster image overlay to the map.