How to rotate a polygon on a map with the long/lat coordinates?

Question

I want to rotate a polygon (for example this arrow) by replacing the hardcoded offsets values with a function where can pass in the nord pointing offset and the amount of degrees I want the arrow to rotate at.

I tried using a Rotation matrix but that did not work well.
Probably because the distance of 1 Lat. != 1 Long.

What I'm trying to do with this:
The arrow must represent a vehicle and rotate on the direction the vehicle is heading.

double centerLatitude = pos.Coordinate.Point.Position.Latitude;
double centerLongitude = pos.Coordinate.Point.Position.Longitude;

MapPolygon mapPolygon = new MapPolygon();
mapPolygon.Path = new Geopath(new List<BasicGeoposition>() {
    new BasicGeoposition() {Longitude=centerLongitude, Latitude=centerLatitude},//top of the arrow
    new BasicGeoposition() {Longitude=centerLongitude-0.001, Latitude=centerLatitude-0.0010},
    new BasicGeoposition() {Longitude=centerLongitude-0.001, Latitude=centerLatitude-0.0030},
    new BasicGeoposition() {Longitude=centerLongitude+0.001, Latitude=centerLatitude-0.0030},
    new BasicGeoposition() {Longitude=centerLongitude+0.001, Latitude=centerLatitude-0.0010},              
});
mapPolygon.ZIndex = 1;
mapPolygon.FillColor = Colors.Orange;
mapPolygon.StrokeColor = Colors.Blue;
mapPolygon.StrokeThickness = 2;
mapPolygon.StrokeDashed = false;
MainMap.MapElements.Add(mapPolygon);

Answer 1

MapPolygons are bound to coordinates on the map. Rotation transforms in UWP won't apply to MapPolygons. If you want to rotate a MapPolygon, you have to calculate the rotated coordinates. The Bing Maps V8 map control (web) provides a function for doing this. Here are the two different ways it does this:

Spatially accurate (may not look the same due to map projection)

• Calculate the center of the polygon and use this as the anchor point for rotating the polygon around. You could use any other part of the polygon if you desire.
• Loop through each location in the MapPolygon and calculate it's heading and distance from the anchor point. https://rbrundritt.wordpress.com/2008/10/14/calculating-bearing/ https://megocode3.wordpress.com/2008/02/05/haversine-formula-in-c/
• For each location, add the angle you want to rotate to the heading and calculate the new destination location. https://rbrundritt.wordpress.com/2008/10/14/calculate-destination-coordinate/
• The pass the newly calculated locations into the MapPolygon.

Pixel Accurate (will look the same as you rotate it, but won't be spatially accurate)

• Calculate the center of the polygon and use this as the anchor point for rotating the polygon around. You could use any other part of the polygon if you desire. Convert this to a global pixel coordinate at zoom level 19: https://msdn.microsoft.com/en-us/library/bb259689.aspx (LatLongToPixelXY)
• Loop through each location in the MapPolygon and calculate it's global pixel coordinate at zoom level 19.
• Calculate the rotated pixel coordinates: http://homepages.inf.ed.ac.uk/rbf/HIPR2/rotate.htm
• Convert the pixel coordinates back into spatial locations at zoom level 19(PixelXyToLatLong)
• The pass the newly calculated locations into the MapPolygon.

Answer 2

The best approach for what you're attempting will be to use a XAML element and add it as a child to the map control. You can pin the XAML to the map at one point (either the head of the arrow, or the center). Trying to update the polygon each frame won't be very fast or smooth, so you really don't want to use a map polygon. Some of the links suggested above assume the map is always in Mercator projection and north up and not tilted which won't always be true for the UWP map, so I wouldn't recommend going with that approach.