Capturing mousewheel zoom in OpenLayers

Question

I have a map in OpenLayers that has a number of layers with Markers. Each time the user zooms the map I call a function that groups overlapping markers. This works just fine when zooming using the normal zoom buttons, but I also want to call this function when a user zooms using the mouse wheel.

I guess I have to use the OpenLayers.Handler.MouseWheel to capture this event, but I don't know how. Does anyone have an example for this?

Answer 1

You should use map's zoomend event that fires every time user zooms in or out no matter how user did it (buttons, double click or mouse scroll).

The code should look like this:

map.events.on({ "zoomend": function(){
    //Do whatever you need to do here
}});

Answer 2

Using the latest version of Openlayers v6.5.0. I got it worked

this.map = new Map({
            controls: [],
            interactions: defaultInteractions({
                shiftDragZoom: false,
                doubleClickZoom: false,
                pinchRotate: false,
                mouseWheelZoom: false,
            }).extend([
                new MouseWheelZoom({
                    condition: platformModifierKeyOnly,
                    handleEvent: (event) => {
                        if (event.type !== "wheel") return;

                        if (event.originalEvent.deltaY <= -3) {
                            //mouse wheel up
                        } else {
                            //mouse wheel down
                        }
                    },
                }),
            ]),
            target: "map",
            layers,
        });