OpenLayers

Class: DragZoom

ol/interaction/DragZoom~DragZoom 


import DragZoom from 'ol/interaction/DragZoom';

Allows the user to zoom the map by clicking and dragging on the map, normally combined with an module:ol/events/condition that limits it to when a key, shift by default, is held down.

To change the style of the box, use CSS and the .ol-dragzoom selector, or your custom one configured with className.

new DragZoom(opt_options)

interaction/DragZoom.js, line 33
Name Type Description
options

Options.

Name Type Default Description
className string 'ol-dragzoom'

CSS class name for styling the box.
condition module:ol/events/condition~Condition

A function that takes an module:ol/MapBrowserEvent~MapBrowserEvent and returns a boolean to indicate whether that event should be handled. Default is module:ol/events/condition~shiftKeyOnly.
duration number 200

Animation duration in milliseconds.
out boolean false

Use interaction for zooming out.
Fires:

Extends

Observable Properties

Name Type Settable ol/Object.ObjectEvent type Description
active boolean yes change:active

true if the interaction is active, false otherwise.

Methods

getGeometry(){module:ol/geom/Polygon~Polygon} inherited

interaction/DragBox.js, line 181

Returns geometry of last drawn box.

Returns:
Geometry.

handleEvent() inherited

interaction/Pointer.js, line 120

Handles the map browser event and may call into other functions, if event sequences like e.g. 'drag' or 'down-up' etc. are detected.