- display (pan/zoom) an
- display (pan/zoom) a
- animate a set of
<Ellipse>s that also (pan/zoom)
- animate the map center point to 'track' an
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/WidthAny "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 PathAlthough it was possible to keep the
Canvaselement and place it with
MapRectangle, it did not scale well since the
Path Datais 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 Stroke="Red" Locations="-33.863502543277534,151.20294570922852...
3. Use m:MapLayer.Position and a custom attached propertyPositioning the
Ellipses was easy using
m:MapLayer.MapPosition, however animating this property was a little tricky.
MapPositionis of Type
Longitudeproperties are not easily accessible as the
TargetPropertyof 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 propertyMaking 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 fieldand 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...