How to put multiple circle overlays on a WP7 Bing Map control? - xaml

Question

I want to put a number of (transparent) circles on a Bing Map Control as overlays. Think about a "blast radius" or "sphere of influence" kind of thing. I'll need at least two dozen of these circles on the map, together with some other polygons, so making sure performance does not suffer and the maps continues to be easily manipulative seems key here.
So far I can think of three options (of which I tried two):
Add n-sided MapPolygon instances to the map for each circle. Tried this, and works fine in principle. However, the number of vertices per polygon is a bit of pickle. Too little, and when you zoom in it looks hideous. Too many, and performance will start to suffer.
Add Pushpin instances for each circle, and style/template them as circle that are centered around the pushpin location. Seems to work, except that the size of the cicle is then fixed in screen size, not map size. So when you zoom, the circles stay the same size on screen, while they should zoom with the map. Can you bind the size of Ellipse control (in the template in the style I use) to the Zoom of the parent map control in some way..?
Create a custom subclass of MapShapeBase to represent each circle. This implementation could dynamically change the number of vertices used to draw the polygon depending on whether the shape is visible on the map or not (=inside current view port) and what the zoom level is. That is, if map shapes have access to this information. I haven't tried this option yet.
What have you used? What would you use? How would you work around the problems mentioned above, especially binding a property of a control in a template used in a style to a parent control property using XAML? Or do you have any other options I could try to get this to work?

Answer 1

In RunKeeper we used the first option and bound the Locations property to a LocationCollection with 360 points created as follows:
protected void UpdateAccuracyCircle()
{
var location = this.CurrentLocation;
if (null != location)
{
var lat = location.Latitude * (Math.PI / 180);
var lng = location.Longitude * (Math.PI / 180);
var d = (this.Accuracy / 1000.0) / Constants.EarthRadius;
var circle = new LocationCollection();
for (int x = 0; x <= 360; x++)
{
var brng = x * (Math.PI / 180);
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));
circle.Add(
new GeoCoordinate(
latRadians * (180 / Math.PI),
lngRadians * (180 / Math.PI)));
}
Dispatcher.BeginInvoke(() => this.AccuracyCircle = circle);
}
}
In this instance we're only dealing with one circle (for the accuracy indication), so might not be particularly efficient if you need multiple circles.
Given that the logic for creating the circle is in code in this example, I think you could easily adjust the logic to use more/fewer points based on the ZoomLevel to meet option 3.

Answer 2

I suggest you move away from the Bing Map Controls and start using the ESRI Silverlight / WP7 Toolkit. They have much more controls available that you can use out of the box.
http://help.arcgis.com/en/arcgismobile/10.0/apis/windowsphone/
Here are all the samples: http://help.arcgis.com/en/arcgismobile/10.0/apis/windowsphone/samples/start.htm
You will need an account to download the SDK, but it's free (to register and download).

Answer 3

I'd suggest using a canvas as an overlay with a transparent background and then add ellipse objects to that, using a similar technique as described here.
Only trick will be to get the aspect ratio of the canvas aligned with the map control as it's displayed / updated and the positioning of the ellipses relative to the coordinates your aiming for.