Skip to main content

Scrolling a page with the map

When adding the map to a web page, you may need to configure scrolling behavior correctly using specific map options.

Pointing devices (mouse, touchpad)​

To prevent the map from intercepting scroll events, pass the true value to the disableZoomOnScroll property of MapOptions:

const map = new mapgl.Map('container', {
    center: [37.615655, 55.768005],
    zoom: 2,
    key: 'Your API access key',
    disableZoomOnScroll: true,
});

This allows the page to scroll, even when the cursor of a mouse or a touchpad is over the map. The map zoom is disabled in this case.

Touch devices​

For touch devices, use the following MapOptions:

  • disableDragging: true - allows scrolling the page when swiping over the map area. The map panning is disabled in this case.
  • enableTwoFingerDragging: true - enables map panning with two-finger gestures. The single-finger page scrolling is enabled in this case.

Usage example:

const map = new mapgl.Map('container', {
    center: [37.615655, 55.768005],
    zoom: 2,
    key: 'Your API access key',
    disableDragging: true,
    enableTwoFingerDragging: true,
});