3

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);
2
+50

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();
});
  • I was thinking about onZoomIn or zoomOut function. I am loading million of data. Is it going to call the data again? or it will redraw the heatLayer from the existing data? – Devils Dream Mar 28 '18 at 16:17
  • I had a look in the reference again (leafletjs.com/reference-1.3.0.html#map-event) and the event you should listen for is zoomend. I do not know how the redraw is realized. Just try it - I would be interested in the performance result. – Lars Mar 29 '18 at 6:52
  • the radius is not changing on 'zoomend'. – Devils Dream Mar 29 '18 at 12:10
  • Probably you need heatmap.redraw() to actually use the new options? – Lars Mar 29 '18 at 12:19
  • if redraw then the data loading will take 2-3 more second and that will decrease the potentiality and beauty – Devils Dream Mar 29 '18 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.