Skip to content

Add a color relief layer

Add a color relief layer.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add a color relief layer</title>
    <meta property="og:description" content="Add a color relief layer." />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.6.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id='map'></div>

<script>
    const map = window.map = new maplibregl.Map({
        container: 'map',
        zoom: 10,
        center: [11.45, 47.2],
        pitch: 0,
        renderWorldCopies: false,
        hash: true,
        style: {
            version: 8,
            sources: {
                terrainSource: {
                    type: 'raster-dem',
                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
                    tileSize: 256
                }
            },
            layers: [
                {
                    id: 'color-relief',
                    type: 'color-relief',
                    source: 'terrainSource',
                    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)'
                        ]
                    }
                }
            ]
        },
        maxZoom: 18,
        maxPitch: 85
    });
</script>

</body>
</html>