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