OpenLayers v4.0.1 API - Class: Draw

# Class: Draw

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

## ol.interaction.Draw

Interaction for drawing feature geometries.

#### new ol.interaction.Draw(options)

src/ol/interaction/draw.js, line 39

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

  `options`

  Options.

  Name | Type | Description
  --- | --- | ---
  `clickTolerance` | number | undefined | The maximum distance in pixels between "down" and "up" for a "up" event to be considered a "click" event and actually add a point/vertex to the geometry being drawn. Default is 6 pixels. That value was chosen for the draw interaction to behave correctly on mouse as well as on touch devices.
  `features` | ol.Collection.<ol.Feature> | undefined | Destination collection for the drawn features.
  `source` | ol.source.Vector | undefined | Destination source for the drawn features.
  `snapTolerance` | number | undefined | Pixel distance for snapping to the drawing finish. Default is `12`.
  `type` | ol.geom.GeometryType | Drawing type ('Point', 'LineString', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon' or 'Circle'). Required.
  `maxPoints` | number | undefined | The number of points that can be drawn before a polygon ring or line string is finished. The default is no restriction.
  `minPoints` | number | undefined | The number of points that must be drawn before a polygon ring or line string can be finished. Default is `3` for polygon rings and `2` for line strings.
  `finishCondition` | ol.EventsConditionType | undefined | A function that takes an `ol.MapBrowserEvent` and returns a boolean to indicate whether the drawing can be finished.
  `style` | ol.style.Style | Array.<ol.style.Style> | ol.StyleFunction | undefined | Style for sketch features.
  `geometryFunction` | ol.DrawGeometryFunctionType | undefined | Function that is called when a geometry's coordinates are updated.
  `geometryName` | string | undefined | Geometry name to use for features created by the draw interaction.
  `condition` | ol.EventsConditionType | undefined | A function that takes an `ol.MapBrowserEvent` and returns a boolean to indicate whether that event should be handled. By default `ol.events.condition.noModifierKeys`, i.e. a click, adds a vertex or deactivates freehand drawing.
  `freehand` | boolean | undefined | Operate in freehand mode for lines, polygons, and circles. This makes the interaction always operate in freehand mode and takes precedence over any `freehandCondition` option.
  `freehandCondition` | ol.EventsConditionType | undefined | Condition that activates freehand drawing for lines and polygons. This function takes an `ol.MapBrowserEvent` and returns a boolean to indicate whether that event should be handled. The default is `ol.events.condition.shiftKeyOnly`, meaning that the Shift key activates freehand drawing.
  `wrapX` | boolean | undefined | Wrap the world horizontally on the sketch overlay. Default is `false`.

  ##### Fires:

  - `change` (ol.events.Event) - Generic change event. Triggered when the revision counter is increased.
  - `change:active` (ol.Object.Event)
  - `drawend` (ol.interaction.Draw.Event) - Triggered upon feature draw end
  - `drawstart` (ol.interaction.Draw.Event) - Triggered upon feature draw start
  - `propertychange` (ol.Object.Event) - Triggered when a property is changed.

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

#### ol.interaction.Draw.createBox(){ol.DrawGeometryFunctionType}

src/ol/interaction/draw.js, line 777

  Create a `geometryFunction` that will create a box-shaped polygon (aligned with the coordinate system axes). Use this with the draw interaction and `type: 'Circle'` to return a box instead of a circle geometry.

  ##### Returns:

  Function that draws a box-shaped polygon.

#### ol.interaction.Draw.createRegularPolygon(opt_sides, opt_angle){ol.DrawGeometryFunctionType}

src/ol/interaction/draw.js, line 747

  Create a `geometryFunction` for `type: 'Circle'` that will create a regular polygon with a user specified number of sides and start angle instead of an `ol.geom.Circle` geometry.

  Name | Type | Description
  --- | --- | ---
  `sides` | number | Number of sides of the regular polygon. Default is 32.
  `angle` | number | Angle of the first point in radians. 0 means East. Default is the angle defined by the heading from the center of the regular polygon to the current pointer position.

  ##### Returns:

  Function that draws a polygon.

#### ol.interaction.Draw.handleEvent(event){boolean}

src/ol/interaction/draw.js, line 304

  Handles the `map browser event` and may actually draw or finish the drawing.

  ##### This:

  - {ol.interaction.Draw}

  Name | Type | Description
  --- | --- | ---
  `event` | ol.MapBrowserEvent | Map browser event.

  ##### Returns:

  `false` to stop event propagation.

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

#### extend(feature)

src/ol/interaction/draw.js, line 680

  Extend an existing geometry by adding additional points. This only works on features with `LineString` geometries, where the interaction will extend lines by adding points to the end of the coordinates array.

  Name | Type | Description
  --- | --- | ---
  `feature` | ol.Feature | Feature to be extended.

#### finishDrawing()

src/ol/interaction/draw.js, line 617

  Stop drawing and add the sketch feature to the target layer. The `ol.interaction.DrawEventType.DRAWEND` event is dispatched before inserting the feature.

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

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

#### removeLastPoint()

src/ol/interaction/draw.js, line 588

  Remove last point of the feature currently being drawn.

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