Double click, Drag and Zoom

onefinger 1 doubleclick 1 doubletap 1 drag 5 zoom 9 interaction 5

A single interaction to zoom in/out by double clicking and dragging.

A single interaction to zoom in/out by double clicking and dragging. On the second click, hold the mouse left button down and drag up or down to zoom in or out. Works also with touch devices.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import DblClickDragZoom from 'ol/interaction/DblClickDragZoom.js';
import {defaults as defaultInteractions} from 'ol/interaction/defaults.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const map = new Map({
  interactions: defaultInteractions().extend([new DblClickDragZoom()]),
  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>Double click, Drag and Zoom</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": "double-click-drag-zoom",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}