<Draw />

A component for rendering basic draw tools

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