Bing Maps Silverlight - smooth zoom skydive animation

11 October 2012

In 2010 Austrian skydiver Felix Baumgartner teamed up with scientists and Red Bull to form the Red Bull Stratos; a project that aims to see Baumgartner free fall from a height of 120 000 feet; the edge of space; to the surface of planet Earth.

Have you ever wondered what this would feel like ? On Sunday Baumgartner will be making his leap, travelling the 23 miles at eye-watering super-sonic speeds, in his attempt to be the first human to break the sound barrier.

If this isn't something you personally fancy, you could always gain a similar experience by using the Silverlight Bing Maps Control; not quite as glamorous, but, equally not as uncomfortable.

Two years ago when the project was announced we developed a Silverlight application and map that starts zoomed out from your landing point and then smoothly animates the ZoomLevel parameter to mimic ‘plummeting’ to earth.

Read the previous blog post below to find out how we did this, and to take a look at the animation we generated...

... The problem is that the default map animation moves too quickly and you cannot animate the Map controls ZoomLevel property yourself from a Storyboard, as Storyboard animations only operate on DependencyProperties.

ZoomLevel is not the only value that developers have needed to animate in past that has not been a DependencyProperty. The solution is to set the Storyboard animation to target your own class member as a DependencyProperty which in turn can modify your intended object member.

Just to make things a little more realistic the Map object centre Location property can be animated to provide wind shear.Instead of animating the Latitude and Longitude separately a Point based DependencyProperty can be created.

Code Snippet

<Storyboard x:Name="CenterMap">

<PointAnimation

x:Name="CenterPoint"

Storyboard.TargetName="MainMap"

From="5.0,50.0"

To="-8.0,56.0"

Duration="0:0:14" />

</Storyboard>

Within your Silverlight control constructor.

Code Snippet

Storyboard.SetTargetProperty(CenterPoint,

newPropertyPath(

Attachments.MapCenterPositionProperty

)

);

New property for the Attachments utility class

Code Snippet

// Map Center Position Property as a Point

publicstaticreadonlyDependencyProperty

MapCenterPositionProperty =

DependencyProperty.RegisterAttached(

"MapCenterPosition",

typeof(Point),

typeof(Attachments),

newPropertyMetadata(

newPropertyChangedCallback(

OnMapCenterPositionChanged)));

publicstaticvoid SetMapCenterPosition(

DependencyObject o, Point value)

{

o.SetValue(MapCenterPositionProperty, value);

}

publicstaticPoint GetMapCenterPosition(

DependencyObject o)

{

return (Point)o.GetValue(MapCenterPositionProperty);

}

privatestaticvoid OnMapCenterPositionChanged(

DependencyObject d,

DependencyPropertyChangedEventArgs e)

{

Location l = (Location)((Map)d).GetValue(

Map.CenterProperty);

Point p = newPoint(l.Latitude, l.Longitude);

p = (Point)e.NewValue;

double z = (double)((Map)d).ZoomLevel;

// Y is Latitude, X is Longitude

((Map)d).SetView(newLocation(p.Y, p.X), z);

}

Now clip the Map to a circle and animate the containers Angle with a regular DoubleAnimation to create a truly sickening spiralling to the ground experience.

The smooth zooming and panning was used to great effect to navigate around the South Africa world cup football stadiums in time with HD video in our World Cup map http://www.theworldcupmap.com