@tommy2gis/swsk-react-mapbox-gl-draw
v2.0.7
Published
Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw
Downloads
5
Readme
react-mapbox-gl-draw
Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw
This package is basically creating React bindings for mapbox-gl-draw so that it can be used with react-mapbox-gl.
❗ Important: This package does not work with Uber's react-map-gl. See this issue for more info.
Demo
See https://codesandbox.io/s/xenodochial-tu-pwly8.
Getting Started
yarn add react-mapbox-gl mapbox-gl @tommy2gis/mapbox-gl-draw # required peer dependencies
yarn add react-mapbox-gl-draw
Note: this version of
react-mapbox-gl-draw
will only work with the latestreact-mapbox-gl@^4.4.0
. If you wish to use Draw tools with[email protected]
or[email protected]
, please use[email protected]
.
import ReactMapboxGl from 'react-mapbox-gl';
import DrawControl from 'react-mapbox-gl-draw';
// Don't forget to import the CSS
import '@tommy2gis/mapbox-gl-draw/dist/mapbox-gl-draw.css';
const Map = ReactMapboxGl({
accessToken:
'pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g'
});
<Map
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: '100vh',
width: '100vw'
}}
>
<DrawControl />
</Map>;
API
Here are the props you can pass to <DrawControl />
:
keybindings
, boolean (defaulttrue
): Whether or not to enable keyboard interactions for drawing.touchEnabled
, boolean (defaulttrue
): Whether or not to enable touch interactions for drawing.boxSelect
, boolean (defaulttrue
): Whether or not to enable box selection of features withshift
+click
+drag. Iffalse
,shift
+click
+drag zooms into an area.clickBuffer
, number (default:2
): Number of pixels around any feature or vertex (in every direction) that will respond to a click.touchBuffer
, number (default:25
): Number of pixels around any feature of vertex (in every direction) that will respond to a touch.controls
, Object: Hide or show individual controls. Each property's name is a control, and value is a boolean indicating whether the control is on or off. Available control names arepoint
,line_string
,polygon
,trash
,combine_features
anduncombine_features
. By default, all controls are on. To change that default, usedisplayControlsDefault
.displayControlsDefault
, boolean (default:true
): The default value forcontrols
. For example, if you would like all controls to be off by default, and specify a whitelist withcontrols
, usedisplayControlsDefault: false
.styles
, Array<Object>: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the Styling Draw section below.modes
, Object: over ride the default modes with your own.MapboxDraw.modes
can be used to see the default values. More information on custom modes can be found here.defaultMode
, String (default:'simple_select'
): the mode (frommodes
) that user will first land in.userProperties
, boolean (default:false
): properties of a feature will also be available for styling and prefixed withuser_
, e.g.,['==', 'user_custom_label', 'Example']
Also see the API reference for mapbox-gl-draw
.
Draw Events passed as props
These additional props are functions that receive the event data, see mapbox-gl-draw documentantion.
onDrawCreate
onDrawDelete
onDrawUpdate
onDrawCombine
onDrawUncombine
onDrawSelectionChange
onDrawModeChange
onDrawRender
onDrawActionable
To learn more about mapbox-gl-draw
: https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md
To access the Draw object with all the API methods, you need to define a ref on the <DrawControl>
component, and the Draw object will be in the draw
field of this ref:
<Map
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: '100vh',
width: '100vw'
}}>
<DrawControl
ref={(drawControl) => { this.drawControl = drawControl; }}
/>
</Map>
//...
handleButtonClick() {
this.drawControl.draw.getAll(); // Or any other API method
}
Example
An example application of how to use react-mapbox-gl-draw
can be found in the example/
folder. To run it, run:
yarn example
The example app should run on localhost:8080
. An online demo is also hosted on CodeSandbox: https://codesandbox.io/s/xenodochial-tu-pwly8.
Testing
Only eslint
is run for linting. Proper testing needs to be added, see #19 if you would like to help.