Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

leaflet-draw-rotate

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

leaflet-draw-rotate

Add rotate functionality to the Leaflet.Draw plugin

  • 0.0.5
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
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

Package last updated on 16 Dec 2020

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc