rotate polygon around point in leaflet map

Question

I have an issue, in my leaflet map I've created a triangle from polygon:

var polygon = L.polygon([ 
    [parseFloat(decimal_lat),parseFloat(decimal_lon)], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],       
    {
            color:'green'
    });
polygon.addTo(map);

and I want to rotate this polygon around Point[decimal_lon, decimal_lat]. But I'm not able to solve it..
I've created DEMO, where I'm rotating polynom the same I want to rotate my triangle (polygon) to show you my problem.

Why are you asking this twice? http://stackoverflow.com/questions/34965293/moving-with-polygon-around-point-on-leaflet-map — iH8, Jan 23 '16 at 19:52

dooderson · Answer 1 · 2016-02-17T18:04:52.447

One way to do it is through matrix rotation. https://en.wikipedia.org/wiki/Rotation_matrix. You want to translate the point to the center then apply the rotation, then translate it back.

This is what the end of your code would look like.

  //changing polyline with slider but I want to change polygon there
  range_yaw.onchange = function() {
    var yawAngle = (parseFloat(range_yaw.value) / (819 / 360) + 90)
    // line
    var center = [decimal_lat, decimal_lon]
    var end = [decimal_lat + 2, decimal_lon + 2]
    var pointListRotated = rotatePoints(center, [center, end], yawAngle)
    polyline.setLatLngs(pointListRotated);
    // polygon
    var polygonPoints = [
      center,
      [center[0] + 1, center[1] - 1],
      [center[0] + 1, center[1] + 1]
    ]
    polygonRotated = rotatePoints(center, polygonPoints, yawAngle)
    polygon.setLatLngs(polygonRotated)
  };

  //
  // rotate a list of points in [lat, lng] format about the center.
  //
  function rotatePoints(center, points, yaw) {
    var res = []
    var angle = yaw * (Math.PI / 180)
    for(var i=0; i<points.length; i++) {
      var p = points[i]
      // translate to center
      var p2 = [ p[0]-center[0], p[1]-center[1] ]
      // rotate using matrix rotation
      var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]
      // translate back to center
      var p4 = [ p3[0]+center[0], p3[1]+center[1]]
      // done with that point
      res.push(p4)
    }
    return res
  }

Here is a DEMO

It's a shame that it's skewed. Do you know an implementation that does not skew the polygon when rotating? — jperelli, Nov 14 '17 at 19:38

score 3 · Answer 2 · answered Mar 10 '20 at 12:09

I adapted @dooderson and @MBo from this question answers, the final code is something like this, it works perfectly!

rotatePoints (center, points, yaw) {
  const res = []
  const centerPoint = map.latLngToLayerPoint(center)
  const angle = yaw * (Math.PI / 180)
  for (let i = 0; i < points.length; i++) {
    const p = map.latLngToLayerPoint(points[i])
    // translate to center
    const p2 = new Point(p.x - centerPoint.x, p.y - centerPoint.y)
    // rotate using matrix rotation
    const p3 = new Point(Math.cos(angle) * p2.x - Math.sin(angle) * p2.y, Math.sin(angle) * p2.x + Math.cos(angle) * p2.y)
    // translate back to center
    let p4 = new Point(p3.x + centerPoint.x, p3.y + centerPoint.y)
    // done with that point
    p4 = map.layerPointToLatLng(p4)
    res.push(p4)
}
return res
}

This produced the best rotation for my Leaflet objects. However I had to substitute "L.point" for "new Point". — IanC, Jul 27 '20 at 10:16

score 1 · Answer 3 · edited May 23 '17 at 12:17

You can approach it a couple ways. Here is one...

FIRST: calculate the bearing and distance to the two 'outer' points from the anchor point. Here are a couple helper functions: https://github.com/gregallensworth/Leaflet/blob/master/LatLng_Bearings.js

SECOND: adjust those bearings however you want...keep the original distances.

THIRD: Using the new bearings and the distances, calculate the new LatLngs using the accepted answer here: How to calculate the latlng of a point a certain distance away from another? (This uses google maps instead of leaflet, but its easy to port to leaflet)

Let me know if you have any problems implementing...

rotate polygon around point in leaflet map

3 Answers3

Linked