https://github.com/tav0/mapb-gl-draw
https://github.com/tav0/mapb-gl-draw
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/tav0/mapb-gl-draw
- Owner: Tav0
- License: isc
- Created: 2018-03-21T06:54:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-24T22:16:29.000Z (about 8 years ago)
- Last Synced: 2025-01-29T18:08:19.076Z (over 1 year ago)
- Language: JavaScript
- Size: 3.73 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @mapbox/mapbox-gl-draw
[](https://greenkeeper.io/) [](https://travis-ci.org/mapbox/mapbox-gl-draw)
Adds support for drawing and editing features on [mapbox-gl.js](https://www.mapbox.com/mapbox-gl-js/) maps. [See a live example here](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/)
**Requires [mapbox-gl-js](https://github.com/mapbox/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.
**When using modules**
```js
require('@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css')
// or
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
```
**When using CDN**
```html
```
### Usage in your application
**When using modules**
```js
var mapboxgl = require('mapbox-gl');
var MapboxDraw = require('@mapbox/mapbox-gl-draw');
```
**When using a CDN**
```html
```
**Example setup**
```js
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 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://www.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/
### See [API.md](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md) for complete reference.
### Enhancements and New Interactions
For additional functionality [check out our list of custom modes](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md#available-custom-modes).
Mapbox Draw accepts functionality changes after the functionality has been proven out via a [custom mode](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md#creating-modes-for-mapbox-draw). 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](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md#available-custom-modes).
### Developing and testing
Install dependencies, build the source files and crank up a server via:
```
git clone git@github.com:mapbox/mapbox-gl-draw.git
npm install
npm start & open http://localhost:9966/debug/?access_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](https://github.com/mapbox/mapbox-gl-js/blob/mb-pages/docs/_posts/examples/3400-01-25-mapbox-gl-draw.html).
### Naming actions
We're trying to follow standards when naming things. Here is a collection of links where we look for inspiration.
- http://turfjs.org/docs.html
- http://toblerity.org/shapely/manual.html