3D Terrain with MapTiler SDK
MapTiler SDKEnable 3D terrain visualization using the SDK built-in enableTerrain helper.
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.OUTDOOR,
center: [6.8652, 45.8326],
zoom: 12,
pitch: 60,
terrain: true,
terrainExaggeration: 1.5
});How it works
MapTiler SDK has built-in terrain support via the terrain: true constructor option. It automatically loads the MapTiler DEM (Digital Elevation Model) source without manual configuration.
The terrainExaggeration option controls the vertical scale factor. A value of 1.0 is real-world height; higher values make mountains more dramatic. The example uses 1.5 for a slight emphasis.
You can also enable terrain after initialization with map.enableTerrain().
Key APIs
| API | Description | Docs |
|---|---|---|
terrain |
Constructor option to enable 3D terrain | docs.maptiler.com/sdk-js/api/ |
terrainExaggeration |
Vertical scale factor for terrain | docs.maptiler.com/sdk-js/api/ |
map.enableTerrain() |
Enable terrain after initialization | docs.maptiler.com/sdk-js/api/ |
FAQ
What is the default terrain exaggeration?
The default is 1.0, which shows real-world heights. Use values up to 2.0–3.0 for visually dramatic landscapes.
Can I combine terrain with 3D buildings?
Yes. Enable terrain and add a fill-extrusion layer for buildings. Both render in the same 3D scene.
Common mistakes
- Forgetting to set
pitch: terrain is invisible from directly above (pitch 0) - Using very high exaggeration values on flat terrain: it can distort the view without visible benefit
- Using
MapStyle.STREETSfor terrain:OUTDOORorTOPOshow contour lines that complement 3D terrain
Build maps using MapTiler SDK with AI
Generate code like this 3d terrain with maptiler sdk example using the MapTiler SDK skill in your IDE.