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: [55.31878, 25.23584],
    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: [55.31878, 25.23584],
    zoom: 2,
    key: 'Your API access key',
    disableDragging: true,
    enableTwoFingerDragging: true,
});