Leaflet.js heatmap.js - window resize event

Question

I am using heatmap.js for plotting heatmaps on leaflet.js. I am able to render it beautifully. However lets say the initial window/div size is 400x400. Then I resize the window and the div becomes 600x600, the heatmap layer is still sized at 400x400 and cuts-off. When you move the map, you can see the chopped 400x400 area of heatmap.

Anyway to resize or reset the size?

Answer 1

You could listen to the resize event of your L.Map instance:

Fired when the map is resized.

http://leafletjs.com/reference.html#map-resize

Then use the invalideSize method of the L.Map instance:

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically,

http://leafletjs.com/reference.html#map-invalidatesize

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

Answer 2

In my opinion this is a bug in leaflet 0.7.x, which occurs under certain CSS settings for the div containing the map. I got this fixed by modifying the following function in leaflet-heatmap.js:

_resetOrigin: function () {
  this._origin = this._map.layerPointToLatLng(new L.Point(0, 0));

  var size = this._map.getSize();
  if (this._width !== size.x || this._height !== size.y) {
    this._width  = size.x;
    this._height = size.y;

    this._el.style.width = this._width + 'px';
    this._el.style.height = this._height + 'px';
    this._heatmap._renderer.setDimensions(this._width, this._height);   // <- added this line
  }
  this._draw();
}