Skip to content

onaci/Leaflet.draw.rotate

Repository files navigation

leaflet-draw-rotate NPM version NPM Downloads

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

Screenshot

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> }

Programmatic changes

If you have changed the geometry of the transformed layer and want the tool to reflect the changes, use:

// you have changed the geometry here
layer.setLatLngs([...]);
// and want to update handlers:
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)