Canvas not redrawn unless zoom is changed with leaflet and heatmap.js

Question

I have a strange bug in my app using the heatmap.js plugin, and I'm not sure if the problem is in my code, in leaflet , or in the plugin.

I'm dynamically creating new heatmaps. So I want to erase the old one and trace a new one, which should be the default behavior of heatmpa.js. Surprisingly it doesn't erase the old one until I zoom out or in.

Here is some images to understand what happens:

Step 1 : click on a button to draw a heatmap around paris:

Result: as expected, a heatmap around Paris.

Step 2: click on a button to draw a heatmap in the east: Result: the second heatmap is added, but the one around paris isn't erased. (Error)

Step 3: click on the plus icon to zoom on the map Result: zoom as intended, and the heatmap around Paris disappear.

Here is the code of the setData function heatmap-leaflet, it replaces data and call redraw:

 setData: function ( dataset )
 {
    var self = this;
    var latLngs = [];
    this._maxValue = 0;
    dataset.forEach( function ( d )
    {
        latLngs.push( new L.LatLng( d.lat, d.lon ) );
        self._maxValue = Math.max( self._maxValue, d.value );
    } );
    this._bounds = new L.LatLngBounds( latLngs );

    this._quad = new QuadTree( this._boundsToQuery( this._bounds ), false, 6, 6 );

    dataset.forEach( function ( d )
    {
        self._quad.insert( {
            x: d.lon,
            y: d.lat,
            value: d.value
        } );
    } );

    this.redraw();
   }

My question

I would appreciate any advice on how to locate the problem. A soilution would be even better.

Answer 1

The problem is that the author of the plugin needs to reset the tile layer and then update it. I'm unclear why the redraw function is not doing this in Leaflet, and suspect it could be a bug in Leaflet. I was able to replicate your problem, and what you can do now to make it work is to reset and update the layer yourself. Just do the following after you set the new data:

heatmapLayer.setData(Your data);
heatmapLayer._reset();
heatmapLayer._update();