Mapbox + Turf.js Hexgrid

by Sarah Godoshian

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css">
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<div id='map' style='width: 400px; height: 300px;'></div>

JavaScript

var params = {
  center: [-87.9, 41.9],
	//radius: 100,
	exclude: [],
  zoom: 7,
  usaBounds: [
    [-124.848974, 24.396308], // Southwest coordinates
    [-66.885444, 49.384358] // Northeast coordinates
  ],
};
mapboxgl.accessToken = 'pk.eyJ1IjoiY2NoYW5nc2EiLCJhIjoiY2lqeXU3dGo1MjY1ZXZibHp5cHF2a3Q1ZyJ9.8q-mw77HsgkdqrUHdi-XUg';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9', // mapbox://styles/cchangsa/cj0yfi03700ew2rntzjfvgjoj?optimize=true
    center: params.center,
  	zoom: params.zoom,
});
var bboxExample = [-96, 31, -84, 40];
var bboxCollection = [-88.3392668, 41.6896274, -87.5851903, 42.3900772];
var bboxMarket = [-87.901611328125, 41.50034959128928, -87.528076171875, 42.30169032824449];
var cellSide = 1;
var options = {
	units: 'miles',
  properties: {
  	count: 100
  }
};

var hexgrid = turf.hexGrid(bboxCollection, cellSide, options);

map.on('load', function() {
	map.addLayer({
    'id': 'heatmap',
    'type': 'fill',
    'source': {
      type: 'geojson',
      data: hexgrid
    },
    'paint': {
      'fill-opacity': 1.0,
      'fill-color': {
        property: 'count',
        stops: [
          // Short rainbow blue
          [0, "rgba(0,185,243,0)"],
          [50, "rgba(0,185,243,0.24)"],
          [130, "rgba(255,223,0,0.3)"],
          [200, "rgba(255,105,0,0.3)"],
        ]
      }
    }
  });
});