How to destroy heatmap.js instance?

Question

I'm using patrick wied's heatmapjs . I want to know how to destroy an instance and remove the canvas div created by h337.create(configObject) function.

Example:

var config = {
  container: document.getElementById('heatmapContainer'),
  radius: 10
};
var config2 = {
  container: document.getElementById('heatmapContainer'),
  radius: 5
};
var heatmapInstance1 = h337.create(config);
var heatmapInstance2 = h337.create(config);
var heatmapInstance3 = h337.create(config2);

I want to destroy and delete canvas div only for heatmapInstance1 instance.

Answer 1

Currently there is no method to destroy a heatmapjs instance, but we can do that manually.

First we have to remove the canvas element from DOM and than unset or destroy the heatmapjs instance.

Example:

//find corresponding canvas element
var canvas = heatmapInstance1._renderer.canvas;
//remove the canvas from DOM
$(canvas).remove();
//than unset the variable
heatmapInstance1 = undefined;
//or
heatmapInstance1 = null;

Answer 2

If you are using React component then you may have to do this in your componentWillReceiveProps(newProps) when dynamically sending new data to heatmap component.

this.heatmap._renderer.canvas.remove()
this.heatmap = Heatmap.create({container: ReactDOM.findDOMNode(this)})
this.setData(newProps.max, newProps.data);

Answer 3

You can add this function to CesiumHeatmap.js and use it to clear the heatmap:

CHInstance.prototype.deleteLayer = function () {
    if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
        if (this._layer) {
            this._cesium.entities.remove(this._layer);
        }
    } else {
        if (this._layer) {
            this._cesium.scene.imageryLayers.remove(this._layer);
        }
    }
};