package
Forked npmContents
- Installing
- Usage in your application
- Example usage
- See API.md for complete reference.
- Enhancements and New Interactions
- Developing and testing
- Testing
- Publishing
- Naming actions
- Forked changes
Installing
Requires mapbox-gl-js.
npm install @geoalert/mapbox-draw-gl
Draw ships with CSS, make sure you include it in your build.
Usage in your application
JavaScript
import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@geoalert/mapbox-draw-gl';
CSS
When using modules
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
Using mapbox api
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" />
Example usage
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [40, -74.5],
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/
API.md for complete reference.
SeeEnhancements and New Interactions
For additional functionality check out our list of 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
yarn install
yarn start & open "http://localhost:9967/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 inspiration.
Forked changes
Validation function
const Draw = new MapboxDraw({
validation: {
fn: feature => isValid(feature),
styles: getValidationStyles()
}
});
function isValid(feature): ValidationResult {
// your implement
}
type ValidationResult = {
valid: boolean;
invalidReason: InvalidReason | null;
};
type InvalidReason =
| 'unknown-error'
| 'max-area'
| 'min-area'
| 'size'
| 'self-intersection'
| 'empty-area'
| 'method-error';
New modes
- Rectangle mode (draw_rectangle)
New events
draw.geojson
Used in render, send actual feature
draw.direct-mode.stop
When direct mode stop, send feature at the end (last success feature or initial feature)
draw.direct-mode.error
If validation fn passed, execute it and if error not valid event will be fired.