Socket
Socket
Sign inDemoInstall

leaflet-draw-rotate

Package Overview
Dependencies
2
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    leaflet-draw-rotate

Add rotate functionality to the Leaflet.Draw plugin


Version published
Weekly downloads
46
increased by24.32%
Maintainers
1
Install size
108 kB
Created
Weekly downloads
 

Readme

Source

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)

FAQs

Last updated on 16 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc