Open Layers 3 Zoom map event handler

You can manage the moveend event...

We will need a global variable to alocate map’s view zoom level. I’ve named it as currentZoomLevel.

There is available a moveend event. Let’s use it, and add a zoom level check function..

In case of there’s a new zoom level, we trigger a zoomend event to DOM’s document.

Finally we will need to add zoomend listener to the document element.

var = currentZoomLevel;

map.on('moveend', checknewzoom);

function checknewzoom(evt)
{
   var newZoomLevel = map.getView().getZoom();
   if (newZoomLevel != currentZoomLevel)
   {
      currentZoomLevel = newZoomLevel;
      $(document).trigger("zoomend", zoomend_event);
   }
}

$(document).on('zoomend', function () {
   console.log("Zoom");
   //Your code here
});

Source


try with moveend event. (see https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend).


Just to add to this, you can check variations of events available with 'propertychange', from what I am seeing, there is no explicit .on ('zoom', ...) but rather you can access 'resolution' and other properties as mentioned in previous comments:

map.getView().on('propertychange', function(e) {
   switch (e.key) {
      case 'resolution':
        console.log(e.oldValue);
        break;
   }
});

As mentioned by tonio, the way to listen on zoom change, which is called resolution change in openlayers terminology, is with

map.getView().on('change:resolution', (event) => {
    console.log(event);
});

I find this is better (more succinct, less cruft) than listening on the general propertychange and verifying manually if the change concerns resolution.

This fires rapidly when using the mouse button so throttling it might be a good idea before launching any computation that waits for it to change.

Documentation for View