Openlayers 3 turn off smooth scroll

Question

I currently have an Openlayers 3 integration with many updating features, these make the scrolling stutter, especially when the 'kinetic' movement (flick scroll) is used. Is there a way to turn that smooth scrolling with inertia off so the user has to drag to move the map?

Removing the animation on zoom would help too.

I've been looking in the ol.animation area for these - is that the right place?

score 5 · Accepted Answer · edited Sep 14 '16 at 01:49

The kinetic can be turned off in the ol.interaction.DragPan interaction. Removing the animation while zooming can be done by passing duration: 0 to the ol.interaction.MouseWheelZoom.

See a live example here: http://jsfiddle.net/9v6fd6as/1/

Here's the example source code:

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  interactions: ol.interaction.defaults({
    dragPan: false,
    mouseWheelZoom: false
  }).extend([
    new ol.interaction.DragPan({kinetic: false}),
    new ol.interaction.MouseWheelZoom({duration: 0})
  ]),
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

Works perfectly. I'll have to remember the .extend functionality - the OL 3 documentation needs a fair amount of work. Thank you. — , Apr 20 '15 at 07:08

score 1 · Answer 2 · edited Apr 05 '23 at 13:00

1

Above answer from Alexandre Dube is correct for older versions of openlayers.

If you're using OpenLayers 6+ with TypeScript, this is how you can disable animated panning:

import Interaction from "ol/interaction/Interaction";
import DragPan from "ol/interaction/DragPan";
import {defaults as defaultInteractions} from 'ol/interaction.js';
import {Kinetic} from "ol";
// ...

ngOnInit() {
    this.map = new Map({
      //...
      interactions: defaultInteractions({
        dragPan: false
      }).extend([new DragPan()]),
      //...
    });
}

edited Apr 05 '23 at 13:00

ahocevar

5,448
15
29

answered Dec 15 '20 at 13:42

NobodySomewhere

2,997
1
16
12

Use `DragPan()` and not `DragPan({kinetic: new Kinetic(0, 0, 0)})` or you'll hit this issue: https://github.com/openlayers/openlayers/issues/14426 – Nicolas Boisteault Apr 05 '23 at 10:13

Openlayers 3 turn off smooth scroll

2 Answers2