OpenLayers v4.0.1 API - Class: DragBox

# Class: DragBox

This documentation is for OpenLayers v4.0.1. The latest is v.

## ol.interaction.DragBox

Allows the user to draw a vector box by clicking and dragging on the map, normally combined with an `ol.events.condition` that limits it to when the shift or other key is held down. This is used, for example, for zooming to a specific area of the map (see `ol.interaction.DragZoom` and `ol.interaction.DragRotateAndZoom`).

This interaction is only supported for mouse devices.

#### new ol.interaction.DragBox(opt_options)

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

  Name | Type | Description
  --- | --- | ---

  `options`

  Options.

  Name | Type | Description
  --- | --- | ---
  `className` | string | undefined | CSS class name for styling the box. The default is `ol-dragbox`.
  `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.always`.

  `boxEndCondition`

  ol.DragBoxEndConditionType | undefined

  A function that takes a `ol.MapBrowserEvent` and two `ol.Pixel`s to indicate whether a boxend event should be fired. Default is:

      function(mapBrowserEvent,
          startPixel, endPixel) {
        var width = endPixel[0] - startPixel[0];
        var height = endPixel[1] - startPixel[1];
        return width * width + height * height >=
          ol.DRAG_BOX_HYSTERESIS_PIXELS_SQUARED;
      }

  ##### Fires:

  - `boxdrag` (ol.interaction.DragBox.Event) - Triggered on drag when box is active.
  - `boxend` (ol.interaction.DragBox.Event) - Triggered upon drag box end.
  - `boxstart` (ol.interaction.DragBox.Event) - Triggered upon drag box start.
  - `change` (ol.events.Event) - Generic change event. Triggered when the revision counter is increased.
  - `change:active` (ol.Object.Event)
  - `propertychange` (ol.Object.Event) - Triggered when a property is changed.

### Subclasses

- ol.interaction.DragZoom

### Extends

- ol.interaction.Pointer

### Classes

Event

### 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 55

  Return whether the interaction is currently active.

  ##### Returns:

  `true` if the interaction is active, `false` otherwise.

#### getGeometry(){ol.geom.Polygon}

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

  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.Map} inherited

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

  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 77

  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.