react-mapbox-gl-draw
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    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 react-mapbox-gl@^4.4.0. If you wish to use Draw tools with react-mapbox-gl@2.x.x or react-mapbox-gl@v3.x.x, please use react-mapbox-gl-draw@1.0.6.

    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'
    });
     
    <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 (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 directoin) 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.
    • position, String (default: 'top-left'): the position of the draw controls on the map.

    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.

    Keywords

    none

    Install

    npm i react-mapbox-gl-draw

    DownloadsWeekly Downloads

    4,174

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    14.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • amaurym