react-mapbox-draw-rectangle

Custom Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw

Usage no npm install needed!

<script type="module">
  import reactMapboxDrawRectangle from 'https://cdn.skypack.dev/react-mapbox-draw-rectangle';
</script>

README

react-mapbox-draw-rectangle

Travis npm package Coveralls

Installation

yarn add react-mapbox-draw-rectangle

Demo

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