A custom mode for MapboxGL-Draw to split polygons.
Check mapbox-gl-draw-split-line-mode For splitting lineStrings.
npm install mapbox-gl-draw-split-polygon-mode mapbox-gl-draw-passing-mode
or use CDN:
<script src="https://unpkg.com/mapbox-gl-draw-passing-mode"></script>
<script src="https://unpkg.com/mapbox-gl-draw-split-polygon-mode"></script>
import mapboxGl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import SplitPolygonMode from 'mapbox-gl-draw-split-polygon-mode';
import mapboxGlDrawPassingMode from 'mapbox-gl-draw-passing-mode';
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-91.874, 42.76], // starting position
zoom: 12, // starting zoom
});
const draw = new MapboxDraw({
userProperties: true,
displayControlsDefault: false,
modes: Object.assign(MapboxDraw.modes, {
splitPolygonMode: SplitPolygonMode,
passing_mode_line_string: mapboxGlDrawPassingMode(
MapboxDraw.modes.draw_line_string
),
}),
});
map.addControl(draw);
// when mode drawing should be activated
draw.changeMode('splitPolygonMode');
The main function responsible for cutting the features is from: https://gis.stackexchange.com/a/344277/145409
MIT © ReyhaneMasumi