Leaflet.js: detecting when map finishes zooming

Question

So I'm making this application with leafet.js.

This application requires that I have to manually draw grids onto the screen, that I've taken care in a draw_grid() function that draws a bunch of polygons to the screen.

I have this function that I'm calling to trigger the change of the leaflet map.

zoom - the zoom integer and size is a dict like {x:1,y:1} that controls the size of the tiles drawn onto the map. (they need to change as the units the tiles are being drawn under are lat,long points on the map.

function changeZoom(zoom,size){
    map.setZoom(zoom); 
    setSize(size);   
    setTimeout(drawGrid,500)s;
}

The reason I have to use the setTimeout is because the leaflet ignores any drawing commands onto the map (which I'm doing as a layer) until the map has finished animating.

How to do this asynchronously instead?

Answer 1

You can use the map.zoomend event, described in the API here

map.on('zoomend', function() {
    drawGrid();
});

Once the map finishes the zooming animation, it will then call the drawGrid function.

Answer 2

In newer version of Leaflet, "zoomed" is no longer an event. There are now "zoomstart" and "zoomend" events:

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });

Answer 3

This is best way to managed Leaflet Zoom control clicked

    /*Zoom Control Click Managed*/
    var bZoomControlClick = false;
    mymap.on('zoomend',function(e){
        var currZoom = mymap.getZoom();
        if(bZoomControlClick){
            console.log("Clicked "+currZoom);
        }
        bZoomControlClick = false;
    });     
    var element = document.querySelector('a.leaflet-control-zoom-in');
    L.DomEvent.addListener(element, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });
    var element1 = document.querySelector('a.leaflet-control-zoom-out');
    L.DomEvent.addListener(element1, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });