color-switcher | Goong Documents

Use setPaintProperty to change a layer's fill color.
Change a layer's color with buttons
Select layer
Choose a color

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change a layer's color with buttons</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>

<style>
    .map-overlay {
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
</style>

<div id="map"></div>
<div class="map-overlay top">
    <div class="map-overlay-inner">
        <fieldset>
            <label>Select layer</label>
            <select id="layer" name="layer">
                <option value="water">Water</option>
                <option value="buildings">Buildings</option>
            </select>
        </fieldset>
        <fieldset>
            <label>Choose a color</label>
            <div id="swatches"></div>
        </fieldset>
    </div>
</div>

<script>
    goongjs.accessToken = 'wnicbAmnNkoMHNYUKWnlFHezV189FjmMwkNJ7hKW';
    var map = new goongjs.Map({
        container: 'map',
        style: 'https://tiles.goong.io/assets/goong_map_web.json',
        center: [105.81285, 21.03215],
        zoom: 15.4
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'buildings',
            'source': 'composite',
            'source-layer': 'VN_Building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',

                // use an 'interpolate' expression to add a smooth transition effect to the
                // buildings as the user zooms in
                'fill-extrusion-height': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    15,
                    0,
                    15.05,
                    ['get', 'height']
                ],
                'fill-extrusion-base': [
                    'interpolate',
                    ['linear'],
                    ['zoom'],
                    15,
                    0,
                    15.05,
                    ['get', 'min_height']
                ],
                'fill-extrusion-opacity': 0.6
            }
        });
    });

    var swatches = document.getElementById('swatches');
    var layer = document.getElementById('layer');
    var colors = [
        '#ffffcc',
        '#a1dab4',
        '#41b6c4',
        '#2c7fb8',
        '#253494',
        '#fed976',
        '#feb24c',
        '#fd8d3c',
        '#f03b20',
        '#bd0026'
    ];

    colors.forEach(function (color) {
        var swatch = document.createElement('button');
        swatch.style.backgroundColor = color;
        swatch.addEventListener('click', function () {
            if (layer.value === 'buildings') {
                map.setPaintProperty(
                    layer.value,
                    'fill-extrusion-color',
                    color
                );
            } else {
                map.setPaintProperty(layer.value, 'fill-color', color);
            }
        });
        swatches.appendChild(swatch);
    });
</script>
</body>
</html>