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
Use
import 'leaflet';
import 'leaflet-draw';
import 'leaflet-draw-rotate';
import '/path/to/dist/Edit.Rectangle.Rotate.js';
L.Edit.Rectangle.prototype.setOptions({ uniformScaling: false });
Options
Options should be applied via the edit handler's prototype setOptions
function (see above example).
options.handlerOptions
- <Path_options> - edge markers optionsoptions.boundsOptions
- <Polyline_options> - bounding rectangle optionsoptions.rotateHandleOptions
- <Polyline_options> - rotation handle line stylesoptions.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> }
Programmatic changes
If you have changed the geometry of the transformed layer and want the tool to reflect the changes, use:
layer.setLatLngs([...]);
layer.transform.reset();
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)