Skip to content

Add a color relief layer

Replicates the MapLibre example Add a color relief layer: the Innsbruck Alps colored by elevation, from deep blue at 400 m to red at 3,500 m.

add-a-color-relief-layer.yaml
# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/add-a-color-relief-layer/
# A color-relief layer (maplibre-gl >= 5.6) tints a raster-dem source by
# elevation: color-relief-color is a ramp over ["elevation"].
type: map
id: add-a-color-relief-layer
config:
center: [11.45, 47.2]
zoom: 10
maxZoom: 18
renderWorldCopies: false
mapStyle:
version: 8
sources: {}
layers: []
layers:
- id: color-relief
type: color-relief
source:
type: raster-dem
url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json"
tileSize: 256
paint:
color-relief-color:
- interpolate
- ["linear"]
- ["elevation"]
- 400
- "rgb(4, 0, 108)"
- 582.35
- "rgb(5, 1, 154)"
- 764.71
- "rgb(10, 21, 189)"
- 947.06
- "rgb(16, 44, 218)"
- 1129.41
- "rgb(24, 69, 240)"
- 1311.76
- "rgb(20, 112, 193)"
- 1494.12
- "rgb(39, 144, 116)"
- 1676.47
- "rgb(57, 169, 29)"
- 1858.82
- "rgb(111, 186, 5)"
- 2041.18
- "rgb(160, 201, 4)"
- 2223.53
- "rgb(205, 216, 2)"
- 2405.88
- "rgb(244, 221, 4)"
- 2588.24
- "rgb(251, 194, 14)"
- 2770.59
- "rgb(252, 163, 21)"
- 2952.94
- "rgb(253, 128, 20)"
- 3135.29
- "rgb(254, 85, 14)"
- 3317.65
- "rgb(243, 36, 13)"
- 3500
- "rgb(215, 5, 13)"
  • color-relief is a layer type like hillshade. It draws from a raster-dem source, and its color-relief-color is a ramp over the ["elevation"] expression, the way heatmap-color ramps over ["heatmap-density"].
  • The basemap is an inline empty style, exactly as upstream, so the relief is the whole map.
  • Needs maplibre-gl 5.6 or later. On an older runtime the renderer skips the layer with one console warning (a declared absence) and the rest of the document renders. It does not let MapLibre reject the style.
  • Export class: exports. The layer compiles through to style.json verbatim. mlym emit --target below 5.6 reports it as lossy, because that runtime cannot draw it.