Exception on certain map state changes

[Nithanaroy]

Message: "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0."

Stack trace:

"Error: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
    at Error (native)
    at Object.draw (http://0.0.0.0:8126/js/leaflet-heat/leaflet-heat.js:6:1414)
    at e._redraw (http://0.0.0.0:8126/js/leaflet-heat/leaflet-heat.js:11:2802)
    at e._reset (http://0.0.0.0:8126/js/leaflet-heat/leaflet-heat.js:11:1864)
    at e.fireEvent (http://0.0.0.0:8126/node_modules/leaflet/dist/leaflet.js:6:5055)
    at http://0.0.0.0:8126/node_modules/leaflet/dist/leaflet.js:6:513"

Local Variables

[Bengreen]

I get a similar case as when I create my maps they are of 0 size. And then get resized later in the lifecycle. Is it possible to put some guards around the getImageData call when the width or height are 0 otherwise we trigger a throw.

[kojilab]

Did you guys figure it out? I'm running into the same issue.

[mirko77]

Same issue here

[KonstantinosPetrakis]

One way to fix that is to add the initialization code in an interaction observer like this:

new IntersectionObserver(() => {
    map.invalidateSize();

    var heat = L.heatLayer(
        [
            [50.5, 30.5, 0.2], // lat, lng, intensity
            [50.6, 30.4, 0.5],
        ],
        { radius: 25 }
    ).addTo(map);
}).observe(document.getElementById(mapId));

Or even better create the whole map inside the IntersectionObserver callback, because this might add many layers one on top of the other.

[UniCaLaore]

Same issue