Bing Maps Mashup in Dark Skies

I’ve gotten a few requests about how to do a mashup in Dark Skies … so, thought I’d do a blog post on how it was put together. 

First, what’s a mashup?   A mashup is an application that combines data from multiple sources into what is, hopefully, a more useful or interesting way to view the data.  They are often done as web applications because the data is often pulled from online sources.  But, mashups are ideal for Windows 8 and Windows Phone apps, too. 

Dark Skies is simply a mashup that combines 3 main sources of data.  maps (from Bing), light pollution data (from sources like these: Save The Night, NOAA, and P. Cinzano), and favorite astronomy viewing locations and looks like so:

What makes this interesting is the level of zooming, so you get really specific:

Specific is good, but add in data sharing and you, hopefully, have an ideal mashup experience.

Overlaying pins is easy as the map.  In fact, there’s a small sample on putting pins on a map here.   The harder part is storing the data, and for this, Windows Azure Mobile Services works really well.  I’ve talked about that in previous posts.

The light pollution data is available from a variety of sources but in this case, a high res version with a color that can be made transparent (black) is ideal. 

Credit: P. Cinzano, F. Falchi (University of Padova), C. D. Elvidge (NOAA National Geophysical Data Center, Boulder). Copyright Royal Astronomical Society. Reproduced from the Monthly Notices of the RAS by permission of Blackwell Science.

 

There are two fundamental problems in overlaying the two: first, the image should be sliced into small tiles to make it bandwidth sensitive (the uncompressed TIF file is 200MB).   The second is that the image doesn’t exactly line up.  It’s close, but there are subtle errors that get introduced despite both maps appearing to be Mercator projections. 

There are a number of tools that can help you solve this problem, but in this case, I used MapCruncher.  It’s from Microsoft, and it hasn’t been updated since 2007, but … it works. 

The idea is that MapCruncher can both transform/skew an image to fit the projection of the map, and carve it up into nice, little tiles.  Let’s take the following image:

If I want to overlay this image at a specific point on the map. Let’s say that the two eyes should be where Lake Superior and Lake Huron are.  In MapCruncher, we’d bring in the image as an asset, and start defining matching points in the image, like so:

 

 

It’s not until we hit the lock button near the bottom left that the image is scaled/skewed/transformed to fit.  The closer an image is to being the same scale, the better/few points are required to get it look right.  Once you hit the Render button in the bottom left, it will go to town and slice and dice the image up, based on the zoom depth requested.  More on that in a second.

In this case, it generated some 92 tiles.  When we preview the results, we can see the data is overlaid nicely:

The tiles produced are laid out and named format known as quadkeys.   You can read a lot more about it here, but in short, each tile is scaled to fit the appropriate dimensions based on the current zoom level:

 

 

 

 

 

 

 

 

The pattern to this approach makes it very easy to know exactly what tile you need, and at what zoom level (detail).  Additionally, all of these files can be stored in a flat data structure (like a folder) which makes storage quite simple.  The best part is, Bing maps already knows how to build a quad key, so all you have to do is create a tile layer, and specify the quadkey as a parameter by putting it in curly braces, like so:

 MapTileLayer pollutionTileLayer = new MapTileLayer();
pollutionTileLayer.TileSource = "myurl.com/{quadley}.png";

But, this isn’t quite ideal.  One problem that I ran into is that if there are a large number of quad keys you don’t have (which is the case even in my app), there are a HUGE number of 404’s because the app has no way of knowing there isn’t a tile available for a specific quad key.  While the user doesn’t directly see this, it’s a lot of wasted traffic and just not clean.  The way to solve that is to roll your own GetTileUri handler.

In my next post, I’ll detail the steps involved in setting that up!