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.

JavaScript

React

JavaScript

React


<!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.9.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.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>

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = 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
    });

    mapRef.current.on('load', () => {
      mapRef.current.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'
      ]);

      mapRef.current.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', () => {
      mapRef.current.zoomTo(18, { duration: 9000 });
    });
  }, []);

  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <div
        id="map"
        ref={mapContainerRef}
        style={{
          position: 'relative',
          height: '100%',
          top: 0,
          bottom: 0,
          width: '100%'
        }}
      ></div>
      <button
        id="zoom"
        style={{
          display: 'block',
          position: 'absolute',
          top: '20px',
          left: 'calc(50% - 25%)',
          width: '50%',
          height: '40px',
          padding: '10px',
          border: 'none',
          borderRadius: '3px',
          fontSize: '12px',
          textAlign: 'center',
          color: '#fff',
          background: '#ee8a65'
        }}
      >
        Zoom to buildings
      </button>
    </div>
  );
};

export default MapboxExample;

This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.

Additional Developer Resources

Mapbox Developer Discord

Developer Cheatsheet

Mapbox Support

Ask AI

Was this example helpful?