Mapbox GL Draw Rotate Mode

This implements a rotation mode in GL Draw. Module is still in active development. See Mapbox GL Draw Rotate Mode Example.

Installation

npm

npm install mapbox-gl-draw-rotate-mode

import RotateMode from 'mapbox-gl-draw-rotate-mode';

browser

Get the js file from the dist/ folder and include in your project.

<script type="text/javascript" src="mapbox-gl-draw-rotate-mode.js"></script>

Usage

Ensure you are loading draw onto your map as a control before triggering changeMode.

var draw = new MapboxDraw(
  defaultMode: 'RotateMode'
  modes: Object.assign(
    RotateMode: RotateMode
  }, MapboxDraw.modes)
});

map.addControl(draw);

/*
 After load, or on events, activate or deactivate rotation:
*/

draw.changeMode('RotateMode');
draw.changeMode('simple_select');

Events

Mapbox GL Draw Rotate Mode offers you a few events. Redefine these as you need.

RotateMode.rotatestart = function(selectedFeature,originalCenter) {
   console.log('ROTATESTART');
   console.log('feature: ',selectedFeature);
   console.log('center: ',originalCenter);
}

RotateMode.rotating = function(selectedFeature,originalCenter,lastMouseDown) {
   console.log('ROTATING');
   console.log('feature: ',selectedFeature);
   console.log('center: ',originalCenter);
   console.log('lastMouseDown: ',lastMouseDown);
}

RotateMode.rotateend = function(selectedFeature) {
   console.log('ROTATEEND');
   console.log('feature: ',selectedFeature);
}