mapbox-gl-draw-freehand-mode
v2.1.0
Published
a free drawing plugin for mapbox-gl-draw
Downloads
10,801
Maintainers
Readme
Mapbox Free Draw Mode
This is a custom mode for @mapbox/mapbox-gl-draw that adds draw functionality to the draw polygon mode.
Demo
https://bemky.github.io/mapbox-gl-draw-freehand-mode/
Dependencies
@mapbox/mapbox-gl-draw @turf/simplify
Usage
To Install:
npm i mapbox-gl-draw-freehand-mode
To Use:
import FreehandMode from 'mapbox-gl-draw-freehand-mode'
const Draw = new MapboxDraw({
modes: Object.assign(MapboxDraw.modes, {
draw_polygon: FreehandMode
})
});
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [40, -74.50],
zoom: 9
});
map.addControl(Draw)
Configuration
Simplification
By default FreehandMode will simplify. Turf's simlify method takes a polygon and simplifies it based on a tolerance
. The tolerance is corelated to meters, so tolerance must change based on the zoom, if not simplification will vary wildly based on zoom level. Thus, FreehandMode's simplify calculates a tolerance based on zoom.
You can configure you're own simplify method by redefing it on the object
Example removing simplification
import FreehandMode from 'mapbox-gl-draw-freehand-mode';
FreehandMode.simplify = function (polygon, zoom) {}
Example with your own tolerance calculation
import FreehandMode from 'mapbox-gl-draw-freehand';
FreehandMode.simplify = function (polygon, zoom) {
simplify(polygon, {
mutate: true,
tolerance: 1 / Math.pow(2, zoom),
highQuality: true
});
}
Development
Build or serve the example via Webpack
Build
npm run build
Serve
npm run start