Subnational Population Map

by Jklein

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css">
<div id="map"></div>

<div class="map-overlay" id="features">
  <h2></h2>
  <div id="pd">
    <p></p>
  </div>
</div>

<div id="country-legend" class="legend">
  <h4>Population</h4>
  <div><span style="background-color: #800026"></span>1,000,000,000</div>
  <div><span style="background-color: #8b4225"></span>250,000,000</div>
  <div><span style="background-color: #da9c20"></span>100,000,000</div>
  <div><span style="background-color: #e6b71e"></span>50,000,000</div>
  <div><span style="background-color: #eed322"></span>10,000,000</div>
  <div><span style="background-color: #f2f12d"></span>0</div>
</div>

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

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

CSS

body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

p {
  margin: 10px;
}

.map-overlay {
  position: absolute;
  top: 30px;
  right: 10px;
  background: #fff;
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.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;
}

JavaScript

// define access token
mapboxgl.accessToken = 'pk.eyJ1IjoiamtsZWluMjkiLCJhIjoiY2w3MG15MngwMDh1NjNvcDh3amsxcXBlMyJ9.Cc7SM02LSwECCKyZPNFHJQ';

// create map
const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/light-v10', // map style URL from Mapbox Studio
  center: [-98, 38.88],
  minZoom: 1,
  zoom: 1
});

const zoomThreshold1 = 3;
const zoomThreshold2 = 5.5;

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('country', {
    'type': 'vector',
    'url': 'mapbox://jklein29.dltba8rj'
  });

  map.addLayer({
      'id': 'country-layer',
      'source': 'country',
      'source-layer': 'countries-7xb421',
      'maxzoom': zoomThreshold1,
      'type': 'fill',
      'paint': {
        'fill-color': [
          'interpolate',
          ['linear'],
          ['get', 'pop'],
          0,
          '#F2F12D',
          10000000,
          '#EED322',
          50000000,
          '#e6b71e',
          100000000,
          '#da9c20',
          250000000,
          '#8b4225',
          1000000000,
          '#800026'
        ],
        'fill-opacity': 0.75
      }
    },
    'waterway-label'
  );

  map.addSource('adm1', {
    'type': 'vector',
    'url': 'mapbox://jklein29.26x2sfug'
  });

  map.addLayer({
      'id': 'adm1-layer',
      'source': 'adm1',
      'source-layer': 'adm1-coru88',
      'minzoom': zoomThreshold1,
      'maxzoom': zoomThreshold2,
      'type': 'fill',
      'paint': {
       ...