pa7 / heatmap.js

🔥 JavaScript Library for HTML5 canvas based heatmaps
https://www.patrick-wied.at/static/heatmapjs/
MIT License
6.22k stars 1.33k forks source link

configure radius change does't work #206

Open FunctionRun opened 8 years ago

FunctionRun commented 8 years ago

When I use heatmapInstance configure method to change radius ,for example: var newConfig = { radius: Math.random() * 20 } heatmapInstance.configure(nuConfig);

that does't work . I see the code and find radius changed but store._radi not change

smalltwo commented 8 years ago

i have the same question too, is there a good solution?

Molunerfinn commented 8 years ago

You can't change the radius by the method .configure() but you can do it by using.setData(). For example:

var dataPoint = {
     x: 50,
     y: 50,
     value: 20,
     radius: 50
};

var data = {
   max: 100,
   min: 0,
   data: [dataPoint]
};

heatmapInstance.setData(data)

Then you can change the radius.

AppWerft commented 7 years ago

The google heatmap plugin doesn't know the method configure(). Therefore I cannot resize radius. How can I remove from map? (to readd)

ghost commented 7 years ago

Meet the same problem. I add a function to "Store.prototype", like this:

 ,resetRadius: function(radius){
   if (radius) {
     this._cfgRadius = radius;
     var radi = this._radi;
     for(var x in radi){
       for(var y in radi[x]){
         radi[x][y] = radius;
       }
     }
   } // end if
 }

and it will be used in "Heatmap.configure" function. like this:

configure: function(config) {
    this._config = Util.merge(this._config, config);
    this._renderer.updateConfig(this._config);
    this._store.resetRadius(config["radius"]); // reset radius
    this._coordinator.emit('renderall', this._store._getInternalData());
    return this;
},

Hope it helps :)

ParadeTo commented 7 years ago

@quietsnowyday It's very good!

benshimmin commented 6 years ago

Just wanted to second @quietsnowyday's solution here for updating the radius from configure - works really well, thank you!

If you're having a similar problem with the blur not being updated, I found the easiest solution was:

        var tpl;
        if (!this._templates[radius + "_" + blur]) {
          this._templates[radius + "_" + blur] = tpl = _getPointTemplate(radius, blur);
        } else {
          tpl = this._templates[radius + "_" + blur];
        }

(inside the _drawAlpha function; essentially it's caching the template based only on the radius, not on the blur as well). There's a pull request for something similar from someone else too but I thought it'd be handy to have the two in the same place in this issue in case anyone else, like me, is trying to generate dynamically reconfigurable heatmaps.

prasanjitdash commented 4 years ago

Just wanted to second @quietsnowyday's solution here for updating the radius from configure - works really well, thank you!

If you're having a similar problem with the blur not being updated, I found the easiest solution was:

        var tpl;
        if (!this._templates[radius + "_" + blur]) {
          this._templates[radius + "_" + blur] = tpl = _getPointTemplate(radius, blur);
        } else {
          tpl = this._templates[radius + "_" + blur];
        }

(inside the _drawAlpha function; essentially it's caching the template based only on the radius, not on the blur as well). There's a pull request for something similar from someone else too but I thought it'd be handy to have the two in the same place in this issue in case anyone else, like me, is trying to generate dynamically reconfigurable heatmaps.

Thanks -- hours of searching, writing on the git page, nothing helped until I saw this. Updating the blur (radius, opacity were ok) change was a headache and this was the Tylenol !