@mapbox/mapbox-gl-draw


Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here

Requires mapbox-gl-js.

If you are developing with mapbox-gl-draw, see API.md for documentation.

$3

``
npm install @mapbox/mapbox-gl-draw
`

Draw ships with CSS, make sure you include it in your build.

$3

#### JavaScript

When using modules

`js
import mapboxgl from 'mapbox-gl';
import MapboxDraw from "@mapbox/mapbox-gl-draw";
`

When using a CDN

`html

`

#### CSS

When using modules
`js
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
`

When using CDN
`html

`

$3

Typescript definition files are available as part of the DefinitelyTyped package.

`
npm install @types/mapbox__mapbox-gl-draw
`

$3

`js
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [40, -74.50],
zoom: 9
});

var Draw = new MapboxDraw();

// Map#addControl takes an optional second argument to set the position of the control.
// If no position is specified the control defaults to top-right. See the docs
// for more details: https://docs.mapbox.com/mapbox-gl-js/api/#map#addcontrol

map.addControl(Draw, 'top-left');

map.on('load', function() {
// ALL YOUR APPLICATION CODE
});
`

https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

$3

$3

For additional functionality check out our list of custom modes.

Mapbox Draw accepts functionality changes after the functionality has been proven out via a custom mode. This lets users experiment and validate their mode before entering a review process, hopefully promoting innovation. When you write a custom mode, please open a PR adding it to our list of custom modes.

$3

Install dependencies, build the source files and crank up a server via:

`
git clone git@github.com:mapbox/mapbox-gl-draw.git
yarn install
yarn start & open "http://localhost:9967/debug/?access_token="
`

$3

`
npm run test
`

$3

To GitHub and NPM:

`
npm version (major|minor|patch)
git push --tags
git push
npm publish
`

To CDN:

`


make sure you are authenticated for AWS


git checkout v{x.y.z}
yarn install
yarn run prepublish
aws s3 cp --recursive --acl public-read dist s3://mapbox-gl-js/plugins/mapbox-gl-draw/v{x.y.z}
``

Update the version number in the GL JS example.

$3

We're trying to follow standards when naming things. Here is a collection of links where we look for inspiration.

- https://turfjs.org
- https://shapely.readthedocs.io/en/latest/manual.html