Custom Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw
npm install react-mapbox-draw-rectangle
sh
yarn add react-mapbox-draw-rectangle
`
Demo
- https://codesandbox.io/s/vigorous-robinson-3y74c
Usage
`
style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
containerStyle={{
height: '600px',
width: '100vw'
}}
>
userProperties={true}
position={'top-right'}
//controls={{ polygon: true, trash: true }}
displayControlsDefault={false}
modes={{
draw_rectangle: DrawRectangle,
}}
modesConfig={{
draw_rectangle: {
areaLimit: 50 * 1_000_000, // 50+ km2, optional
escapeKeyStopsDrawing: true, // default true
allowCreateExceeded: false, // default false
exceedCallsOnEachMove: false, // default false - calls exceedCallback on each mouse move
//exceedCallback: (area) => console.log(area exceeded! ${area.toFixed(2)}), // optional
//areaChangedCallback: onAreaChanged,
title: "Rectangle tool (p)"
}
}}
styles={DrawStyles}
onDrawCreate={onDrawCreate}
>
``