Canvas heatmap

[aashish24]

No description provided.

[aashish24]

I am still working on it. This is my todo list:

• Squash commits
• Look at performance issues
• Check on documentation

[jbeezley]

Out of curiosity, is there a reason we wouldn't just use a standalone library for this? For example, heatcanvas has a similar implementation conceptually, but it also supports web workers and dynamically updating the heatmap.

[aashish24]

Out of curiosity, is there a reason we wouldn't just use a standalone library for this? For example, heatcanvas has a similar implementation conceptually,

We looked into various heatmap implementations out there (I have to check the link you have poster though) and found various sort of issues (in-correct rendering, api mis-match) etc (I don't remember all the details but @dcjohnston might have it documented somewhere). The code is small enough that @dcjohnston and I didn't feel need to use the third party library.

[aashish24]

Its ready for review / suggestions.

[jbeezley]

I added a commit to improve the performance. Even with this change though, I'm not sure the performance is good enough for this to be useful. Even with as few as 100 points the render call is exceeding the animation frame budget. At 9,000 points I'm getting about 12 fps.

I think for something like this to be useful in practice we need to debounce the render calls and apply css transforms to respond to navigation events. This is what is done in the standard leaflet example which handles 10,000 points without breaking a sweat.

[aashish24]

I added a commit to improve the performance. Even with this change though, I'm not sure the performance is good enough for this to be useful. Even with as few as 100 points the render call is exceeding the animation frame budget. At 9,000 points I'm getting about 12 fps.

@jbeezley yes performance certainly has be to be improved. The test data that @dcjohnston has (I don't have the number of points on top of my head) it is large and the performance is poor. The leaflet example you posted, @dcjohnston has looked into it.

debounce the render calls and apply css transforms to respond to navigation events

Applying css transformations would certainly be useful (but I believe will only work in panning though since for zoom events you would have to aggregate). Not sure about debouncing the render calls. Can you explain some more?

[aashish24]

On this note I have only looked into two of the three issues i posted above:

• Squash commits
• Look at performance issues
• Check on documentation

Since I don't have an exact date when @dcjohnston will pick it up on performance.

[aashish24]

The plugin is using simpleheat under the hood (https://github.com/mourner/simpleheat) which we have looked at as well (and have found some issues with it). On the performance note, we should be able to optimize the performance.

[jbeezley]

The example in this PR has 9,555 points.

You can apply scale transform to simulate zooming. Yes, it is not the same thing as rerendering, but it makes for an acceptable visual substitute. The behavior that leaflet exhibits is that all animated navigations (zoom and pan) are simulated by CSS transforms. Once the animation is finished the debounced call to rerender the canvas is made.

We can certainly improve the performance some, but as you can see from the screenshot below, the time spent is dominated by native canvas functions drawImage and getImageData, which we won't be able to optimize. My takeaway is that this kind of rendering cannot be done inside the animation loop.

[aashish24]

We can certainly improve the performance some, but as you can see from the screenshot below, the time spent is dominated by native canvas functions drawImage and getImageData, which we won't be able to optimize.

Yes, I agree.

Our ultimate goal is to use webgl for this since the performance there would be so much better (and I would like to target that sometime soon, we already have looked into it some). The canvas implementation was the first step in that direction (base class API etc, understanding the canvas performance).

[jbeezley]

geo.heatmapFeature

[aashish24]

Ref: #557 #559 #74

[aashish24]

@jbeezley fixed issues you have found. Also, reported the performance issue #559 here.

[jbeezley]

LGTM