0

I am trying to implement a functionality using openlayers with Angular in which I have to add one interaction using MouseWheelZoom.

Interaction gets added but control does not come inside the event listener for this when I move my mouse wheel in map.

ngOnInit() {
    this.createMap();
    const mapInteraction = new MouseWheelZoom();
    this.map.addInteraction(mapInteraction);
    mapInteraction.on('change', (event) => {
      console.log('event', event);
    });
  }

  createMap() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
  }
}

Please find a simple stackblitz for this here

user2454954
  • 1
  • If you call `mapInteraction.changed();` the event fires as expected. MouseWheelZoom is included in the default interactions, you do not need to add another one. – Mike Jul 28 '22 at 12:29
  • Do I need to add the interaction in this way ? `code` import Interaction from 'ol/interaction/Interaction'; const mapInteraction = new Interaction(); this.map.addInteraction(mapInteraction); mapInteraction.changed(); mapInteraction.on('change', (event) => { console.log('event', event); }); – user2454954 Jul 28 '22 at 12:58
  • @Mike calling "changed" method would trigger the event manually, but we want to listen to the event when its triggered by user interaction – user2454954 Jul 28 '22 at 13:04
  • Before adding a customised interaction you must exclude the default when you create the map `nteractions: defaultInteractions({mouseWheelZoom: false}),` The interaction does not fire change events in response to user actions, it causes the view to fire a `change:resolution` event. – Mike Jul 28 '22 at 13:42
  • The interaction does not fire change events in response to user actions, it causes the view to fire a `change:resolution event` Yes you are right on this – user2454954 Jul 28 '22 at 14:11
  • The interaction does not fire change events in response to user actions, it causes the view to fire a `change:resolution event` Yes you are right on this point But if we add or remove the `interactions: defaultInteractions({mouseWheelZoom: false}),` from map creation it does not give any output in user action response. Also if you see I am using` map.getview().on('change:resolution, ())` which is giving me resolution change but here we are not getting specific event type whether it is a wheel event or touch pad event. So my purpose is not resolved yet. – user2454954 Jul 28 '22 at 14:19
  • @Mike `ngOnInit() { this.createMap(); const mapInteraction = new MouseWheelZoom(); this.map.addInteraction(mapInteraction); this.map.getView().on('change:resolution', (event) => { console.log('event', event); }); } createMap() { this.map = new Map({ target: 'map', interactions: defaultInteractions({ mouseWheelZoom: false }), layers: [ new TileLayer({ source: new OSM(), }), ], view: new View({ center: [0, 0], zoom: 2, }), });` – user2454954 Jul 28 '22 at 14:19
  • This event is fired not only in mouse wheel touch pad pinch & zoom case but also in case when we are changing the zoom in out from action button – user2454954 Jul 28 '22 at 14:23
  • @Mike, you said "The interaction does not fire change events in response to user actions, it causes the view to fire a change:resolution event". But the **change:resolution** event fires also when users zoom using control buttons. I want to perform some action only when user zooms using mouse wheel or pinch. How can I detect that? – Daud Jul 29 '22 at 07:53
  • You could intercept the event in a custom condition function for the interaction https://codesandbox.io/s/mousewheelzoom-vpo66c?file=/main.js – Mike Jul 29 '22 at 09:14
  • @Mike Thanks a lot. It was quite helpful. I tried to do the same with PinchZoom, but it didn't allow me to override "condition". Any suggestions how we can get a callback for user-triggered ZoomPinch? – Daud Jul 29 '22 at 12:23

0 Answers0