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?

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 #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 #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

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! :)

我直接拷贝demo里面的代码来使用发现覆盖物没有办法正常显示,这是什么原因呢

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.

This seems incredibly fast:

http://codeflow.org/entries/2013/feb/04/high-performance-js-heatmaps/

Add a component.json to make heatcanvas available to install from bower

Will add a function to read the <script> tag where heatcanvas.js is loaded, then extract the absolute path for loading Worker js

On the Leaflet demo: http://sunng87.github.com/heatcanvas/leaflet.html

If you zoom in or out, the map data seems incorrect, because the PNGs cover more or less area. For example: at the initial zoom level, central-west America has no data, once zoomed out the data seems to span all of America, and zoomed in, it seems empty again.

There should be a way to resize the PNG appropriately once the map zoom level has changed.

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 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

I am rendering a map inside a Bootstrap modal. The map gets resized properly when the modal opens with map.invalidateSize() as suggested in https://stackoverflow.com/a/49441778/3113008

But the heatcanvas dissapears and then the map needs to be paned or zoomed in order to show the heatcanvas layer.

Anyone have any idea why this is happening?

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 modify settings such as background color, opacity, etc. Where are the docs located? I may have missed them but I don't see them.

thx

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?

Is there a way to assign a fixed color to a value, so it's not normalized to the current view, ie relative to all visible markers?
It seems that the more markers there are, which even don't have a high value, when they are close to each other, the area gets redder. I found markers by themselves having 100 being light blue and many next to each other from 34 - 80 being red.

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)

Would be great to see this in NPM

 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.

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.