How to correctly draw a polygon (lat/lng vertices and rotation) on a Leaflet map?

Question

I am trying to draw a moving polygon that represents a ship on a leaflet map.

The information I have (per frame) is the location of the polygon's "center" point (latitude/longitude) as well as it's dimensions (the distances between the vertices and the center point), as well as the rotation angle of the polygon.

I am able to add the polygon to the leaflet map, but the after applying a rotation and a translation, the polygon appears to be skewed.

The exact process is: first I store an array of coordinates (vertex latitude/longitude which are the distances between 0,0 and the dimensions of the polygon) and every time I wanna draw the polygon, I copy the array then apply the rotation angle to all the coordinates (simple rotation around 0,0) then translate all the coordinates and draw the result.

This is how the polygon looks like if I only apply the rotation:

This is how the polygon looks like if I apply the rotation and translation (no scaling):

Answer 1

You are seeing distortion because on the spherical Mercator projection that Leaflet (like most web maps) uses, the aspect ratio of latitude and longitude is only 1:1 at the equator. As you move toward the poles, a "square" of 1-degree on a side will appear increasingly stretched vertically.

If you convert your lat/lon points to projected coordinates using L.Projection (specifically, using L.Projection.SphericalMercator.project(...)), you can do your math in projected space, then convert back to lat/lon with L.Projection.SphericalMercator.unproject(...) when you add it to the map. Your polygon should then retain its shape.