Wednesday, 1 April 2009

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...

5 comments:

  1. Hi,
    Could you send code to my mail
    m_kris2003@yahoo.co.in

    Thanks,
    murali

    ReplyDelete
  2. All the important aspects of the code are listed in the blog post (including a link to some C# if you read closely).

    ReplyDelete
  3. Hi,
    My image is not moving through line.
    Could you help me on this please.
    If you don't mind , please send code to me.
    control is not moving , struggling lot.
    Thanks,
    Murali

    ReplyDelete
  4. Murali, I spend a lot of time providing free code and blog samples - but that doesn't mean I can respond to every single reader's technical problems.

    I believe there is enough information in this post to get animation working. If you continue to have a problem perhaps there are newsgroups you can post your questions to where people are happy to provide "free" support.

    ReplyDelete
  5. Hi,
    Thank you very much for your reply

    ReplyDelete