earthware | Bing Maps Silverlight - smooth zoom skydive animation

All articles

Technology

Bing Maps Silverlight - smooth zoom skydive animation

Anthony Marshall

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

[https://www.telegraph.co.uk/science/space/9600661/Felix-Baumgartner-to-make-space-jump-attempt-on-Sunday.html]

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.

Code Snippet

<Storyboard x:Name="ZoomIn">
<DoubleAnimation x:Name="ZoomLevel"
Storyboard.TargetName="MainMap"
From="3.0"
To="5.0"
Duration="0:0:9" />
</Storyboard>

Within your Silverlight control constructor.

Code Snippet

Storyboard.SetTargetProperty(ZoomLevel,
new PropertyPath(
Attachments.MapZoomLevelProperty
)
);

Handy Attachments utility class

Code Snippet

public partial class Attachments
{
// Map Zoom level property
public static readonly DependencyProperty
MapZoomLevelProperty =
DependencyProperty.RegisterAttached("MapZoomLevel",
typeof(double), typeof(Attachments),
new PropertyMetadata(
new PropertyChangedCallback(OnMapZoomLevelChanged)));
public static void SetMapZoomLevel(DependencyObject o,
double value)
{
o.SetValue(MapZoomLevelProperty, value);
}
public static double GetMapZoomLevel(DependencyObject o)
{
return (double)o.GetValue(MapZoomLevelProperty);
}
private static void OnMapZoomLevelChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
double z = (double)((Map)d).ZoomLevel;
z = (double)e.NewValue;
((Map)d).ZoomLevel = z;
}
}

Most of this was gleaned from [https://www.conceptdevelopment.net/Silverlight/VEMap05/] and [https://bryantlikes.com/archive/2009/03/23/animation-hack-using-attached-properties-in-silverlight.aspx]

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,
new PropertyPath(
Attachments.MapCenterPositionProperty
)
);

New property for the Attachments utility class

Code Snippet

// Map Center Position Property as a Point
public static readonly DependencyProperty
MapCenterPositionProperty =
DependencyProperty.RegisterAttached(
"MapCenterPosition",
typeof(Point),
typeof(Attachments),
new PropertyMetadata(
new PropertyChangedCallback(
OnMapCenterPositionChanged)));
public static void SetMapCenterPosition(
DependencyObject o, Point value)
{
o.SetValue(MapCenterPositionProperty, value);
}
public static Point GetMapCenterPosition(
DependencyObject o)
{
return (Point)o.GetValue(MapCenterPositionProperty);
}
private static void OnMapCenterPositionChanged(
DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
Location l = (Location)((Map)d).GetValue(
Map.CenterProperty);
Point p = new Point(l.Latitude, l.Longitude);
p = (Point)e.NewValue;
double z = (double)((Map)d).ZoomLevel;
// Y is Latitude, X is Longitude
((Map)d).SetView(new Location(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.

skydive2 skydive3

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 https://www.theworldcupmap.com

Bing Maps Silverlight - smooth zoom skydive animation

Let’s change lives together