OpenLayers

Class: DragZoom

ol.interaction.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 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 ol.interaction.DragZoom(opt_options)

src/ol/interaction/dragzoom.js, line 24
Name Type Description
options

Options.

Name Type Description
className string | undefined

CSS class name for styling the box. The default is ol-dragzoom.
condition ol.EventsConditionType | undefined

A function that takes an ol.MapBrowserEvent and returns a boolean to indicate whether that event should be handled. Default is ol.events.condition.shiftKeyOnly.
duration number | undefined

Animation duration in milliseconds. Default is 200.
out boolean | undefined

Use interaction for zooming out. Default is false.
Fires:

Extends

Observable Properties

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

true if the interaction is active, false otherwise.

Methods

changed() inherited

src/ol/observable.js, line 58

Increases the revision counter and dispatches a 'change' event.

dispatchEvent(event) inherited

src/ol/observable.js, line 75

Dispatches an event and calls all listeners listening for events of this type. The event parameter can either be a string or an Object with a type property.

Name Type Description
event Object | ol.events.Event | string

Event object.

get(key){*} inherited

src/ol/object.js, line 101

Gets a value.

Name Type Description
key string

Key name.
Returns:
Value.

getActive(){boolean} inherited

src/ol/interaction/interaction.js, line 56

Return whether the interaction is currently active.

Returns:
true if the interaction is active, false otherwise.

getGeometry(){ol.geom.Polygon} inherited

src/ol/interaction/dragbox.js, line 112

Returns geometry of last drawn box.

Returns:
Geometry.

getKeys(){Array.<string>} inherited

src/ol/object.js, line 115

Get a list of object property names.

Returns:
List of property names.

getMap(){ol.PluggableMap} inherited

src/ol/interaction/interaction.js, line 67

Get the map associated with this interaction.

Returns:
Map.

getProperties(){Object.<string, *>} inherited

src/ol/object.js, line 125

Get an object of all property names and values.

Returns:
Object.

getRevision(){number} inherited

src/ol/observable.js, line 84

Get the version number for this object. Each time the object is modified, its version number will be incremented.

Returns:
Revision.

on(type, listener, opt_this){ol.EventsKey|Array.<ol.EventsKey>} inherited

src/ol/observable.js, line 99

Listen for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.
this Object

The object to use as this in listener.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

once(type, listener, opt_this){ol.EventsKey|Array.<ol.EventsKey>} inherited

src/ol/observable.js, line 124

Listen once for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.
this Object

The object to use as this in listener.
Returns:
Unique key for the listener. If called with an array of event types as the first argument, the return will be an array of keys.

set(key, value, opt_silent) inherited

src/ol/object.js, line 150

Sets a value.

Name Type Description
key string

Key name.
value *

Value.
silent boolean

Update without triggering an event.

setActive(active) inherited

src/ol/interaction/interaction.js, line 78

Activate or deactivate the interaction.

Name Type Description
active boolean

Active.

setProperties(values, opt_silent) inherited

src/ol/object.js, line 170

Sets a collection of key-value pairs. Note that this changes any existing properties and adds new ones (it does not remove any existing properties).

Name Type Description
values Object.<string, *>

Values.
silent boolean

Update without triggering an event.

un(type, listener, opt_this) inherited

src/ol/observable.js, line 147

Unlisten for a certain type of event.

Name Type Description
type string | Array.<string>

The event type or array of event types.
listener function

The listener function.
this Object

The object which was used as this by the listener.

unset(key, opt_silent) inherited

src/ol/object.js, line 184

Unsets a property.

Name Type Description
key string

Key name.
silent boolean

Unset without triggering an event.