No silver bullet, but a bunch of techniques.

• be cache friendly
• be processor branch predictor friendly
• less memory allocations
• don't compute unnecessary
• use effective functions
• something else?

Be cache friendly

Processors do not like cache misses. Try to organize data in proper way. During rendering we need them to go row by row -- let's fill them such a way: outer cycles go by rows (y), inner cycles -- by columns (x).

Less memory allocations

Object-based value allocated memory regularly (if (data[pos]) ... else data[pos] = v;). Computing large heatmap turned out to be not really a computing, but a memory allocation (and garbage collection!). Replace object with once-allocated array.

Be branch predictor friendly

Try to use as few conditional operators as you can.

• check borders once, and use highly optimized function, that doesn't check borders. Leave complicated checks for circles that cross image border.
• allocate all memory once, fill it with zeroes, get rid of if (data[pos]) data[pos] += v; else data[pos] = v;
• use array, not an object for values. It's less memory effective for "empty" heatmaps, especially on large screens, but it speeds up well-filled heatmaps dramatically.
• compute loop ranges as precise, as possible.

Don't compute unnecessary

• don't compute if (dx^2 + dy ^2 < radius ^2). Compute correct range for each scanline. ~1/4 inner iterations less.
• circles are supersymmetric, compute weight once, use it for 8 points! -- 8 times less Math.pow(dist, degree) computations!
• don't cross borders :)
• compute main offsets, alter them with ++ or +=; Sorry, less semantic, but more efficient than data[x + y * params.width] :(

Use effective functions

Math.min, and Math.max are more semantic, but if (x < min) min = x and ternary operator are much, much more effective. Replace "for in" with "for" in rendering. ~400 ms -> 60-80 ms. Just a price, i pay for serializing / deserializing heatmap data to communicate with worker.

Something, i forgot?

All these and previous optimizations allowed me to speed my heatmaps (15K points, with high peaks) up by 10-12 times. Now it takes ~1 second including data transfer to and from worker.

Hi! I enjoyed using ancient version your plugin with ancient LeafLet version (0.7) for many years. But when i tried to migrate to actual versions of both plugin and Leaflet, it turned out they fail with several errors.

I spent some time debugging, and made it work.

Hope, this fixes issue #34, and probably even #27, and #32

Serge.

In my app I have something like this

App.markerLayer = new L.MarkerClusterGroup();
App.heatmapLayer = new L.TileLayer.HeatCanvas({
  map: App.map
});
.....
App.map.addLayer(App.markerLayer);
App.map.addLayer(App.heatmapLayer);
var mapLayers = {
  "Markers": App.markerLayer,
  "Heatmap": App.heatmapLayer
};
L.control.layers(mapLayers).addTo(App.map);

This adds both the marker layer and heatmap layer to the layer controls which show as radio buttons. When switching to only the Marker layer, the heatmap layer does not disappear (i.e there is no show/hide facility with it)

Hi all! I've clicked on the demo link in the README but it's not working anymore. Are you aware of that?

http://sunng87.github.com/heatcanvas

I was just interested in add an operational demo link from this page:

https://leafletjs.com/plugins.html

Thank you so much for your work on this plugin! :)

The HeatMap looks great, but when placed over a base layer it significantly darkens the map such that it's difficult to see what's going on underneath. I'm using the default opacity of 0.6.

It seems like the Heatmap.Canvas is writing black for all the places that don't have data. Is that accurate? Is there a way to turn that off?

Thanks.

I was trying to create a small example oh Heatcanvas using Leaflet, however I always get a "SECURITY_ERR: DOM Exception 18" on heatcanvas.js:37 when I try to add the heatmap layer to my map.

I used the exact same code as the Leaflet HeatCanvas demo. Anyone has any hints on what am I doing wrong?

I'm using Google Chrome v21. Thanks for any feedback.

Hi,

I had actually written something similar for one of my projects. Just wanted to pass on a suggestion based on what I had done.

Currently, you're rendering by calling context.fillRect() for each pixel. This can actually get quite slow. You might consider manipulating an ImageData directly. Call context.createImageData() to get an offscreen ImageData object. Then you can set pixels simply by setting rgba values in the data array. Finally, render the entire image back to the canvas using context.putImageData(). It generally turns out many, many times faster than the thousands of fillRect calls.

The downside is that you can't use the css-like syntax to set colors; you have to set raw rgba values numerically. But it may be a worthwhile trade-off.

Trying not to do the job, we don't really need. As soon as heatmap values are scaled to [0;1] segment to get color, we can use data[pos] / step instead of data[pos], and replace var v = data - params.step * Math.pow(dist, degree); with var v = data - Math.pow(dist, degree); in inner cycles;

Similarly, we can get rid of Math.sqrt in inner cycles, using squared distance, instead of distance and replacing Math.pow(dist, degree); with Math.pow(distSquared, degree / 2);

Sorry, i didn't perform isolated measurements for these changes.

Using palette replaces complex color-conversion computations during rendering with fast division, rounding and 1 index access.

512 values uniformly distributed between 0 and 1 produce, due to rounding, a palette with ~440 different colors. This seems to be good enough by itself, and can be increased, but 200K uniformly distributed values generate a palette with just ~940 colors. So, 512 seems to be a good constant.

Also fixes a couple of bugs (see commit comments). Minor optimization: terminate running worker, if we are sure, it was started with outdated source data.

This is the last preliminary pull request. The following will contain speed optimization. Which one to start with: simple rendering optimization or complicated computational one?

Vastly improve the Webpack build.

Add npm run webpack command.

Add documentation for Webpack to README.md

Split the different variant builds into separate webpack outputs.

Make the library components available at variables like HeatCanvas.

Fix a strict mode failure (Webpack implies "use strict";)

.gitignore node_modules/

Leaflet extension use a 'map' global variable, which works at demo page, but not real map. As a result, a following error occurs (from my Chromium JS console): Uncaught ReferenceError: map is not defined L.TileLayer.HeatCanvas.L.Class.extend.initialize heatcanvas-leaflet.js:27 NewClass leaflet-src.js:162

// Next part is my page callback (anonymous function) index.php:96 jQuery.Callbacks.fire jquery.js:1046 jQuery.Callbacks.self.fireWith jquery.js:1164 jQuery.extend.ready jquery.js:435 DOMContentLoaded

Hope it to be fixed soon. Thanks.

I'm trying to install heatcanvas but running npm run webpack gives an error missing script webpack

I tried to npm install webpack but that didn't resolve the earlier issue. Any idea?

 var heatmap = new L.TileLayer.HeatCanvas({}, {
        'step': 0.5,
        'degree': HeatCanvas.LINEAR,
        'opacity': 0.7
    });
// inside a loop
heatmap.pushData(a.coord.lat, a.coord.lon, a.main.temp);
//
map.addLayer(heatmap);

I have checked in console the heatmap object is there with the data and coordinates, when adding to map it gives the above error.

Hi, I have faced this problem with leaflet while using this plugin,Is there any way to fix it? thanks. here is error leaflet.js:5 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined(…)stamp @ leaflet.js:5_on @ leaflet.js:5on @ leaflet.js:5whenReady @ leaflet.js:6addLayer @ leaflet.js:6(anonymous function) @ sc.js:42i

sc.js:42 is this code

map.addLayer(heatmap);

thanks very much

Sunng87,

I really love your work with this heatcanvas. The results look fantastic on our maps. I have one thing I need a little help with:

Similar to https://github.com/sunng87/heatcanvas/issues/13, I really need to overlay your heat canvas over a map where its features are visible. We place other features on our maps, such as custom pins and polygons, that need to work in conjunction with the heatmap functionality.

We've had some success stemming from implementing the suggestions found in https://github.com/sunng87/heatcanvas/issues/13, but this is the best we've done:

What we need is something, that in the end, looks more like this:

(Please note, we took this from heatmap.js examples, which are also quite good. We just prefer your method for various reasons.) Please let us know if you can provide some guidance. Also, please not that we are a professional shop, so we do pay for custom work. If this will be a lot of your time, we would be willing to discuss compensation.

Sincerely,

Jim

How do I refresh my heatmap with new data in a Leaflet/OSM environment?

I can successfully build the map using: heatmap = new L.TileLayer.HeatCanvas...

and can load the map using: for (var i in MapData) { console.log('data'); heatmap.pushData(MapData[i][0], MapData[i][1], MapData[i][2]) }

My problem is I do not know how to clear the heatmap and load new data.

I have tried using heatmap.clear(), but this seems to have no effect as everytime I push data into the heatmap it simply adds to the existing data.

Does anyone know how to basically clear the data from a heatmap, load new data in, and redraw the map?