3D and terrain

Quick answer

This tutorial covers MapLibre's three-dimensional features: pitch and bearing for oblique views, a raster-dem source with encoding: 'terrarium' plus setTerrain for extruded ground, hillshade layers, and fill-extrusion for buildings with height properties. It also adjusts light with map.setLight and sky with map.setSky. Afterwards you can build a tilted terrain scene and clamp data to the ground.

Last verified 2026-11-03 · MapLibre GL JS 4.x · Cite this page

Key points

Set pitch between 45 and 65 degrees with maxPitch and enable visualizePitch on NavigationControl.
Add a raster-dem source with encoding: 'terrarium' and call map.setTerrain({ source: 'dem', exaggeration: 1.5 }).
Drive fill-extrusion-height and fill-extrusion-base from coalesced properties such as height.

Example

var map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [103.0, 30.0],
  zoom: 10,
  pitch: 55,
  bearing: -20,
  maxPitch: 75,
  hash: true            // 把视角写进 URL，便于分享与复现
});

map.addControl(new maplibregl.NavigationControl({
  visualizePitch: true
}), 'top-right');

map.on('load', function () {
  map.addSource('dem', {
    type: 'raster-dem',
    tiles: [
      'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'
    ],
    encoding: 'terrarium',
    tileSize: 256,
    maxzoom: 14
  });

  map.setTerrain({
    source: 'dem',
    exaggeration: 1.5      // 垂直放大倍数
  });

  map.addLayer({
    id: 'hillshade',
    type: 'hillshade',
    source: 'dem',
    paint: {
      'hillshade-exaggeration': 0.4,
      'hillshade-shadow-color': '#2b2b2b',
      'hillshade-highlight-color': '#ffffff'
    }
  });
});

Notes

Using the wrong encoding on elevation tiles turns the surface into random pits and spikes.
map.getCenter() ignores elevation, so use map.queryTerrainElevation(lngLat) to hug the ground.

Runnable examples Chinese original All Tutorials

English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.

Cite this page

Atlaslog (2026). 3D and terrain. https://www.jingweizhi.com/en/maplibre/tutorials/terrain-3d.html (accessed 2026-11-03).