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 OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {
  DblClickDragZoom,
  defaults as defaultInteractions,
} from 'ol/interaction.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": "8.1.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}