Cannot add a Rectangle with a rotation angle from a database.

[JoshyB]

My use case involves drawing a rectangle on the map and then having the ability to rotate them and save them as a GeoJson feature in order to be loaded into the map at a later time.

You are able to draw a rectangle layer of course using ( L.rectangle(rectangle bounds) ) but there is no way to add the rectangle with a set angle, it will just load with an angle of 0°.

I can take those saved rectangles and create a FeatureCollection, and load those into a GeoJson Layer (L.geoJson(collection)) which works really well with rotating, dragging, etc., but doesn't work with editing. Because it's a GeoJson the Geoman editing tool just sees it as a Polygon and tries to edit it as such.

I do realize this is kind of a core leaflet issue with the way layers are drawn and identified.

This also seems to be somewhat related to another issue that can be seen on https://geoman.io/geojson-editor

• draw a rectangle
• rotate the rectangle
• and then edit the rectangle

The rectangle will snap back to 0° because it's a rectangle layer and is just using the rectangle bounds to update/redraw that layer again.

[Falke-Design]

You need to update the latlngs manually after creating the layer. So do following:

var rectCoordsFromDB = [[0,0], ...]
var rect = L.rectangle(rectCoordsFromDB).addTo(map);
rect.setLatLngs(rectCoordsFromDB);

[JoshyB]

Thank you for responding so fast, much appreciated!

That does work when loading the rectangles, but the ladder problem still exists.

• draw or load a rectangle
• rotate with the rotate tool or rect.setLatLngs(rectCoordsFromDB) to set the rotation of the rectangle
• edit the rectangle using the edit tool

When you start to drag a handle the rectangle snaps back to 0°.

[Falke-Design]

You are right, we can improve this.

You also need to store the angle and apply it again after creating the rectangle.

So for now you can use this:

  var coords = [
    [
      {
        "lat": 19.051012275872605,
        "lng": 72.82775007178253
      },
      {
        "lat": 19.077718173401493,
        "lng": 72.8453756636715
      },
      {
        "lat": 19.046289140855745,
        "lng": 72.89868272851521
      },
      {
        "lat": 19.019578184379807,
        "lng": 72.88105713662624
      }
    ]
  ];
  var angle = 31.95549562589494;

  var rect = L.rectangle(coords).addTo(map);
  rect.setLatLngs(coords);
  rect.pm._setAngle(angle)

[JoshyB]

That works beautifully. Thank you so much!

[erdoganabaci]

I have same problem.I want to set angle from database. Can you provide fiddle example ? @Falke-Design And also without using private method _setAngle how can I use rotateLayer function?

[erdoganabaci]

@Falke-Design I used rect.pm.rotateLayer(50) instead of _setAngle because I dont wanna use private method. For the future you may change it. By also _setAngle doesn't work. rect.pm.rotateLayer it works but its throw an error on the chrome dev tools Uncaught TypeError: Cannot read properties of undefined (reading 'fire') Here the screenshot in the attachment and fiddle example link => https://jsfiddle.net/erdogan97/hz3sc8gr/17/