A custom mode for MapboxGL Draw to scale and rotate features
npm install mapbox-gl-draw-scale-rotate-mode
!Develop
!Release
A custom mode for MapboxGL-Draw to cut polygons
``bash`
npm install mapbox-gl-draw-scale-rotate-mode
or use CDN:
`html`
`js
import mapboxGl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { SRMode, SRCenter, SRStyle } from 'mapbox-gl-draw-scale-rotate-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,
styles: SRStyle,
modes: Object.assign(MapboxDraw.modes, {
scaleRotateMode: SRMode,
}),
});
map.addControl(draw);
// when mode drawing should be activated
draw.changeMode('scaleRotateMode', {
canScale: true,
canRotate: true, // only rotation enabled
canTrash: false, // disable feature delete
rotatePivot: SRCenter.Center, // rotate around center
scaleCenter: SRCenter.Opposite, // scale around opposite vertex
singleRotationPoint: true, // only one rotation point
rotationPointRadius: 1.2, // offset rotation point
canSelectFeatures: true,
});
``
This project is heavily inspired from TxRectMode mapbox-gl-draw custom mode.
MIT © ReyhaneMasumi