react-mapbox-draw-rectangle

Installation

yarn add react-mapbox-draw-rectangle

Demo

• https://codesandbox.io/s/vigorous-robinson-3y74c

Usage

<Map
style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
containerStyle={{
	height: '600px',
	width: '100vw'
}}
>
	<DrawControl
		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}
	></DrawControl>
</Map>

References

• https://github.com/mapbox/mapbox-gl-draw/blob/main/docs/MODES.md#available-custom-modes
• https://github.com/mapbox/mapbox-gl-draw
• https://github.com/dev-expert/react-mapbox-draw-rectangle