> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt) # 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`](https://docs.mapbox.com/style-spec/reference/layers/#minzoom) and [`maxzoom`](https://docs.mapbox.com/style-spec/reference/layers/#maxzoom) layer properties. You can use [`getZoom`](https://docs.mapbox.com/mapbox-gl-js/ja/api/map/#map#getzoom) to use zoom values to control the appearance of other elements. > **Note: 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](https://www.census.gov/geographies/mapping-files/time-series/geo/cartographic-boundary.html) and upload it to Mapbox Studio's [Tilesets page](https://console.mapbox.com/studio/tilesets/). > Example code: **JavaScript** ```html Update a choropleth layer by zoom level

Population

25,000,000
10,000,000
7,500,000
5,000,000
2,500,000
1,000,000
750,000
500,000
0
``` **React** ```jsx import React, { useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const legendStyle = { backgroundColor: '#fff', borderRadius: '3px', bottom: '30px', boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', font: "12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif", padding: '10px', position: 'absolute', right: '10px', zIndex: 1 }; const legendHeadingStyle = { margin: '0 0 10px' }; const legendSpanStyle = { borderRadius: '50%', display: 'inline-block', height: '10px', marginRight: '5px', width: '10px' }; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); useEffect(() => { mapRef.current = new mapboxgl.Map({ // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', container: mapContainerRef.current, style: 'mapbox://styles/mapbox/standard', config: { basemap: { theme: 'monochrome' } }, center: [-98, 38.88], minZoom: 2, zoom: 3 }); const zoomThreshold = 4; mapRef.current.on('load', () => { mapRef.current.addSource('population', { type: 'vector', url: 'mapbox://mapbox.660ui7x6' }); mapRef.current.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 }, slot: 'bottom' // bottom slot in Mapbox Standard style }); mapRef.current.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 }, slot: 'middle' // middle slot in Mapbox Standard style }); }); const stateLegendEl = document.getElementById('state-legend'); const countyLegendEl = document.getElementById('county-legend'); mapRef.current.on('zoom', () => { if (mapRef.current.getZoom() > zoomThreshold) { stateLegendEl.style.display = 'none'; countyLegendEl.style.display = 'block'; } else { stateLegendEl.style.display = 'block'; countyLegendEl.style.display = 'none'; } }); }, []); return ( <>

Population

25,000,000
10,000,000
7,500,000
5,000,000
2,500,000
1,000,000
750,000
500,000
0

Population

1,000,000
500,000
100,000
50,000
10,000
5,000
1,000
100
0
); }; export default MapboxExample; ```