Silverlight VirtualEarth Map Control - with animation MkII

In recent posts I was working to get the new Virtual Earth Silverlight Map Control (CTP) to:

1. display (pan/zoom) an <Image> overlay


2. display (pan/zoom) a <Path> line


3. animate a set of <Ellipse>s that also (pan/zoom)


4. animate the map center point to 'track' an <Ellipse>
   

Turns out this was all possible - there are two examples: New York Marathon and Sydney Half Marathon

Each problem was overcome as follows:

1. Use m:MapLayer.MapRectangle not Height/Width

Any "pixel-specific" measurements applied to the Image will intefere with your Map layout. DO NOT specify Height, Width, Canvas.Left, Canvas.Top - just give the NW and SE corners (latitude,longitude) of the geographic region the image should cover, like this:
<Image Source="map.png" m:MapLayer.MapRectangle="40.8325608405556,-74.1015908473376,40.5722860972124,-73.843755459154"...

2. Use m:MapPolyline not Path

Although it was possible to keep the Path inside a Canvas element and place it with MapRectangle, it did not scale well since the Path Data is effectively tied to pixel coordinates. It is possible to write code to manually scale the line, but it was much easier to re-express the line with points specified by Latitude,Longitude in a m:MapPolyline like this:
<m:MapPolyline Stroke="Red" Locations="-33.863502543277534,151.20294570922852...

3. Use m:MapLayer.Position and a custom attached property

Positioning the Ellipses was easy using m:MapLayer.MapPosition, however animating this property was a little tricky. MapPosition is of Type Location but the Latitude and Longitude properties are not easily accessible as the TargetProperty of an animation, so I needed to write custom attached properties and set them as the target in code.
<Ellipse Fill="#FFFF0000" Width="11" Height="11" m:MapLayer.MapPosition="-33.863502543277534,151.20294570922852" m:MapLayer.MapPositionMethod="Center"...

4. Use m:Map.Center and a custom (hacked) attached property

Making the Map 'viewport' itself animate proved slightly trickier again. I created another attached property (code for all properties here) for some reason only one 'axis' (Longitude) would animate.

When I removed the Longitude property, then the Latitude position would animate... but I could not get them both animating together. Figuring it was a timing issue, rather than try to "set" both properties when they Changed, Latitude gets stuffed into a static field and then set in the LongitudeChanged handler - seems to work but not sure if it's a good idea (obviously it would break if you tried to animate two maps at the same time!)

More info on the final example - no more Map Control posts for a while...