[GIS] Zoom level wise radius change in Leaflet Heat

heat mapjavascriptleaflet

I am using leaflet.heat for creating heatmap with leaflet API.I have a highest intensity of 1.0 and lowest 0.0. I have created a getRadius function where I tried to change radius based on zoom scale. In zoom level 7 it showing very good result as I am trying to plot approximately half million of data. When I am increasing the zoom level the radius is not enough to visible expected result. Probably increasing the radius with zoom scale will be the solution. But the radius became static and its showing the value based on map loading zoom level. How could I change this?

function getRadius(){
            var radius;
            if (currentZoom === 7){
                radius=2
            }
            else if (currentZoom === 8) {
                radius = 4;
            }
            else if (currentZoom === 9) {
                radius = 6;
            }
            else if (currentZoom === 10) {
                radius = 8;
            }
            else if (currentZoom === 11) {
                radius = 10;
            }
            else if (currentZoom === 12) {
                radius = 12;
            }
            else if (currentZoom === 13) {
                radius = 14;
            }
            else if (currentZoom === 14) {
                radius = 16;
            }
            else if (currentZoom === 15) {
                radius = 18;
            }
            else if (currentZoom === 16) {
                radius = 20;
            }
            else if (currentZoom === 17) {
                radius = 22;
            }
            else if (currentZoom === 18) {
                radius = 24;
            }
            return radius;
        }
var heatmap = L.heatLayer(allHeats, {
                    radius: getRadius(),
                    max: 1.0,
                    blur: 15,              
                    gradient: {
                        0.0: 'green',
                        0.5: 'yellow',
                        1.0: 'red'
                    },
                    minOpacity: 0.7
                }).addTo(map);

Best Answer

Listen for zoomstart events and use the setOptions(options) method on your layer. Code should be similar to this:

map.on('zoomstart', function(ev) {
    // zoom level changed... adjust heatmap layer options!
    heatmap.setOptions({
        radius: getRadius(),
        max: 1.0,
        blur: 15,              
        gradient: {
            0.0: 'green',
            0.5: 'yellow',
            1.0: 'red'
        },
        minOpacity: 0.7
    });
    // render the new options
    heatmap.redraw();
});
Related Question