Google Maps Platform: NORAD Tracks Santa Flash Map: Behind the Scenes

Maps Platform

Product updates, customer stories, and tips and tricks on Google Maps Platform

NORAD Tracks Santa Flash Map: Behind the Scenes

Monday, December 29, 2008

Posted by Pamela Fox, Maps API Team
For the second year in a row, Google partnered with NORAD to provide an online map-based interface for tracking Santa's Dec. 24th sleigh ride across the world. Last year, the map was powered with the JavaScript Maps API. As the programmer for this year's map, I made the decision to use the Maps API for Flash instead. Why? I desperately wanted a glittery "comet trail" to follow Santa's path, and those kinds of effects are easier to pull off in Flash. (One might argue that decisions shouldn't be based on glitter, but one could counter that by pointing out the entire 1970s decade was based on glitter).

While converting the map over to Flash, I wrote code that may be helpful to other Flex developers out there. Instead of just open-sourcing the Santa Tracker map code* and forcing you to sort through it all, I've created standalone demos and descriptions for each of the features:

Comet Trail: The purpose of the trail was to show Santa's recent trajectory, and give the flight more movement. The cloudy trail effect was achieved by creating a custom overlay that drew a line of increasing width through the 7 most recent markers, and then applying a BlurFilter to that line. To achieve the glitter effect on top of that, I create invisible circles of increasing radius around the markers, and then dynamically load in a sparkle SWF at random points within those circles. To get a twinkle instead of a strobe effect, each sparkle SWF is started at a different random frame in its timeline.

Check out the demo or source code.

Embedded Youtube: The real highlight of Santa's ride are the 23 locations where we have "Santa Cams" (Youtube videos), so it was important that we were able to view those Youtube videos on the map. It's a surprisingly difficult task, due to the facts that: 1) the embedded Youtube video player is an AS2 SWF, 2) the Santa map is an AS3 SWF, 3) the Youtube SWF has to be "destroyed" before a new Youtube SWF can play, and 4) AS3 SWFs cannot call methods inside an AS2 SWF. With help from the Youtube team and the AS3 Chromeless player library code, I was finally able to get Youtube + Flex to cooperate. The solution involves the creation of a "bridge" SWF in AS2 that communicates via LocalConnection to the AS3 SWF to load/unload videos, and it also involved a whole lot of random numbers.

Check out the demo or source code.

Smart Info Windows: To show all the locations, the map's default zoom was a viewport showing the whole world. Using the standard infowindows, this meant that when the user clicked on a location in the Northern hemisphere like the North Pole, the infowindow would pop up above the marker and pan the map so that the user just saw a whole lot of grey. Since I hate grey (it's the antithesis of glitter) and wanted a better user experience, Flash API engineer Dmitri Abramov wrote a "smart" info window for me that automatically opens in the direction (top, bottom, left, right) that minimizes panning.

Check out the demo or source code.

JavaScript <-> Flex: Though the map was coded in Flex, many pages on the NORAD site were just JS/HTML. The "RADAR" data was stored as JSON, and common JavaScript functions were used for figuring out the current time and then calculating the current location and phase from that information. So, to avoid replicating all the same logic and data in AS3, we instead used ExternalInterface to send information from the JavaScript to the map, along with some open-source libraries for encoding JSON objects into strings and decoding the strings into AS3 objects.

Check out the demo or source code.

Full Screen: A day before the map was set to go live, I realized that I'd been debugging the map SWF at 100% width/height all the time, when it was in fact going to be embedded inside a 500*450px space on the NORAD site. It depressed me that users wouldn't get to experience the map at the same size, so I searched Google for information on enabling full-screen on Flex apps, and happily discovered it was ridiculously easy to do - just a few lines of code, an "allowFullScreen" param in the HTML, and a toggle-able Flex Image control.

Check out the demo or source code.

* Okay, yeah, I open-sourced the whole code as well, mostly because I've developed an unhealthy dependence on Google Code's nifty subversion repositories and issue trackers. Finding the NORAD repository is left as an exercise to the reader.