Mapbox choropleth

US population density

Hover over a state!

Mapbox choropleth example.

This page's Mapbox choropleth example.

Tags: mapbox

Copy

var key = 'Your Mapbox access token from http://mapbox.com/ here';
mapboxgl.accessToken = key;

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/egaoneko/cjdelce5t09nd2rnw8qpm8gu3',
});

map.on('load', function () {
  var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
  var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
  var legend = document.getElementById('legend');

for (var i = 0; i < layers.length; i++) {
 var layer = layers[i];
 var color = colors[i];
 var item = document.createElement('div');
 var key = document.createElement('span');
 key.className = 'legend-key';
 key.style.backgroundColor = color;

var value = document.createElement('span');
    value.innerHTML = layer;
    item.appendChild(key);
    item.appendChild(value);
    legend.appendChild(item);
  }

map.getCanvas().style.cursor = 'default';
  map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
});

map.on('mousemove', function (e) {
  var states = map.queryRenderedFeatures(e.point, {
    layers: ['statedata-22dikt']
  });

if (states.length > 0) {
 document.getElementById('pd').innerHTML = '<h3>' +
 states[0].properties.name + '</h3>' +
 states[0].properties.density + ' people per square mile';
 map.getCanvas().style.cursor = 'pointer';
 } else {
 document.getElementById('pd').innerHTML = 'Hover over a state!';
 map.getCanvas().style.cursor = 'default';
 }
});

<!DOCTYPE html>
<html>
  <head>
    <title>Mapbox choropleth</title>
    <link rel="stylesheet" href="http://www.3daysofprogramming.com/playground/pg.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Map,Set,Promise"></script>
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css">
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js"></script>
    <style>
      #container {
        position: relative;
      }

      #container h2,
      #container h3 {
        margin: 10px;
        font-size: 1.2em;
      }

      #container h3 {
        font-size: 1em;
      }

      #container p {
        font-size: 0.85em;
        margin: 10px;
        text-align: left;
      }

      /**
        * Create a position for the map
        * on the page */
      #map {
        width: 100%;
        height: 100%;
      }

      /**
        * Set rules for how the map overlays
        * (info box and legend) will be displayed
        * on the page. */

      .map-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.8);
        margin-right: 20px;
        font-family: Arial, sans-serif;
        overflow: auto;
        border-radius: 3px;
      }

      #features {
        top: 0;
        height: 100px;
        margin-top: 20px;
        width: 250px;
      }

      #legend {
        padding: 10px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        line-height: 18px;
        height: 170px;
        margin-bottom: 40px;
        width: 120px;
      }

      .legend-key {
        display: inline-block;
        border-radius: 20%;
        width: 10px;
        height: 10px;
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container" class="main">
      <div id="map"></div>
      <div class='map-overlay' id='features'><h2>US population density</h2><div id='pd'><p>Hover over a state!</p></div></div>
      <div class='map-overlay' id='legend'></div>
    </div>
    <script>
      var key = 'Your Mapbox access token from http://mapbox.com/ here';
      mapboxgl.accessToken = key;

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/egaoneko/cjdelce5t09nd2rnw8qpm8gu3',
      });

      map.on('load', function () {
        var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
        var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
        var legend = document.getElementById('legend');

        for (var i = 0; i < layers.length; i++) {
          var layer = layers[i];
          var color = colors[i];
          var item = document.createElement('div');
          var key = document.createElement('span');
          key.className = 'legend-key';
          key.style.backgroundColor = color;

          var value = document.createElement('span');
          value.innerHTML = layer;
          item.appendChild(key);
          item.appendChild(value);
          legend.appendChild(item);
        }

        map.getCanvas().style.cursor = 'default';
        map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
      });

      map.on('mousemove', function (e) {
        var states = map.queryRenderedFeatures(e.point, {
          layers: ['statedata-22dikt']
        });

        if (states.length > 0) {
          document.getElementById('pd').innerHTML = '<h3><strong>' +
            states[0].properties.name + '</strong></h3><p><strong><em>' +
            states[0].properties.density + '</strong> people per square mile</em></p>';
          map.getCanvas().style.cursor = 'pointer';
        } else {
          document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
          map.getCanvas().style.cursor = 'default';
        }
      });
    </script>
  </body>
</html>