0
# User Interactions
1

2
Comprehensive interaction system for handling user input including mouse, touch, keyboard events, and drawing capabilities with built-in support for common map interactions.
3

4
## Capabilities
5

6
### Base Interaction Class
7

8
Foundation class for all map interactions with event handling and activation control.
9

10
```typescript { .api }
11
/**
12
 * Base interaction class for handling user input
13
 * @param options - Interaction configuration
14
 */
15
class Interaction {
16
  constructor(options?: InteractionOptions);
17
  
18
  /** Get whether the interaction is active */
19
  getActive(): boolean;
20
  /** Set whether the interaction is active */
21
  setActive(active: boolean): void;
22
  
23
  /** Get the map associated with this interaction */
24
  getMap(): Map;
25
}
26

27
interface InteractionOptions {
28
  /** Function to test if interaction should handle event */
29
  handleEvent?: (event: MapBrowserEvent) => boolean;
30
}
31
```
32

33
### Navigation Interactions
34

35
Core interactions for map navigation and view manipulation.
36

37
```typescript { .api }
38
/**
39
 * Double-click zoom interaction
40
 * @param options - Double-click zoom configuration
41
 */
42
class DoubleClickZoom extends Interaction {
43
  constructor(options?: DoubleClickZoomOptions);
44
}
45

46
interface DoubleClickZoomOptions {
47
  /** Animation duration in milliseconds */
48
  duration?: number;
49
  /** Zoom delta */
50
  delta?: number;
51
}
52

53
/**
54
 * Drag pan interaction for moving the map
55
 * @param options - Drag pan configuration
56
 */
57
class DragPan extends Interaction {
58
  constructor(options?: DragPanOptions);
59
}
60

61
interface DragPanOptions {
62
  /** Condition for activating pan */
63
  condition?: EventCondition;
64
  /** Kinetic scrolling */
65
  kinetic?: Kinetic;
66
}
67

68
/**
69
 * Drag rotate interaction for rotating the map
70
 * @param options - Drag rotate configuration
71
 */
72
class DragRotate extends Interaction {
73
  constructor(options?: DragRotateOptions);
74
}
75

76
interface DragRotateOptions {
77
  /** Condition for activating rotation */
78
  condition?: EventCondition;
79
  /** Animation duration */
80
  duration?: number;
81
}
82

83
/**
84
 * Mouse wheel zoom interaction
85
 * @param options - Mouse wheel zoom configuration
86
 */
87
class MouseWheelZoom extends Interaction {
88
  constructor(options?: MouseWheelZoomOptions);
89
  
90
  /** Set whether mouse wheel zoom is active */
91
  setMouseAnchor(useAnchor: boolean): void;
92
}
93

94
interface MouseWheelZoomOptions {
95
  /** Condition for activating zoom */
96
  condition?: EventCondition;
97
  /** Maximum zoom delta per wheel event */
98
  maxDelta?: number;
99
  /** Animation duration */
100
  duration?: number;
101
  /** Timeout for ending zoom */
102
  timeout?: number;
103
  /** Use mouse position as anchor */
104
  useAnchor?: boolean;
105
  /** Constrain resolution */
106
  constrainResolution?: boolean;
107
}
108

109
/**
110
 * Keyboard pan interaction
111
 * @param options - Keyboard pan configuration
112
 */
113
class KeyboardPan extends Interaction {
114
  constructor(options?: KeyboardPanOptions);
115
}
116

117
interface KeyboardPanOptions {
118
  /** Condition for activating pan */
119
  condition?: EventCondition;
120
  /** Animation duration */
121
  duration?: number;
122
  /** Pixel delta per key press */
123
  pixelDelta?: number;
124
}
125

126
/**
127
 * Keyboard zoom interaction
128
 * @param options - Keyboard zoom configuration
129
 */
130
class KeyboardZoom extends Interaction {
131
  constructor(options?: KeyboardZoomOptions);
132
}
133

134
interface KeyboardZoomOptions {
135
  /** Animation duration */
136
  duration?: number;
137
  /** Condition for activating zoom */
138
  condition?: EventCondition;
139
  /** Zoom delta per key press */
140
  delta?: number;
141
}
142
```
143

144
**Usage Examples:**
145

146
```typescript
147
import { DragPan, MouseWheelZoom, DoubleClickZoom } from 'ol/interaction';
148
import { platformModifierKeyOnly } from 'ol/events/condition';
149

150
// Create custom navigation interactions
151
const dragPan = new DragPan({
152
  condition: platformModifierKeyOnly
153
});
154

155
const mouseWheelZoom = new MouseWheelZoom({
156
  duration: 250,
157
  useAnchor: true,
158
  constrainResolution: true
159
});
160

161
const doubleClickZoom = new DoubleClickZoom({
162
  duration: 500,
163
  delta: 1
164
});
165

166
// Add to map
167
map.addInteraction(dragPan);
168
map.addInteraction(mouseWheelZoom);
169
map.addInteraction(doubleClickZoom);
170
```
171

172
### Touch Interactions
173

174
Specialized interactions for touch devices supporting pinch and rotate gestures.
175

176
```typescript { .api }
177
/**
178
 * Pinch zoom interaction for touch devices
179
 * @param options - Pinch zoom configuration
180
 */
181
class PinchZoom extends Interaction {
182
  constructor(options?: PinchZoomOptions);
183
}
184

185
interface PinchZoomOptions {
186
  /** Animation duration */
187
  duration?: number;
188
  /** Constrain resolution */
189
  constrainResolution?: boolean;
190
}
191

192
/**
193
 * Pinch rotate interaction for touch devices
194
 * @param options - Pinch rotate configuration
195
 */
196
class PinchRotate extends Interaction {
197
  constructor(options?: PinchRotateOptions);
198
}
199

200
interface PinchRotateOptions {
201
  /** Animation duration */
202
  duration?: number;
203
  /** Rotation threshold in radians */
204
  threshold?: number;
205
}
206
```
207

208
### Selection and Drawing Interactions
209

210
Advanced interactions for feature selection, drawing, and modification.
211

212
```typescript { .api }
213
/**
214
 * Feature selection interaction
215
 * @param options - Select configuration
216
 */
217
class Select extends Interaction {
218
  constructor(options?: SelectOptions);
219
  
220
  /** Get selected features */
221
  getFeatures(): Collection<Feature>;
222
  /** Set selected features */
223
  setMap(map: Map): void;
224
  /** Get layer filter function */
225
  getLayer(): LayerFilter;
226
  /** Set hit tolerance */
227
  setHitTolerance(hitTolerance: number): void;
228
}
229

230
interface SelectOptions {
231
  /** Condition for selection */
232
  condition?: EventCondition;
233
  /** Function to filter selectable layers */
234
  layers?: Layer[] | ((layer: Layer) => boolean);
235
  /** Style for selected features */
236
  style?: StyleLike;
237
  /** Features collection to sync with */
238
  features?: Collection<Feature>;
239
  /** Function to filter selectable features */
240
  filter?: (feature: Feature, layer: Layer) => boolean;
241
  /** Hit tolerance in pixels */
242
  hitTolerance?: number;
243
  /** Multi-select with toggle */
244
  multi?: boolean;
245
  /** Wrap around for multi-world */
246
  wrapX?: boolean;
247
}
248

249
/**
250
 * Drawing interaction for creating new geometries
251
 * @param options - Draw configuration
252
 */
253
class Draw extends Interaction {
254
  constructor(options: DrawOptions);
255
  
256
  /** Start drawing */
257
  setActive(active: boolean): void;
258
  /** Extend the current drawing */
259
  extend(feature: Feature): void;
260
  /** Finish the current drawing */
261
  finishDrawing(): void;
262
  /** Remove the last point */
263
  removeLastPoint(): void;
264
}
265

266
interface DrawOptions {
267
  /** Geometry type to draw */
268
  type: GeometryType;
269
  /** Click tolerance in pixels */
270
  clickTolerance?: number;
271
  /** Features collection to add drawn features */
272
  features?: Collection<Feature>;
273
  /** Source to add drawn features */
274
  source?: VectorSource;
275
  /** Drag vertexes during draw */
276
  dragVertexDelay?: number;
277
  /** Snap tolerance */
278
  snapTolerance?: number;
279
  /** Stop click propagation */
280
  stopClick?: boolean;
281
  /** Maximum points for polygon/linestring */
282
  maxPoints?: number;
283
  /** Minimum points for polygon/linestring */
284
  minPoints?: number;
285
  /** Finish drawing condition */
286
  finishCondition?: EventCondition;
287
  /** Style for drawing */
288
  style?: StyleLike;
289
  /** Free-hand drawing */
290
  freehand?: boolean;
291
  /** Freehand condition */
292
  freehandCondition?: EventCondition;
293
  /** Wrap around for multi-world */
294
  wrapX?: boolean;
295
}
296

297
/**
298
 * Feature modification interaction
299
 * @param options - Modify configuration
300
 */
301
class Modify extends Interaction {
302
  constructor(options: ModifyOptions);
303
  
304
  /** Get overlay for vertex styling */
305
  getOverlay(): VectorSource;
306
  /** Remove point at pixel */
307
  removePoint(): boolean;
308
}
309

310
interface ModifyOptions {
311
  /** Condition for modification */
312
  condition?: EventCondition;
313
  /** Features to modify */
314
  features?: Collection<Feature>;
315
  /** Delete condition */
316
  deleteCondition?: EventCondition;
317
  /** Insert vertex condition */
318
  insertVertexCondition?: EventCondition;
319
  /** Pixel tolerance */
320
  pixelTolerance?: number;
321
  /** Style for modification handles */
322
  style?: StyleLike;
323
  /** Source to modify */
324
  source?: VectorSource;
325
  /** Hit detection */
326
  hitDetection?: Layer | Layer[];
327
  /** Wrap around for multi-world */
328
  wrapX?: boolean;
329
}
330

331
/**
332
 * Feature translation (drag) interaction
333
 * @param options - Translate configuration
334
 */
335
class Translate extends Interaction {
336
  constructor(options?: TranslateOptions);
337
}
338

339
interface TranslateOptions {
340
  /** Features to translate */
341
  features?: Collection<Feature>;
342
  /** Layers to consider for translation */
343
  layers?: Layer[] | ((layer: Layer) => boolean);
344
  /** Hit tolerance */
345
  hitTolerance?: number;
346
}
347

348
/**
349
 * Geometry snapping interaction
350
 * @param options - Snap configuration
351
 */
352
class Snap extends Interaction {
353
  constructor(options: SnapOptions);
354
  
355
  /** Add feature for snapping */
356
  addFeature(feature: Feature, opt_listen?: boolean): void;
357
  /** Remove feature from snapping */
358
  removeFeature(feature: Feature, opt_unlisten?: boolean): void;
359
}
360

361
interface SnapOptions {
362
  /** Features to snap to */
363
  features?: Collection<Feature>;
364
  /** Edge snapping */
365
  edge?: boolean;
366
  /** Vertex snapping */
367
  vertex?: boolean;
368
  /** Pixel tolerance */
369
  pixelTolerance?: number;
370
  /** Source to snap to */
371
  source?: VectorSource;
372
}
373
```
374

375
**Usage Examples:**
376

377
```typescript
378
import { Select, Draw, Modify, Snap } from 'ol/interaction';
379
import { Vector as VectorLayer } from 'ol/layer';
380
import { Vector as VectorSource } from 'ol/source';
381
import { click } from 'ol/events/condition';
382

383
// Vector source for features
384
const source = new VectorSource();
385

386
// Selection interaction
387
const select = new Select({
388
  condition: click,
389
  layers: [vectorLayer],
390
  style: highlightStyle
391
});
392

393
// Drawing interaction
394
const draw = new Draw({
395
  source: source,
396
  type: 'Polygon',
397
  style: drawStyle
398
});
399

400
// Modification interaction
401
const modify = new Modify({
402
  features: select.getFeatures(),
403
  style: modifyStyle
404
});
405

406
// Snapping interaction
407
const snap = new Snap({
408
  source: source,
409
  pixelTolerance: 10,
410
  vertex: true,
411
  edge: true
412
});
413

414
// Add interactions to map
415
map.addInteraction(select);
416
map.addInteraction(draw);
417
map.addInteraction(modify);
418
map.addInteraction(snap);
419

420
// Listen for draw end
421
draw.on('drawend', (event) => {
422
  const feature = event.feature;
423
  console.log('Drew feature:', feature.getGeometry());
424
});
425
```
426

427
### Event Conditions
428

429
Predefined condition functions for controlling when interactions activate.
430

431
```typescript { .api }
432
/** Always activate */
433
const always: EventCondition;
434

435
/** Never activate */
436
const never: EventCondition;
437

438
/** Single click condition */
439
const click: EventCondition;
440

441
/** Single click condition */
442
const singleClick: EventCondition;
443

444
/** Double click condition */
445
const doubleClick: EventCondition;
446

447
/** No modifier keys pressed */
448
const noModifierKeys: EventCondition;
449

450
/** Platform-specific modifier key only (Cmd on Mac, Ctrl on others) */
451
const platformModifierKeyOnly: EventCondition;
452

453
/** Shift key only */
454
const shiftKeyOnly: EventCondition;
455

456
/** Alt key only */
457
const altKeyOnly: EventCondition;
458

459
/** Alt and shift keys only */
460
const altShiftKeysOnly: EventCondition;
461

462
/** Primary action (left click or touch) */
463
const primaryAction: EventCondition;
464

465
/** Pointer move condition */
466
const pointerMove: EventCondition;
467

468
/** Target element is not editable */
469
const targetNotEditable: EventCondition;
470
```
471

472
### Default Interactions
473

474
Default interaction configuration for typical map usage.
475

476
```typescript { .api }
477
/**
478
 * Create default map interactions
479
 * @param options - Configuration for default interactions
480
 */
481
function defaults(options?: DefaultsOptions): Collection<Interaction>;
482

483
interface DefaultsOptions {
484
  /** Include alt+shift+drag for rotate and zoom */
485
  altShiftDragRotate?: boolean;
486
  /** Include double-click zoom */
487
  doubleClickZoom?: boolean;
488
  /** Include keyboard interactions */
489
  keyboard?: boolean;
490
  /** Include mouse wheel zoom */
491
  mouseWheelZoom?: boolean;
492
  /** Include shift+drag for zoom */
493
  shiftDragZoom?: boolean;
494
  /** Include drag pan */
495
  dragPan?: boolean;
496
  /** Include pinch rotate (touch) */
497
  pinchRotate?: boolean;
498
  /** Include pinch zoom (touch) */
499
  pinchZoom?: boolean;
500
  /** Zoom delta */
501
  zoomDelta?: number;
502
  /** Zoom duration */
503
  zoomDuration?: number;
504
}
505
```
506

507
**Usage Examples:**
508

509
```typescript
510
import { defaults as defaultInteractions } from 'ol/interaction';
511

512
// Use default interactions
513
const interactions = defaultInteractions({
514
  doubleClickZoom: false, // Disable double-click zoom
515
  mouseWheelZoom: true,   // Enable mouse wheel zoom
516
  dragPan: true,          // Enable drag to pan
517
  zoomDuration: 250       // Animation duration
518
});
519

520
// Create map with custom interactions
521
const map = new Map({
522
  target: 'map',
523
  interactions: interactions,
524
  layers: [layer],
525
  view: view
526
});
527
```
528

529
## Types
530

531
```typescript { .api }
532
type EventCondition = (event: MapBrowserEvent) => boolean;
533
type GeometryType = 'Point' | 'LineString' | 'Polygon' | 'MultiPoint' | 'MultiLineString' | 'MultiPolygon' | 'Circle';
534
type LayerFilter = (layer: Layer) => boolean;
535
```