Using d3 to create a density & value heatmap layer for leaflet

Question

I would like to implement a heatmap layer on top of a leaflet map with d3. I have around 2-3k datapoints.

My data is of the following format:

[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...]

Ideally I would like to toggle between a heatmap based on the values, as well as based on the density of points. I also need to be able to update the data dynamically. Visually I was aiming for something like this:

I know leaflet has a couple of heatmap plugins, neither of which seem very active. Heatmap.js comes closest to what I need. However, it seems unmaintained, the docs are inconsistent with the source code and it runs far too slow. I already use d3 extensively and would prefer to use that for the heatmap layer if possible.

There are one or two blocks floating around (e.g., this one) but I did not find one that worked. This comes closest to what I need. It still works with the latest leaflet version but ideally I would like to use gradual gradients (as in heatmap.js) instead of hexbins. I would also need to rewrite the way the code handles data and tweak some other bits (e.g., it plots density, not values).

Ideally I was hoping for a solution in the style of Mikes leaflet example. Any suggestions?

Update: I also found this leaflet wrapper for webgl-heatmap but it seems broken

Answer 1

If you're concerned by performances of the heatmap I would recommend you two options: Leaflet.heat and Google Maps JS API v3.

Recently I've been working with Leaflet heatmaps and after trying several ones like you I ended up with Leaflet.heat. The only reason of discarding the Google one was the license but it really performs good as well.

This is an example from the demo page with 10k points:

It is made by the same author of Leaflet and even if it's still a alpha/beta is quite stable on my tests. It is not mentioned in the official Leaflet plugins page and it took me a while to find it.

It is based on simpleheat and it creates an HTML5 canvas on top of Leaflet to draw the heat map: so bare in mind that it will work only IE9+ only.

It is pretty fast even to draw 1k points every frame from my tests.

The data format is an array of lat, long and value like the following:

[[lat, lon, value], [...], [...], ... ]

You can specify your own gradient passing it as an option on creation - it is a bit weird that the keys are actually the values but it works - just be careful with the 0:

{
  ...,
  gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'}
}

If you're looking instead more for an hexagonal shape style, just this morning I've found this on bl.ocks.org: there's an hexbin plugin for d3 that you may try to use in case.

The integration with Leaflet shouldn't been so bad: once created a layer on it you should be able to put your hexagons and fill them as an heat map (like in this example)

Answer 2

Another (leaflet) option is: webgl-heatmap-leaflet allowing one to scale up to hundreds of thousands of data points thanks to WebGL!