---
title: "How to display a 3D terrain layer in Deck.gl | Deck gl"
description: "Display realistic 3D terrain in Deck.gl using MapTiler."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to display a 3D terrain layer in Deck.gl
This example shows how to create a 3D map in Deck.gl. By utilizing MapTiler’s RGB terrain, you can enhance your maps by incorporating a realistic 3D terrain layer. Implementing the code provided below the map will allow you to achieve this effect.
Hold down the shift key to rotate the map
### NPM module setup
```bash
npm install --save deck.gl
```
#### main.js
```js
import { DeckGL } from '@deck.gl/core';
import { TerrainLayer } from '@deck.gl/geo-layers';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const TERRAIN_IMAGE = `https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp?key=${key}`;
const SURFACE_IMAGE = `https://api.maptiler.com/maps/satellite-v4/{z}/{x}/{y}.jpg?key=${key}`;
const ELEVATION_DECODER = {
rScaler: 6553.6,
gScaler: 25.6,
bScaler: 0.1,
offset: -10000
};
// Create deck.gl map
const deckgl = new DeckGL({
parent: document.getElementById("map"),
initialViewState: {
latitude: 46.20,
longitude: -122.20,
zoom: 11.5,
bearing: 140,
pitch: 60,
maxPitch: 89
},
controller: true,
layers: [
new TerrainLayer({
id: 'terrain',
minZoom: 0,
maxZoom: 12,
elevationDecoder: ELEVATION_DECODER,
elevationData: TERRAIN_IMAGE,
texture: SURFACE_IMAGE,
wireframe: false,
color: [255, 255, 255]
}),
],
});
```
#### index.html
```html
How to display a 3D terrain layer in Deck.gl | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#map {
height: 100vh;
width: 100vw;
}
```
### Basic JavaScript setup
```html
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
## Related examples
### [GeoJSON in Deck.gl](https://docs.maptiler.com/deck-gl/examples/geojson/)
Examples
Visualize GeoJSON layers and arc connections in Deck.gl.
### [Interleaved Deck.gl layer](https://docs.maptiler.com/deck-gl/examples/interleaved/)
Examples
Interleave Deck.gl layers with MapTiler SDK JS maps.
### [Buildings Deck.gl MVT layer](https://docs.maptiler.com/deck-gl/examples/mvt-extrude/)
Examples
Render extruded building layers in Deck.gl using Vector Tiles.
### [POIs info Deck.gl MVT layer](https://docs.maptiler.com/deck-gl/examples/mvt-tooltip/)
Examples
Display MVT POI layers with tooltips in Deck.gl.