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.

score 18 · Answer 1 · answered May 21 '15 at 03:10

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

score 9 · Accepted Answer · edited Feb 18 '19 at 19:10

9

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

edited Feb 18 '19 at 19:10

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

answered Nov 06 '14 at 10:31

tonio

2,376
1
22
28

2

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. – Single Entity Nov 06 '14 at 10:40
17

would `map.getView().on('change:resolution')` fit your needs? – tonio Nov 06 '14 at 10:42
2

It works but is the `change:resolution` event the minimal way ? Can anyone confirm this ? – Christophe Roussy May 04 '15 at 09:27

score 2 · Answer 3 · answered Feb 18 '19 at 19:18

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

score 1 · Answer 4 · edited Oct 01 '15 at 13:51

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

replace *zoomend_event* with *evt* and pass it to zoomend event function to use in own code — Mojtaba Arvin, May 01 '18 at 12:23

Open Layers 3 Zoom map event handler

4 Answers4