Mapbox: Make a choropleth map

by ow3n

HTML

<script src='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />

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

CSS

body {
  margin: 0;
  padding: 0;
}

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

h3 {
  font-size: 1em;
}

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

/**
* Create a position for the map
* on the page */
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 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: 150px;
  margin-bottom: 40px;
  width: 100px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

JavaScript

// tutorial: https://www.mapbox.com/help/choropleth-studio-gl-pt-1/

mapboxgl.accessToken = 'pk.eyJ1Ijoib3dlbm11bmR5IiwiYSI6ImNpd3o4M3dvejAxMHkyeW1neTQxMzlxamkifQ.mRigBfiIBYYqOMAftwkvbQ';
var map = new mapboxgl.Map({
  container: 'map', // container id,
  //style: 'mapbox://styles/owenmundy/ciwz8bf2600262qsdbhtbxn1k',
  //style: 'mapbox://styles/mapbox/light-v9',
  style: 'mapbox://styles/owenmundy/cixhzwpjv007z2qmu4s4alj4w',
  center: [-80.84312, 35.227085],
  zoom: 5
});

map.on('load', function() {
  var layers = ['less_than_10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
  
  layers.forEach(function(layer) {
    var color = map.getPaintProperty(layer, 'fill-color');
    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.on('mousemove', function(e) {
  var states = map.queryRenderedFeatures(e.point, {
    layers: layers
  });



  if (states.length > 0) {
  
  	console.log(states[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>';
  } else {
    document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
  }
});

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

});