Change building color based on zoom level | Mapbox GL JS

This example creates a customized map experience by changing the colors and opacity of buildings as the map is zoomed in.

It uses the setPaintProperty() method with the interpolate expression to gradually change the fill-color of the building layer from beige to yellow and increase the fill-opacity as the zoom level increases. This example ties the zoom behavior to a button click, but your implementation could use a different trigger.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Change building color based on zoom level</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    #zoom {
        display: block;
        position: relative;
        margin: 20px auto;
        width: 50%;
        height: 40px;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #ee8a65;
    }
</style>
<div id="map"></div>
<button id="zoom">Zoom to buildings</button>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [-90.73414, 14.55524], // starting position [lng, lat]
        zoom: 15 // starting zoom
    });

    map.on('load', () => {
        map.setPaintProperty('building', 'fill-color', [
            'interpolate',
            // Set the exponential rate of change to 0.5
            ['exponential', 0.5],
            ['zoom'],
            // When zoom is 15, buildings will be beige.
            15,
            '#D9D3C9',
            // When zoom is 18 or higher, buildings will be yellow.
            18,
            '#ffd700'
        ]);

        map.setPaintProperty('building', 'fill-opacity', [
            'interpolate',
            // Set the exponential rate of change to 0.5
            ['exponential', 0.5],
            ['zoom'],
            // When zoom is 10, buildings will be 100% transparent.
            10,
            0.5,
            // When zoom is 18 or higher, buildings will be 100% opaque.
            18,
            1
        ]);
    });

    // When the button is clicked, zoom in to zoom level 19.
    // The animation duration is 9000 milliseconds.
    document.getElementById('zoom').addEventListener('click', () => {
        map.zoomTo(18, { duration: 9000 });
    });
</script>

</body>
</html>

Was this example helpful?