How can I get current coordinates of rectangle corners?

[roman-biqmind]

When I try using the events (e.g. rectangle.on('transform', (e) => { ... } )), how can I get live coordinates of my rectangle as I scale/rotate it?

When I move, I can access them via rectangle.getLatLngs(), but in event of rotate or scale the coordinates remain the same until I start the next zoom/rotate.

I need this in order to properly rotate an imageOverlay linked to the rectangle.

[w8r]

Take a look at what I suggested in #29 You have access to the transformation matrix

[roman-biqmind]

@w8r I see the matrix field on the event, but could you please advise on how to use it? If we have the previous coordinates (rectangle.getLatLngs()) and the transformation matrix, we should be able to calculate new values, correct?

[pedhenrique]

I see the same problem. Is the intent behaviour to not show the current coordinates on getLatLngs() while rotating or scaling?

[kbrose]

I also had to do this. This is what I came up with:

// Fires on rotate/resize, not on drag.
poly.on("transform", function (e) {
  const trans = poly.transform;
  const coords = poly.getLatLngs()[0]; // pre-transform coordinates of polygon
  const matrix = trans._matrix;
  const map = poly._map;
  function transform(coord) {
    // the key is to project your lat/long coordinates to the layer's
    // coordinate system, apply the transform, and then invert back
    // to the lat/long coordinates
    return map.layerPointToLatLng(
      matrix.transform(map.latLngToLayerPoint(coord))
    );
  }
  // I used ImageOverlay.Rotated from
  // https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated
  // which gives a "reposition" function. But you can use transform(coords[i])
  // generally to do your transformation.
  overlay.reposition(
    transform(coords[1]),
    transform(coords[2]),
    transform(coords[0])
  );
});