Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet.js: detecting when map finishes zooming

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?

like image 375
Wingston Sharon Avatar asked Sep 04 '13 08:09

Wingston Sharon


3 Answers

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.

like image 95
Patrick D Avatar answered Oct 31 '22 01:10

Patrick D


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); });
like image 19
CodingWithSpike Avatar answered Oct 31 '22 02:10

CodingWithSpike


This is best way to managed leflet 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");
    });
like image 1
Mansuri Nurulhuda Avatar answered Oct 31 '22 02:10

Mansuri Nurulhuda