mapbox-gl-draw-scale-rotate

A custom mode for MapboxGL-Draw to rotate and scale features.

This fork of ReyhaneMasumi / mapbox-gl-draw-scale-rotate-mode has been ported to typescript and updated to target the latest mapbox version.

Install

npm install mapbox-gl-draw-scale-rotate

Usage

import mapboxgl from 'mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { scaleRotateModeName, ScaleRotateMode, ScaleRotateCenter, ScaleRotateStyle } from 'mapbox-gl-draw-scale-rotate';

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: ScaleRotateStyle,
  modes: Object.assign(MapboxDraw.modes, {
    [scaleRotateModeName]: ScaleRotateMode,
  }),
});
map.addControl(draw);

// when mode drawing should be activated
draw.changeMode(scaleRotateModeName, {
  canScale: true,
  canRotate: true, // only rotation enabled
  canTrash: false, // disable feature delete

  rotatePivot: ScaleRotateCenter.Center, // rotate around center
  scaleCenter: ScaleRotateCenter.Opposite, // scale around opposite vertex

  singleRotationPoint: true, // only one rotation point
  rotationPointRadius: 1.2, // offset rotation point

  canSelectFeatures: true
});

Example