3D Terrain

Enable 3D terrain rendering using MapTiler DEM tiles with elevation Each library has its own approach: here's how they compare.

Quick Recommendations

MapLibre GL JS — Ideal when you need manual control over the raster-dem source, terrain exaggeration, and sky/atmosphere settings.

MapTiler SDK — Best for the simplest terrain setup: enableTerrain() is a one-call helper that configures the DEM source automatically.

At a Glance

	MapLibre	SDK
Coordinates	`[lng, lat]`	`[lng, lat]`
Rendering	WebGL (GPU, 60fps)	WebGL (GPU, 60fps)
Bundle size	~250 KB gzipped	~280 KB gzipped (includes MapLibre)
Learning curve	Moderate (source/layer model, expressions)	Easy (MapLibre API with convenience helpers)
3D support	Full: terrain, fill-extrusion, globe, sky	Full (same as MapLibre)
Code lines	23	10

Code Snippets

Click a library to expand its code. Each snippet shows only the core logic: the scaffold handles HTML boilerplate.

MapLibre GL JS23 linesShow code

arrow_forwardFull example

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://api.maptiler.com/maps/outdoor-v4/style.json?key=YOUR_MAPTILER_KEY',
  center: [7.66, 45.98],
  zoom: 12,
  pitch: 60,
  bearing: -20,
  maxPitch: 85
});
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
  map.addSource('terrain-dem', {
    type: 'raster-dem',
    url: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json?key=YOUR_MAPTILER_KEY',
    tileSize: 256
  });
  map.setTerrain({ source: 'terrain-dem', exaggeration: 1.5 });
  map.addLayer({
    id: 'sky',
    type: 'sky',
    paint: { 'sky-type': 'atmosphere', 'sky-atmosphere-sun': [0, 90], 'sky-atmosphere-sun-intensity': 15 }
  });
});

MapTiler SDK10 linesShow code

arrow_forwardFull example

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
});

Things to Know

Implementation-specific details that matter for 3d terrain.

MapLibre GL JS

Requires adding a raster-dem source and calling setTerrain() after the load event; exaggeration multiplies real elevation values.

MapTiler SDK

enableTerrain() abstracts the DEM source setup into a single method call; terrain: true in the constructor also works.

Which Library to Use?

MapLibre GL JS

Enable 3D terrain rendering using MapTiler DEM tiles with adjustable exaggeration.

check_circle

Ideal when you need manual control over the raster-dem source, terrain exaggeration, and sky/atmosphere settings.

MapTiler SDK

Enable 3D terrain visualization using the SDK built-in enableTerrain helper.

check_circle

Best for the simplest terrain setup: enableTerrain() is a one-call helper that configures the DEM source automatically.

auto_awesome

Build Maps with AI

Generate code like these examples using mapping library skills in your IDE.

auto_awesomeGet skills keyGet a free API key