Bing Maps Silverlight – smooth zoom skydive animation
Thursday, October 11th, 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.
- <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.
- Storyboard.SetTargetProperty(ZoomLevel,
- new PropertyPath(
- Attachments.MapZoomLevelProperty
- )
- );
Handy Attachments utility class
- 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 [http://www.conceptdevelopment.net/Silverlight/VEMap05/] and [http://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.
- <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.
- Storyboard.SetTargetProperty(CenterPoint,
- new PropertyPath(
- Attachments.MapCenterPositionProperty
- )
- );
New property for the Attachments utility class
- // 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.
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
95% of the UK road network has now been plotted in Google Streetview, an incredible logistical exercise on its own. You may even have seen one of the hundreds of specially rigged ‘Google Cars’ driving around capturing the imagery over the last 18 months but don’t worry, all faces and vehicle registrations have been disguised to comply with privacy laws!