<DrawContainer />

A prebuilt Draw Tools component


# <DrawContainer map selectInteraction preferences translations snap snapOpts showMeasurements showCoordinateLabels uom drawOpts selectedFeature style children />

Name Type Required Description Default
map object Yes openlayers map
selectInteraction object No reference to openlayers select interaction which can optionally be managed by IA
preferences object No an object with `get` and `put` methods to handle measure state { status: 'success', payload: new Preferences() }
translations object No translations object
snap bool No boolean for enabling snap interaction true
snapOpts object No openlayers snap options
showMeasurements bool No boolean enabling the measurement component true
showCoordinateLabels bool No boolean enabling the coordinate labels component true
uom string No velocity preference of either imperial or metric
drawOpts object No openlayers draw interaction constructor props {}
selectedFeature func No callback that returns the selected openlayers feature from the map () => {}
style object No pass custom style object to DrawContainer
children union No pass child comps to opt out of the default controls
  • 0.18.0

View Source Draw/DrawContainer.js, line 21



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 (
    <DrawContainer />

export default App