Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amaury1093/react-mapbox-gl-draw

Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw
https://github.com/amaury1093/react-mapbox-gl-draw

mapbox-gl mapbox-gl-draw react

Last synced: 13 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# react-mapbox-gl-draw



[![Actions Status](https://github.com/amaurym/react-mapbox-gl-draw/workflows/pr/badge.svg)](https://github.com/amaurym/react-mapbox-gl-draw/actions)

[![npm](https://img.shields.io/npm/v/react-mapbox-gl-draw.svg)](https://www.npmjs.com/package/react-mapbox-gl-draw)

[![npm](https://img.shields.io/npm/dw/react-mapbox-gl-draw.svg)](https://www.npmjs.com/package/react-mapbox-gl-draw)

[![dependencies Status](https://david-dm.org/amaurym/react-mapbox-gl-draw/status.svg)](https://david-dm.org/amaurym/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](https://github.com/mapbox/mapbox-gl-draw) so that it can be used with [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl).



> ❗ Important: This package does not work with Uber's [react-map-gl](https://github.com/uber/react-map-gl). See [this issue](https://github.com/uber/react-map-gl/issues/450) for more info.



## Demo



See https://codesandbox.io/s/xenodochial-tu-pwly8.



## Getting Started



```bash

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 `[email protected]` or `[email protected]`, please use [`[email protected]`](https://github.com/amaurym/react-mapbox-gl-draw/tree/v1.0.6).



```javascript

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\: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the [Styling Draw](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#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](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md).

-   `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`](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md).



### Draw Events passed as props



These additional props are functions that receive the event data, see [mapbox-gl-draw documentantion](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md).



-   `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](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#api-methods) with all the API methods, you need to define a [ref](https://facebook.github.io/react/docs/refs-and-the-dom.html) on the `` component, and the Draw object will be in the `draw` field of this ref:



```javascript



     { 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:



```bash

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](https://github.com/amaurym/react-mapbox-gl-draw/issues/19) if you would like to help.