Panning and page scrolling

Edit

Panning and page scrolling

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.

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Panning and page scrolling</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

Copy

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

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

Copy

package.json{
  "name": "two-finger-pan-scroll",
  "dependencies": {
    "ol": "6.3.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}