NORAD TRACKS SANTA: BEHIND THE SCENES

How Norad is helping to track Santa using the Cesium JavaScript Library

Before satellites and GPS, Santa used good old fashioned magic to determine the fastest way to deliver gifts to children celebrating Christmas around the world, but nowadays Santa gets help from Norad's extraordinary tracking capabilities powered by Cesium. Besides, Santa says he likes technology as much as tradition. 

Introduction to Cesium

Cesium is an open source virtual globe and map engine that contains a WebGL based JavaScript library that enables developers to navigate through 3D worlds using 2D maps, by the power of a GPU, or graphics processing unit. Using a GPU means that the browser can offload resource intensive things like JavaScript to dedicated physical circuits for exponentially better performance. Fortunately as a developer you need to do nothing to enable GPU processing, although it might be configurable via an on/off switch in the browser's advanced settings. Cesium is open source under the Apache 2.0 license and free for both commercial and non-commercial use. In addition to that, Cesium uses hardware-accelerated graphics, and is cross-platform and works with every modern browser. And the best part - there are no plug-ins!

To use Cesium you need HTML, CSS, JavaScript and CZML. CZML, or Cesium Markup Language, is a JSON formatted data construct that defines geo-spatial data across time, which is exactly what Santa needs. Norad's Santa Tracker uses CZML data to illustrate the entire world as a 3D navigable map in which Santa's sleigh moves through. CZML is also what Santa uses to note the homes of good boys and girls everywhere.

You can use any editor with Cesium. Below are a few free editors:

A great place to start is by checking out the Cesium sandcastle. Here you can try out snippets of script and code as well as browse the samples. If you want to dive in, there is a full API online. Once you've downloaded Cesium, extract it to the directory of your choosing, and start your web server if it is not already running. If you use WebMatrix, the built-in IIS Express Web Server will run upon launching an .html page, and if you use Node.js, included with Cesium, you must use the command line to start the web server.

Inspecting the Cesium-b22.zip reveals directories for assets such as the CZML .json files, images, and CSS, along with enough HTML and JavaScript to get you started. You will also find the Node.js file that runs the Node server and some documentation.

How Cesium helps Santa deliver toys to good girls and boys.

Cesium works by using maps and imagery from various imagery providers. When you develop with Cesium you may specify which provider you want. For example, if you'd like to display Earth as it looks during night time, you could tell Cesium to use the "Black Marble" imagery. In addition to imagery providers, Cesium also enables you to layer imagery so that you can overlay maps to show territory borders or markers to pinpoint locations.

To use Cesium, add JavaScript that runs when the DOM is ready that instantiates an instance of a CesiumWidget. In the CesiumWidget's constructor you can specify which imagery provider you'd like to use. By default, Cesium uses Bing Maps imagery. There is imagery for both terrain and water, and both are authentic looking reality based representations of Earth.

It's quite easy to use Cesium, as all you need to get a base 3D map of Earth is to make the appropriate script and asset references, then some JavaScript. Start by adding a <div> element that will serve as the container for the maps. Just give it an ID so Cesium knows to render the map in this <div> rather than another. This is the same ID that you will pass into the constructor, as the code below demonstrates:

<style>
    @import url(../templates/bucket.css);
</style>

<div id="cesiumContainer" class="fullSize"></div>

Add a single line of code to instantiate the Cesium container, referring to the <div>'s ID.

var widget = new Cesium.CesiumWidget('cesiumContainer');

This is what renders in the browser. The world is ready for Santa!

Norad 1 Image Thumb

Norad tracks which girls and boys Santa has visited by adding markers to the maps using the following code. First, we instantiate a CesiumWidget, then we call addBillboard and pass in required parameters.

// code that runs when the DOM is ready
var widget = new Cesium.CesiumWidget('cesiumContainer');
addBillboard(widget.scene, widget.centralBody.getEllipsoid());
Sandcastle.finishedLoading();

The startup code calls the addBillboard function that does several things. First, it sets up the billboard scheme by calling Sandcastle.declare and loading a collection of billboard image objects.

// addBillboard function
function addBillboard(scene, ellipsoid) {
    Sandcastle.declare(addBillboard); // For highlighting in Sandcastle.
        var image = new Image();
        image.onload = function() {
            var billboards = new Cesium.BillboardCollection();
            var textureAtlas = scene.getContext().createTextureAtlas({
                image : image
            });

            billboards.setTextureAtlas(textureAtlas);
            // add marker to Philly. Hometown represent.
            billboards.add({
                position : ellipsoid.cartographicToCartesian(
                    Cesium.Cartographic.fromDegrees(-75.59777, 40.03883)
                        ),
            imageIndex : 0
        });
        scene.getPrimitives().add(billboards);
    };
    image.src = '../images/santa.png';
}

After loading the billboards, we add them to the map by calling the add method on the collection and passing in data specifying where the Cesium should place the marker. Then set the image source in .png or .jpg file format and you're done. There's the map and Santa has a target home!

Norad 2 Image Thumb

Happy Holidays!

Although we're using Cesium to help out Santa, there are many other practical applications and markets that will find Cesium quite valuable. From airlines to the local delivery person, we all need maps to navigate in a modern world. A distance runner, biker, hiker, or skier using Cesium's Columbus View can navigate harsh terrain in 2.5D. 3D maps enable the users to get a complete view of what's in and around their world. Seasonal markets can take advantage of the terrain maps to find the best local produce. We can track and triangulate satellites just like we can Santa. We can also use Cesium to track weather patterns or animal migrations. The uses for 3D modeling are endless. Now, to get those kids to be good year round!