Creating a scaled map circle

Question

Similar questions to this have been asked a number of times here, but none of them seem to give me exactly what I want. I am working with the Bing Map control on Windows Phone and I'd like to add an ellipse that scales properly with zoom changes. This can be done with poly lines and polygons, but there is no ellipse type derived from MapShapeBase. I've tried various ways of doing it, but they require playing around with pixel sizes and fudging the math to make it line up with geo coordinates. I want to create an Ellipse with a center and x/y sizes in meters and have the framework do the rest. It seems so simple. Have I missed it somewhere? My other approach is to draw 365 line segments in a poly line, but that seems horribly ugly, and since the center can move, I'd need to bind the Location of every segment. That seems very heavy-weight. Any other thoughts?

[To be specific, I want to add a "GPS Accuracy" indicator as a circle around the current location.]

Answer 1

Update

In Mango, the phone automatically shows such a circle.

Orginal Post

It's fairly easy. You just use a Pushpin control to do the drawing with.

1) Add a MapLayer to your control:

<maps:MapLayer>
    <maps:MapPolygon Fill="Gray"
                        IsHitTestVisible="False"
                        Locations="{Binding AccuracyLocationCollection}"
                        Opacity="0.6"
                        Stroke="Black"
                        StrokeThickness="2" />
</maps:MapLayer>

2) Add the AccuracyLocationCollection property in your ViewModel

public LocationCollection AccuracyLocationCollection
{
    get;
    set;
}

3) In the GeoCoordinateWatcher_PositionChanged event handler, calculate the size of the circle, and set the value to the AccuracyLocationCollection

ViewModel.AccuracyLocationCollection = DrawMapsCircle(e.Position.Location);

4) The code for the DrawMapsCircle goes like this:

private static double ToRadian(double degrees) { return degrees * (Math.PI / 180); }

private static double ToDegrees(double radians)
{
    return radians * (180 / Math.PI);
}

public static LocationCollection DrawMapsCircle(GeoCoordinate location)
{
    double earthRadiusInMeters = 6367.0 * 1000.0;
    var lat = ToRadian(location.Latitude);
    var lng = ToRadian(location.Longitude);
    var d = location.HorizontalAccuracy / earthRadiusInMeters;

    var locations = new LocationCollection();

    for (var x = 0; x <= 360; x++)
    {
        var brng = ToRadian(x);
        var latRadians = Math.Asin(Math.Sin(lat) * Math.Cos(d) + Math.Cos(lat) * Math.Sin(d) * Math.Cos(brng));
        var lngRadians = lng + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(lat), Math.Cos(d) - Math.Sin(lat) * Math.Sin(latRadians));

        locations.Add(new Location()
        {
            Latitude = ToDegrees(latRadians),
            Longitude = ToDegrees(lngRadians)
        });
    }

    return locations;
}

Result: (This is next to my home, I can confirm there's about 3 meters between the roads the grey circle is displaying between)