CODEWITHSUNDEEP
scrollopenlayers-3
user4773894
user4773894

Reputation:

Openlayers 3 turn off smooth scroll

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?

Upvotes: 5

Views: 3527

Answers (2)

NobodySomewhere
NobodySomewhere

Reputation: 3225

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()]),
      //...
    });
}

Upvotes: 1

Alexandre Dubé
Alexandre Dubé

Reputation: 2829

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

Upvotes: 5

Related Questions