Skip to main content

Update a choropleth layer by zoom level

Additional Developer Resources

This map uses 2014 U.S. Census data to create two layers. One layer contains a choropleth visualization for state populations, and one layer contains a choropleth visualization for county populations.

The example defines a zoom level at which each layer and its respective legend should appear or disappear using the minzoom and maxzoom layer properties.

You can use getZoom to use zoom values to control the appearance of other elements.

Use a custom tileset

This example uses 2014 U.S. Census data that was uploaded to Mapbox as a vector tileset. This data is not updated or maintained and **should not be used in production applications.**If you're interested in creating an application that uses U.S. Census data, you can download a Shapefile from census.gov's data portal and upload it to Mapbox Studio's Tilesets page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Update a choropleth layer by 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.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    .legend {
        background-color: #fff;
        border-radius: 3px;
        bottom: 30px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        padding: 10px;
        position: absolute;
        right: 10px;
        z-index: 1;
    }

    .legend h4 {
        margin: 0 0 10px;
    }

    .legend div span {
        border-radius: 50%;
        display: inline-block;
        height: 10px;
        margin-right: 5px;
        width: 10px;
    }
</style>

<div id="map"></div>

<div id="state-legend" class="legend">
    <h4>Population</h4>
    <div><span style="background-color: #723122"></span>25,000,000</div>
    <div><span style="background-color: #8b4225"></span>10,000,000</div>
    <div><span style="background-color: #a25626"></span>7,500,000</div>
    <div><span style="background-color: #b86b25"></span>5,000,000</div>
    <div><span style="background-color: #ca8323"></span>2,500,000</div>
    <div><span style="background-color: #da9c20"></span>1,000,000</div>
    <div><span style="background-color: #e6b71e"></span>750,000</div>
    <div><span style="background-color: #eed322"></span>500,000</div>
    <div><span style="background-color: #f2f12d"></span>0</div>
</div>

<div id="county-legend" class="legend" style="display: none">
    <h4>Population</h4>
    <div><span style="background-color: #723122"></span>1,000,000</div>
    <div><span style="background-color: #8b4225"></span>500,000</div>
    <div><span style="background-color: #a25626"></span>100,000</div>
    <div><span style="background-color: #b86b25"></span>50,000</div>
    <div><span style="background-color: #ca8323"></span>10,000</div>
    <div><span style="background-color: #da9c20"></span>5,000</div>
    <div><span style="background-color: #e6b71e"></span>1,000</div>
    <div><span style="background-color: #eed322"></span>100</div>
    <div><span style="background-color: #f2f12d"></span>0</div>
</div>

<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',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/light-v11',
        center: [-98, 38.88],
        minZoom: 2,
        zoom: 3
    });

    const zoomThreshold = 4;

    map.on('load', () => {
        // Add a custom vector tileset source. The tileset used in
        // this example contains a feature for every state and
        // county in the U.S.
        // Each state contains four properties. For example:
        //     {
        //         isState: true,
        //         name: "Wyoming",
        //         population: 584153,
        //         state: 56
        //     }
        // Each county contains four properties. For example:
        //     {
        //         county: 16049,
        //         isCounty: true,
        //         name: "Idaho County",
        //         population: 16315
        //     }
        map.addSource('population', {
            'type': 'vector',
            'url': 'mapbox://mapbox.660ui7x6'
        });

        map.addLayer(
            {
                'id': 'state-population',
                'source': 'population',
                'source-layer': 'state_county_population_2014_cen',
                'maxzoom': zoomThreshold,
                'type': 'fill',
                // only include features for which the "isState"
                // property is "true"
                'filter': ['==', 'isState', true],
                'paint': {
                    'fill-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'population'],
                        0,
                        '#F2F12D',
                        500000,
                        '#EED322',
                        750000,
                        '#E6B71E',
                        1000000,
                        '#DA9C20',
                        2500000,
                        '#CA8323',
                        5000000,
                        '#B86B25',
                        7500000,
                        '#A25626',
                        10000000,
                        '#8B4225',
                        25000000,
                        '#723122'
                    ],
                    'fill-opacity': 0.75
                }
            },
            'road-label-simple' // Add layer below labels
        );

        map.addLayer(
            {
                'id': 'county-population',
                'source': 'population',
                'source-layer': 'state_county_population_2014_cen',
                'minzoom': zoomThreshold,
                'type': 'fill',
                // only include features for which the "isCounty"
                // property is "true"
                'filter': ['==', 'isCounty', true],
                'paint': {
                    'fill-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'population'],
                        0,
                        '#F2F12D',
                        100,
                        '#EED322',
                        1000,
                        '#E6B71E',
                        5000,
                        '#DA9C20',
                        10000,
                        '#CA8323',
                        50000,
                        '#B86B25',
                        100000,
                        '#A25626',
                        500000,
                        '#8B4225',
                        1000000,
                        '#723122'
                    ],
                    'fill-opacity': 0.75
                }
            },
            'road-label-simple' // Add layer below labels
        );
    });

    const stateLegendEl = document.getElementById('state-legend');
    const countyLegendEl = document.getElementById('county-legend');
    map.on('zoom', () => {
        if (map.getZoom() > zoomThreshold) {
            stateLegendEl.style.display = 'none';
            countyLegendEl.style.display = 'block';
        } else {
            stateLegendEl.style.display = 'block';
            countyLegendEl.style.display = 'none';
        }
    });
</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.
Additional Developer Resources
Was this example helpful?