Mapbox + Turf.js + HexgridHeatmap

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

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var rbush = require('rbush');
var turf = {
    center: require('@turf/center'),
    hexGrid: require('@turf/hex-grid'),
    destination: require('@turf/destination'),
    distance: require('@turf/distance'),
};
/** 
 * Creates a hexgrid-based vector heatmap on the specified map.
 * @constructor
 * @param {Map} map - The map object that this heatmap should add itself to and track.
 * @param {string} [layername=hexgrid-heatmap] - The layer name to use for the heatmap.
 * @param {string} [addBefore] - Name of a layer to insert this heatmap underneath.
 */
function HexgridHeatmap(map, layername, addBefore) {
    if(layername === undefined) layername = "hexgrid-heatmap";
    this.map = map;
    this.layername = layername;
    this._setupLayers(layername, addBefore);
    this._setupEvents();
    // Set up an R-tree to look for coordinates as they are stored in GeoJSON Feature objects
    this._tree = rbush(9,['["geometry"]["coordinates"][0]','["geometry"]["coordinates"][1]','["geometry"]["coordinates"][0]','["geometry"]["coordinates"][1]']);

    this._intensity = 8;
    this._spread = 0.1;
    this._minCellIntensity = 0; // Drop out cells that have less than this intensity
    this._maxPointIntensity = 20; // Don't let a single point have a greater weight than this
    this._cellDensity = 1;

    var thisthis = this;
    this._checkUpdateCompleteClosure = function(e) { thisthis._checkUpdateComplete(e); }
    this._calculatingGrid = false;
    this._recalcWhenReady =...