Constructor

# <Draw map source onDrawFinish onDrawBegin onInteractionAdded onDrawCancel drawOpts translations selectInteraction selectedFeature snapOpts snap getStyledFeatures children preferences />

PropTypes:

Name	Type	Required	Description	Default
`map`	object	Yes	openlayers map
`source`	object	No	openlayers layer source	new olSourceVector()
`onDrawFinish`	func	No	callback that's called when the feature's draw is completed and returns an openlayers feature	() => {}
`onDrawBegin`	func	No	callback that's called when the feature's draw is started and returns an openlayers feature	() => {}
`onInteractionAdded`	func	No	callback that's called when the draw button icon is clicked and adds a openlayers draw interaction	() => {}
`onDrawCancel`	func	No	callback that's called when the feature's draw is canceled	() => {}
`drawOpts`	object	No	openlayers draw interaction constructor props	{}
`translations`	object	No	translations object
`selectInteraction`	object	No	reference to openlayers select interaction which can optionally be managed by IA
`selectedFeature`	func	No	callback that returns the selected openlayers feature from the map
`snapOpts`	object	No	openlayers snap opts object	{}
`snap`	bool	No	boolean for enabling snap interaction	true
`getStyledFeatures`	func	No	function to retrieve openlayers features and their styles	function()
`children`	node	No	The buttons passed to the Draw container
`preferences`	object	No

Since:

0.18.0

View Source Draw/Draw.js, line 32

Examples

DrawContainer

The <DrawContainer> component will render a set prebuilt draw and measure tools or child component(s) passed in as the children prop. These tools allow the user to draw features with point, line, and polygon geometries on a map user configurable geometry snap settings. These features can also be styled with perimiter and area measurement labels. Measurements are calculated geodesically using the WGS84 ellipsoid. The user can also label the geometry vertices with their respective coordinates in decimal degrees.

Drop-in example:

This one-liner will render prebuilt draw components in a map.

import React from 'react'
import { Map, DrawContainer } from '@bayer/ol-kit'

const App = () => {
  return (
  <Map>
    <DrawContainer />
  </Map>
  )
}

export default App