Heatmap an alternative to clustering

[IanHopkinson]

Channeling the real Zarino, he was thinking of a heatmap instead of clustering:

http://www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html

[zarino]

Indeed, I encourage you to do some user testing and see whether your customers understand how marker clustering works. But my problem with it is that a map like this:

+----------+
|xxxxx     |
|xxxx      |
|xx      x |
|     xxxxx|
|    x xxxx|
|x    xxxxx|
+----------+

Suddenly gets clustered into a map like this:

+----------+
| 21       |
|          |
|          |
|          |
|       32 |
|x         |
+----------+

And even though the cluster markers have some number printed on them, the visual weight of the cluster is really misleading, especially when there are unclustered markers nearby.

You also have no idea how far the "cluster" reaches – is there a big blank gap between those two clusters, or do the boundaries really touch but the algorithm's just drawn an arbitrary watershed between the two?

To me, heatmaps solve both these problems. By taking crowded points and "stacking" them, rather than subsuming them into a nearby group, the crowd maintains its surface area. You can pick any particular grid square on the map and say instantly how many points are there, or very nearby (the nearness depends on the granularity of your heatmap). But the "hotspots" (ie: the points at which your cluster markers would originally have been drawn) are still instantly visible too.

[IanHopkinson]

I've implemented this in the heatmap branch,

[drj11]

We've been fiddling around trying to show both the clustered markers and the heatmap. So far the experiments suggest that if you simply enable both layers, the clustered marker layer basically obliterates the heatmap layer which is behind and you can't see any heatmap.

It's possible to fiddle with the CSS for the cluster-markers and reduce their opacity, and this could be worth investigating further. The relevant CSS selectors are .marker-cluster-small (and -medium and -large) for the outer bit of the circular cluster marker, and .marker-cluster-small div for the inner bit. Cranking all the opacities down looks a bit like this:

[drj11]

If we want a heatmap and markers, perhaps the simplest thing is to have a UI element (eg a 3-way selector) for choosing between single markers, clustered markers, and heatmap.