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.

Predesignate

Answer 1

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

Sacks

Unfortunately this doesn't solve the issue of handling a zoom event. I need to know when and only when zoom is occurring (not pan or rotate too) and which way the zoom is going. I have however found a workaround solution which I will post shortly which doesn't involve 'non-stable' events and works perfectly. Thanks anyway though. – Predesignate

would map.getView().on('change:resolution') fit your needs? – Sacks

It works but is the change:resolution event the minimal way ? Can anyone confirm this ? – Dragoman

Answer 2

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

Senaidasenalda

Answer 3

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

Applause

Answer 4

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

Ewell

replace zoomend_event with evt and pass it to zoomend event function to use in own code – Presentday