Update a choropleth layer by zoom level | Mapbox GL JS

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.

JavaScript

React

JavaScript

React


<!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>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

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(() => {
    // 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: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/light-v11',
      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
          }
        },
        'road-label-simple' // Add layer below labels
      );

      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
          }
        },
        'road-label-simple' // Add layer below labels
      );
    });

    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 (
    <>
      <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>

      <div id="state-legend" className="legend" style={legendStyle}>
        <h4 style={legendHeadingStyle}>Population</h4>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#723122' }}
          ></span>
          25,000,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#8b4225' }}
          ></span>
          10,000,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#a25626' }}
          ></span>
          7,500,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#b86b25' }}
          ></span>
          5,000,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#ca8323' }}
          ></span>
          2,500,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#da9c20' }}
          ></span>
          1,000,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#e6b71e' }}
          ></span>
          750,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#eed322' }}
          ></span>
          500,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#f2f12d' }}
          ></span>
          0
        </div>
      </div>

      <div
        id="county-legend"
        className="legend"
        style={{ ...legendStyle, display: 'none' }}
      >
        <h4 style={legendHeadingStyle}>Population</h4>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#723122' }}
          ></span>
          1,000,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#8b4225' }}
          ></span>
          500,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#a25626' }}
          ></span>
          100,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#b86b25' }}
          ></span>
          50,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#ca8323' }}
          ></span>
          10,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#da9c20' }}
          ></span>
          5,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#e6b71e' }}
          ></span>
          1,000
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#eed322' }}
          ></span>
          100
        </div>
        <div>
          <span
            style={{ ...legendSpanStyle, backgroundColor: '#f2f12d' }}
          ></span>
          0
        </div>
      </div>
    </>
  );
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？