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

# 36,783
TypeScr...
React
ESLint
Babel
35 commits
# 131,661
C#
oauth2
openid-...
identit...
3 commits
# 327,793
HTML
Shell
differe...
lecture...
1 commit

react-mapbox-gl-draw

Actions Status npm npm dependencies Status

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.