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.
The complete document
Section titled “The complete document”# 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: mapid: add-a-color-relief-layerconfig: 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)"What to notice
Section titled “What to notice”color-reliefis a layer type likehillshade. It draws from araster-demsource, and itscolor-relief-coloris a ramp over the["elevation"]expression, the wayheatmap-colorramps 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 tostyle.jsonverbatim.mlym emit --targetbelow 5.6 reports it as lossy, because that runtime cannot draw it.