Panning and page scrolling

trackpad 2 mousewheel 2 zoom 9 scroll 2 page 2

Shows a map that allows page scrolling unless two fingers or Cmd/Ctrl are used to pan the map.

This example shows a common behavior for page scrolling: on touch devices, when one finger is placed on the map, it can be used to scroll the page. Only two fingers will perform drag pan. For mouse or trackpad devices, the platform modifier key (Cmd or Ctrl) will enable drag pan on the map, otherwise the page will scroll.

main.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {DragPan, MouseWheelZoom, defaults} from 'ol/interaction.js';
import {platformModifierKeyOnly} from 'ol/events/condition.js';

const map = new Map({
  interactions: defaults({dragPan: false, mouseWheelZoom: false}).extend([
    new DragPan({
      condition: function (event) {
        return this.getPointerCount() === 2 || platformModifierKeyOnly(event);
      },
    }),
    new MouseWheelZoom({
      condition: platformModifierKeyOnly,
    }),
  ]),
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Panning and page scrolling</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "two-finger-pan-scroll",
  "dependencies": {
    "ol": "10.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}