Radius with respect to zoom level

[cpunekar]

@mourner Is it possible to change the radius based on zoom level. For eg. if I zoom out, the radius of a lat/lng should decrease and if we zoom in the radius should increase, but keeping the allocated intensity value to the given lat/lng value and not adding up the intensities on zoom out.

I tried to modify the draw() function but it doesnt work. The radius() function just gets called once upon initialization, I tried to call it on each zoom in/ out activity from redraw() but it doesn't work, following is the sample code of what I am trying to achieve:

  draw: function(t) {
        this._ctx.canvas.height = this._ctx.canvas.height + (this._r * 10);
        this._ctx.canvas.width = this._ctx.canvas.width + (this._r * 10);
        this._circle || this.radius(this.defaultRadius), this._grad || this.gradient(this.defaultGradient);

The canvas draw fails to plot the points on the map.

[mertemin]

If you want to update radius with zoom level, you need to edit a couple methods. I actually experiment this idea a little bit and got some promising results.

First, I changed radius function's signature and replaced r with zoom parameter.

radius: function (zoom, blur) {
        blur = blur === undefined ? 15 : blur;

        // recalculate radius based on zoom level
        var r = this.defaultRadius * Math.pow(2, zoom - 15);

And updated draw method to accept current zoom level. I also made sure draw method calls radius method every time zoom level is changed. Otherwise, radius is called only once.

Here is a link to an example. It displays rectangles, not circles. You should be able to change it easily.

[cpunekar]

Thanks @mertemin for the reply. Though I don't see the expected results but the radius does get recalculated on trying your logic. The intensities getting added up on zoom out is still blocking my expected result.

[zhuyinjing]

@mertemin hi,which version of leaflet.heat?3 And if i want to modify radius with different zoom level,can i use your code? radius: function (zoom, blur) { blur = blur === undefined ? 15 : blur; // recalculate radius based on zoom level var r = this.defaultRadius * Math.pow(2, zoom - 15); Is it need to modify the source code??? thanks you a lot!

[mertemin]

@zhuyinjing Sorry I don't remember which version was that, but you can just copy leaflet.heat code from https://jsfiddle.net/mertk/zawj9uwm/15/ and play with it.

[zhuyinjing]

thanks so much! @mertemin And i want to ask you. How can i modify this code? does it need modify the source code? Or add it to my code??