Leaflet & Heatmap.js - Failed to execute 'getImageData' on 'CanvasRenderingContext2D'

Question

I currently have a working leaflet map and would like to use the leaflet plugin Heatmap.js on top of this. http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

The code I am using is very similar to the example in the above link.

 var testData = {
                max: 8,
                data: [{lat: 24.6408, lng:46.7728, radius:500, count: 3}]
            };


 var cfg = {
                "radius": 2,
                "maxOpacity": 8,
                "scaleRadius": true,                    
                "useLocalExtrema": true,
                latField: 'lat',                 
                lngField: 'lng',
                valueField: 'count'
            };

var heatmapLayer = new HeatmapOverlay(cfg);

map.addLayer(heatmapLayer);

heatmapLayer.setData(testData);

When I run the map I don't see any sign of the heat map. Then when I pan around the map I get the following error in the console:

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

Any idea how to resolve this? The demo on the heatmap.js website works great with almost identical code.

Thanks!

EDIT:

I have found where the error may be orginating from. Line 316 in heatmap.js is:

this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,''));

Height is being returned as zero. Width is being set correctly however.

When I initialize the map I provide it with a layer which works fine. Is this what you mean? I don't have any BaseLayer property set in the map though. — illwalkwithyou
Ah, yeah; also, does your container have width and height set? — Ren P
Yes, the container has a height and width of 100%. As I mentioned the map has been working fine, I have been able to add markers, pan around and zoom without any issues. — illwalkwithyou
Do you have any nested divs? I got the code to run with just <div id="map-canvas"></div>. I pretty much just used the HTML from github.com/pa7/heatmap.js/blob/develop/examples/leaflet-heatmap/… — Ren P

illwalkwithyou illwalkwithyou · Accepted Answer · 2015-03-06T16:36:27

Found a solution. Turns out the map had not been fully initialized when I was adding the heatMapLayer to it. As a fix for now I have placed map.addLayer(heatmapLayer) inside a timeout function to ensure the map is fully loaded.

setTimeout(function(){
    map.addLayer(heatmapLayer);
},500)

Leaflet & Heatmap.js - Failed to execute 'getImageData' on 'CanvasRenderingContext2D'

2 Answers