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 (eg, 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 (eg, 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

另一个（传单）选项是： webgl-heatmap-leaflet ，借助WebGL，可以扩展到数十万个数据点！

Answer 3

I know this question is pretty old but i have been looking into kind of the same question and came across a few things:

This looks like a nice tutorial: http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps

Here is a link to tnightingales code (which you referenced) but as a working block: http://bl.ocks.org/tnightingale/4668062

Here is a dynamic hexbin example from Bostock: http://bl.ocks.org/mbostock/7833311

And finally here is an example again from Bostock using both size and colour as dynamic variables: http://bl.ocks.org/mbostock/4330486

I hope this helps someone looking into the same questions.