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.

Answer 1

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)

Answer 2

If there is somebody else still looking for a solution, I fixed it with implementing

map.on('resize', function () {
            map.invalidateSize();
        })

on my map instance. The error occured in my case because the screen resolution changed dynamically.