All docsMapbox GL JSExamplesUpdate a choropleth layer by zoom level

Update a choropleth layer by zoom level

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.

<!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/v2.1.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/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 access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-98, 38.88],
minZoom: 3,
zoom: 3
});
var zoomThreshold = 4;
map.on('load', function () {
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',
'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
}
},
'waterway-label'
);
map.addLayer(
{
'id': 'county-population',
'source': 'population',
'source-layer': 'state_county_population_2014_cen',
'minzoom': zoomThreshold,
'type': 'fill',
'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
}
},
'waterway-label'
);
});
var stateLegendEl = document.getElementById('state-legend');
var countyLegendEl = document.getElementById('county-legend');
map.on('zoom', function () {
if (map.getZoom() > zoomThreshold) {
stateLegendEl.style.display = 'none';
countyLegendEl.style.display = 'block';
} else {
stateLegendEl.style.display = 'block';
countyLegendEl.style.display = 'none';
}
});
</script>
</body>
</html>