Open Layers 3 Zoom map event handler

Question

I need to handle a zoom event in Open Layers 3.

The following is my code:

map_object = new ol.Map({
target: 'map',
controls: controls_list,
interactions: interactions_list,
overlays: [overlay],
layers: [OSM_raster, WFS_layer],
    view: view
});


map_object.on("Zoom", function() {
  console.log('Zooming...');
});

This code runs with no errors and shows a map, but there is no output to the console, suggesting this function isn't firing.

I have also tried:

map_object.on("drag", function() {
  console.log('Dragging...');
});

And this too does nothing.

Any help as to how to handle map control events in OL3 would be much appreciated (particularly zooming!). Note I have tried 'zoom' as well as 'Zoom' for the type field of the on method.

Answer 1

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;
   }
});

Answer 2

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

Answer 3

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

Answer 4

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