leaflet-draw-rotate

leaflet-draw-rotate

ALPHA leaflet plugin - adds rotate functionality to the Leaflet.Draw plugin by binding it with a custom version of the Leaflet.Path.Transform plugin.

TODO

• Rotate rectangle
• Rotate polygon
• Rotate polyline

Use

// import peer dependencies
import 'leaflet';
import 'leaflet-draw';

// import plugin, then rotate bindings for each required geomtry type
import 'leaflet-draw-rotate';
import '/path/to/dist/Edit.Rectangle.Rotate.js';

// optional - configure transform options
L.Edit.Rectangle.prototype.setOptions({ uniformScaling: false });

// init leaflet-draw.. (see demo for detailed example)

Options

Options should be applied via the edit handler's prototype setOptions function (see above example).

• options.handlerOptions - <Path_options> - edge markers options
• options.boundsOptions - <Polyline_options> - bounding rectangle options
• options.rotateHandleOptions - <Polyline_options> - rotation handle line styles
• options.handleLength - Int - Length of the rotation handle in pixels. Defaults to 20.
• options.rotation - Boolean - Enable/disable rotation. Default true
• options.scaling - Boolean - Enable/disable scaling. Default true
• options.uniformScaling - Boolean - Use uniform scaling (maintain aspect ratio). Default true
• options.scaleRounding - Int - Decimal rounding value to use when matching non-uniform drag handles (can use this if you encounter #5). Default 4

Events

Following events are fired on the transformed layer

• rotatestart, rotate, rotateend - { rotation: <Radians> }
• scalestart, scale, scaleend - { scale: <L.Point> }
• transformstart, transform, transformed - { rotation: ..., scale: ..., matrix: <L.Matrix> }

Development

npm install
npm run build

Thanks

This plugin builds upon earlier work of @w8r (e.g. Leaflet.Path.Transform, Leaflet.Path.Drag), and also @kevinsamyn's work on non-skewing rectangle scaling/re-sizing.

License

CSIRO Open Source Software Licence Agreement (variation of the BSD / MIT License)