z0d14c / mapbox-gl-draw

Draw tools for mapbox-gl-js

@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. Compatible versions are documented in the package.json

On NPM this package has recently moved from mapbox-gl-draw to @mapbox/mapbox-gl-draw

Installing

npm install @mapbox/mapbox-gl-draw

Draw ships with CSS, make sure you include it in your build. It can be found on our CDN or at require('mapbox-gl-draw/dist/mapbox-gl-draw.css').

<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.4/mapbox-gl-draw.css' type='text/css' />

Usage in your application

When using modules

var mapboxgl = require('mapbox-gl');
var MapboxDraw = require('@mapbox/mapbox-gl-draw');

When using a CDN

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.4/mapbox-gl-draw.js'></script>

Example setup

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

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

var Draw = new MapboxDraw();

map.addControl(Draw)

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

See API.md for complete reference.

Developing and testing

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

git clone [e-mail]:mapbox/mapbox-gl-draw.git
npm install
npm start & open http://localhost:9966/debug/?access_token=<token>

Testing

npm run test

Publishing

To github and npm

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

Update the version number in the GL JS example.

Naming actions

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

• http://turfjs.org/docs.html
• http://toblerity.org/shapely/manual.html