onaci / leaflet.draw.rotate Goto Github PK
View Code? Open in Web Editor NEWAdd rotate functionality to the Leaflet.Draw plugin
Home Page: https://onaci.github.io/Leaflet.draw.rotate/
License: Other
Add rotate functionality to the Leaflet.Draw plugin
Home Page: https://onaci.github.io/Leaflet.draw.rotate/
License: Other
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?
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.
to this
now the object is always taken as it actually is.
Nice work at all
With best regards
Need to implement the rotate bindings for polyline geometries.
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
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)
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.
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.
To be able to add a rectangle (which may be rotated) programatically prior to editing via GUI.
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);
Need to implement the rotate bindings for polygon geometries.
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));
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.