Home

Awesome

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

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.

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.