amaurymartiny/ react-mapbox-gl-draw

TypeScript

JavaScript

React

mapbox-gl

View on GitHub

Need help with react-mapbox-gl-draw?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

amaurymartiny

136 Stars

24 Forks

MIT License

266 Commits

12 Opened issues

Description

Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw

Services available

Need anything else?

Contributors list

Amaury

amaurym

# 36,783

TypeScr...

React

ESLint

Babel

35 commits

Alex Dresko alexdresko

# 131,661

oauth2

openid-...

identit...

3 commits

Will Dey wi11dey

# 327,793

HTML

Shell

differe...

lecture...

1 commit

Readme

react-mapbox-gl-draw

Name: react-mapbox-gl-draw
Brand: react-mapbox-gl-draw
SKU: //amaurymartiny/react-mapbox-gl-draw
Rating: 2.09 (136 reviews)

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 @mapbox/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 latest
[email protected]^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 '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g'
});

  
;

API

Here are the props you can pass to

```
keybindings
```
, boolean (default
```
true
```
): Whether or not to enable keyboard interactions for drawing.
```
touchEnabled
```
, boolean (default
```
true
```
): Whether or not to enable touch interactions for drawing.
```
boxSelect
```
, boolean (default
```
true
```
): Whether or not to enable box selection of features with
```
shift
```
+
```
click
```
+drag. If
```
false
```
,
```
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 are
```
point
```
,
```
line_string
```
,
```
polygon
```
,
```
trash
```
,
```
combine_features
```
and
```
uncombine_features
```
. By default, all controls are on. To change that default, use
```
displayControlsDefault
```
.
```
displayControlsDefault
```
, boolean (default:
```
true
```
): The default value for
```
controls
```
. For example, if you would like all controls to be off by default, and specify a whitelist with
```
controls
```
, use
```
displayControlsDefault: 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 (from
```
modes
```
) that user will first land in.
```
userProperties
```
, boolean (default:
```
false
```
): properties of a feature will also be available for styling and prefixed with
```
user_
```
, 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

component, and the Draw object will be in the

draw

field of this ref:


     { this.drawControl = drawControl; }}
    />


//...
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.