onaci / leaflet.draw.rotate

Add rotate functionality to the Leaflet.Draw plugin

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

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)

leaflet.draw.rotate's Issues

Documentation is very poor!

Please provide a proper working example in order that we understand how to implement this plugin.

Providing only sub class/handler snippets of code does help us.

Implement Edit.Polyline.Rotate.js

Need to implement the rotate bindings for polyline geometries.

Creating a very small rectangle somehow causes the borders to overlap and turn into an hourglass shape

This behavior is not seen in Leaflet Draw. It only happens when Leaflet Draw Rotate is added. If you create a normal sized rectangle, and then enable editing on that layer and resize the rectangle down fairly small, it can cause the borders to somehow jump / overlap, turning the rectangle into an hourglass shape. I can consistently reproduce this behavior.

This seems to only happen when uniformScaling is disabled. I also found #5 but setting scaleRounding to ANYTHING seems to make the problem worse.

Adding a rectangle programmatically breaks draw editing?

Expected

To be able to add a rectangle (which may be rotated) programatically prior to editing via GUI.

Observed

When attempting to edit the geometry via GUI, it seems to be using the bounds of the rotated rect (rather than the supplied latlngs):

Or maybe I'm doing it wrong, needs further investigation - this is what I tried:

const geoJSON = {"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[154.197588,-40.444499],[155.038019,-39.542405],[162.606197,-43.581959],[161.765766,-44.428894],[154.197588,-40.444499]]]}};
const latLngs = geoJSON.geometry.coordinates[0].map(c => L.latLng(c[1], c[0]));
latLngs.pop();

// create a rect layer and enable non-uniform transforms
const boundaryLayer = L.rectangle(latLngs, { transform: true });
boundaryLayer.transform.enable({ uniformScaling: false });

// try to apply the rotated points again..
boundaryLayer.setLatLngs(latLngs);

// reset should force update
boundaryLayer.transform.reset();

editableLayers.addLayer(boundaryLayer);

Layer is not being passed to L.Draw.Event.EDITED on scale

Expected

To be able to access the layer on edit via the L.Draw.Event.EDITED event, e.g.

map.on(L.Draw.Event.EDITED, e => {
    e.layers.eachLayer(layer => console.log('got a layer!', layer));
});

Observed

Received a layer for rotate + drag events, however for "scale" events - the L.Draw.Event.EDITED is fired but the layer is not available in e.layers

Rectangle moves slightly on rotateend

Sometimes when I stop rotating a rectangle, the geometry appears to shift slightly:

Need to determine if this is an issue with geometry itself or a rendering bug.

Errors when moving rectangle

I'm getting these two errors after repositioning a rectangle.

L.DomEvent.fakeStop is not a function
TypeError: L.DomEvent.fakeStop is not a function

L.DomEvent.skipped is not a function
TypeError: L.DomEvent.skipped is not a function

The errors are from leaflet-draw.rotate.js line 255 and 269.

Versions I'm using:
leaflet: 1.9.3
leaflet-draw-rotate: 0.0.5

Implement Edit.Polygon.Rotate.js

Need to implement the rotate bindings for polygon geometries.

Non-uniform rectangle breaks when editing the second time

When setting uniformScaling: false, the rectangle may be rotated/resized/dragged successfully, however if attempting to edit the same geom after saving, it then ends up in a corrupt state somehow:

Console error:

Uncaught TypeError: Cannot set property 'lat' of null
    at i._onScaleStandard (leaflet-draw-rotate.js:1553)
    at i.fire (Events.js:190)
    at i._fireDOMEvent (Map.js:1440)
    at i._handleDOMEvent (Map.js:1397)
    at HTMLDivElement.c (DomEvent.js:92)

After cancel the edit mode and restart it, the editing rectangle ist on the wrong position

The problem was that after canceling the edit mode and restarting it, the editing rectangle has the configuration from before canceling.

In our project we fixed it by removing the if condition in the "_getBoundingPolygon" function in the "L.Path.Transform.js" file.

From this

to this

now the object is always taken as it actually is.

Nice work at all

With best regards

How to save the coordinates of the rotated rectangle

Hi, I am trying to allow user create a rectangle on map then rotate it, but how can i access the rotated rectangle's coordinates and rotation angle so it can be saved and then to draw again? Can you please share it?