mapbox-gl-draw-scale-rotate-mode

0.1.0 • Public • Published

NPM Develop Release

mapbox-gl-draw-scale-rotate-mode

A custom mode for MapboxGL-Draw to cut polygons

DEMO

A Gif showing demo usage

Install

npm install mapbox-gl-draw-scale-rotate-mode

or use CDN:

<script src="https://unpkg.com/mapbox-gl-draw-scale-rotate-mode"></script>

Usage

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,
});

Example

Acknowledgement

This project is heavily inspired from TxRectMode mapbox-gl-draw custom mode.

License

MIT © ReyhaneMasumi

Package Sidebar

Install

npm i mapbox-gl-draw-scale-rotate-mode

Weekly Downloads

80

Version

0.1.0

License

MIT

Unpacked Size

282 kB

Total Files

10

Last publish

Collaborators

  • reyhanemasumi
  • mh_sattarian