Examples

Update a choropleth layer by zoom level

Using 2014 census data, display state or county population depending on zoom level.

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!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' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<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.10);
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>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
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>