I love it when developers dedicate sample applications with source code to the community. It’s a perfect balance of notoriety plus “guerilla marketing” leavened by generosity. These sample apps help everyone learn, and in some cases can save a fortune in time when a developer comes up with something great. I especially love simple sample applications grounded in something I’m not familiar with that I can easily and quickly understand; then I can modify them to make them “cool” for my own purposes. Well, I stumbled onto one of those great sample apps on the Silverlight.net site recently. I love it, and, reader, I used it. I’m pretty sure many of you will want to use it too.
The Silverlight application’s name is SkyDive; it was built by Earthware, folks who are experts in interactive web based mapping solutions. As mentioned, I found the link to the SkyDive Application on the Microsoft owned Silverlight site in the community section, Silverlight.net. But you can go straight to the Earthware Site to run it, learn about how it was built, and download the source code.
First, I suggest you run the application from the Earthware site here to see what it does. It simulates jumping out of an aircraft 23 miles above the earth, spiraling towards the earth, and ultimately landing at the Earthware office in the UK. The idea for the Silverlight sample application comes from Austrian skydiver Felix Baumgartner who is planning a supersonic jump from the edge of space later this year.
After seeing how cool the SkyDive Silverlight sample application was, I tracked down Brian Norman of Earthware in the UK, and he told me his coworker from Earthware, Rob Davis, built the SkyDive application, and that the genesis of the idea for the SkyDive Silverlight application sprang from in their compelling work on www.theworldcupmap.com. As you know from prior columns, I am a sports nut, so when I saw the World Cup Map application I was impressed. Be sure to check it out. It’s a Silverlight application hosted in Azure that was written by Rob Davis, Alex Blount, and Brian Norman of Earthware.
So once I downloaded the source and ran the SkyDive application I immediately said to myself, “I have to hack this thing up to land at the InterKnowlogy office in Carlsbad, CA and hang it off our site.” I think the SkyDive application is a great way to diversify the “where we are located” part of almost any website. Well, getting anything into the InterKnowlogy site takes what seemingly is like an act of God with blessings and committees, so I first hung my “modifications” to the SkyDive application off of my personal site. You can see it here. I’ll deal with the politics of getting it into our own public site in my own company later.
Now, let me tell you how I got there. I really have no expertise and barely any experience in Geographic Information Systems. But, I do have a fascination with them. So, the first thing I wanted to get a grasp of how the application works. On the Silverlight.net site the SkyDive application is advertised as a creative use of attached properties. The SkyDive application leverages the Bing Maps Silverlight control; which is an extremely well built, powerful, and free control from Microsoft. But, like any codebase it doesn’t do everything and can always be improved. In this case the map control’s default map animation moves too fast to properly simulate free falling (even at supersonic speed). The dilemma is that you can’t animate the Map control’s ZoomLevel property from a storyboard, because storyboard animations only operate on DependencyProperties. The crafty solution to the problem that the Earthware folks came up with is to set the Storyboard animation to target a self-created class member as a DependencyProperty. This facilitates modifying your intended object member. I don’t want to waste the space in this article describing how the application was built because you can see all the details of and much more about how the SkyDive application was built on the Earthware site here.
The first challenge is to get the application running. I unzipped and opened the downloaded solution in Visual Studio 2010, did a rebuild all, and of course, there was a bug. Seems like that’s always the case. But, the problem was simply a reference to a missing PNG file of the Earthware logo, so once I deleted that reference from the solution it compiled and ran just fine.
Now my challenge was understanding the Latitude/Longitude (lat/long) references in the application and what to modify them with. Turns out this isn’t much of a challenge at all. MainPage.xaml.cs has the coordinates to the “bounding rectangle” where you start the free fall. MainPage.xaml has 4 hardcoded references to latlongs in storyboards describing where you want the free fall to end up. Those are the values to edit. Simple, right?
Well, my huge challenge was figuring out the geo location format and the exact spot I wanted to land in front of the InterKnowlogy office. You would think that would be easy. The lat/long format in the SkyDive application uses Decimal in Plus/Minus format. There are a myriad of lat/long formats, and I’m certainly no expert. I actually figured out where to land by using Microsoft Streets and Trips 2010, which allows you to use a number of different lat/long formats to pinpoint locations on its map. My next challenge was that the address of the InterKnowlogy Office is somehow a half-mile off in every mapping program and GPS out there. You most likely will not have this problem. Note that a simple mailing address is a location on the street, which could be hundreds of feet away from your actual building. The Lat/Long Decimal in Plus/Minus format seems to have a very accurate fidelity of resolution, about a 2 foot square. Well, I wanted to pin the SkyDive application right in front of the InterKnowlogy Office front door. It was a major pain to hover the mouse in Streets and Trips more than twenty times until I finally got it close.
The last thing I needed to do was to provide the actual address of the InterKnowlogy Office. I did that in Blend in about 30 seconds by dropping a rich text control and setting the VerticalAlignment to Top and the HorizontalAlignment to Center so that the address appears above the satellite image.
Cool, huh? Go ahead and make creative changes and improvements yourselves, and let’s commend the folks at Earthware for a great Silverlight sample application.