sunng87 / heatcanvas

Pixel based heatmap with html5 canvas.

Hi there 👋

You may want to checkout my projects:

Sunng87's Clojure Armory

• slacker and slacker-cluster: Clojure based RPC framework
• diehard Resillience library: retry, circuit breaker, rate limit, etc.
• stavka Configuration manager
• ring-jetty9-adapter An enhanced jetty adapter for Ring, with http/2 and websocket support built-in
• link Thin Netty wrapper for Clojure
• rigui Timing-wheels based timer for clojure

Rust Projects

• handlebars-rust Template engine for Rust, using the handlebars template lanaguage
• metriki Dropwizard metrics ported to Rust
• cargo-release cargo release
• rustmann riemann client in Rust and Tokio
• geohash geohash implemented in Rust
• pgwire Postgres wire protocol implemented as a rust library

Sponse me

• Liberapay
• Github Sponsor

---

heatcanvas's Issues

SECURITY_ERR: DOM Exception 18

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.

Assign a fixed color to a value and keep a good representation when markers are close to each other

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.

Thoughts on WebGL Heatmaps?

This seems incredibly fast:

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

Black to Transparent Background

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

Speed up canvas rendering using putImageData

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.

Uncaught TypeError: Cannot read property '_leaflet_id' of undefined(…)

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

How to refresh layer with Leaflet/OSM

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?

Uncaught Error: The provided object is not a Layer. with leaflet 1.3.1

 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.

Where are docs?

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

Add path detector to load worker js

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

missing script webpack!!

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?

Leaflet demo isn't working

Heatmap.leaflet ignores layer controls

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)

Publish to NPM

Would be great to see this in NPM

Component.json

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

baidu地图的demo问题

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

Heatmap PNG's don't resize with zoom

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.

Why is the rest of the map darkened?

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.

Issue when using in Bootstrap modals

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?

Demo not working anymore (?)

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

Incorrect use of variable in Leaflet extension

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.