Google Sky on Windows Phone 7

This blog post shows just how easy it is to use Google Sky as a tile source for Bing Maps, bringing the universe to Windows Phone 7!

<object type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=3,0,0,0" width="512" height="390" data="http://www.youtube.com/v/a_NIm6baP_s?fs=1&hl=en_US"><param name="movie" value="http://www.youtube.com/v/a_NIm6baP_s?fs=1&hl=en_US" /><param name="quality" value="high" /><param name="wmode" value="transparent" />

Personally I think mapping is one of the most exciting forms of application for mobile devices – the fantastic imagery available from Bing and Google maps, coupled with GPS technology, results in some pretty amazing tools. As a Windows Phone 7 developer, I have spent a fair bit of time poking round the Silverlight Bing Maps APIs. A really cool feature of the Bing Maps control is that it accepts custom tile-sources. You can find code elsewhere that explains how to use this to render Google Maps data via a Bing maps chart control. For a bit of fun I decided to use this approach to render Google Sky on WP7 …

Finding the correct URL format is as easy as opening up firebug and looking at the HTTP traffic when using Google Sky:

With this knowledge, creating a custom tile source for Bing maps is pretty trivial

public class GoogleTile : Microsoft.Phone.Controls.Maps.TileSource
{
    public GoogleTile()
    {
        UriFormat = @"http://mw1.google.com/mw-planetary/sky/skytiles_v1/{0}_{1}_{2}.jpg";
    }
 
    public override Uri GetUri(int x, int y, int zoomLevel)
    {
        if (zoomLevel > 0)
        {
            var Url = string.Format(UriFormat, x, y, zoomLevel);
            return new Uri(Url);
        }
        return null;
    }
}</span><span style="color: rgb(0, 128, 0);"></span> 

And associating your tile source with a map control is as simple as this …

<map:Map Name="map"
    CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" ScaleVisibility="Collapsed"
    ZoomLevel="2"
    CredentialsProvider="-- YOUR API KEY GOES HERE!!! ---">
    <map:Map.Mode>
        <mapCore:MercatorMode/>
    </map:Map.Mode>
    <map:MapTileLayer>
        <map:MapTileLayer.TileSources>
            <local:GoogleTile/>
        </map:MapTileLayer.TileSources>
    </map:MapTileLayer>
</map:Map> 

When exploring the sky, funnily enough, it becomes pretty obvious that most of it is black! In order to make this a more interesting application I added a little ‘menu’ across the bottom that allows you to select from the list of 110 Messier Objects, a catalogue of interesting astronomical objects that are not comets. The thumbnail images for each object were scraped from Wikipedia, and the coordinates retrieved from the SIMBAD astronomical database via a little C# command line app.

They are rendered in the UI via an ItemsControl:

<ItemsControl x:Name="MessierObjects"
                Grid.Row="2">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Width="100" Height="100"
                    MouseLeftButtonUp="Grid_MouseLeftButtonUp">
                <Image Source="{Binding Path=ThumbSource}"
                        Stretch="Fill" Margin="5"/>
                <TextBlock Text="{Binding Path=Name}"
                            Margin="5"
                            FontSize="25" FontWeight="Bold"
                            Foreground="LightGray"
                            Opacity="0.5"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer HorizontalScrollBarVisibility="Visible">
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

With a click handler that navigates the map control to the correct location:

private void Grid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    var messier = ((FrameworkElement)sender).DataContext as MessierObject;
 
    map.SetView(messier.Coords, 11);
} 

I would love to build this application further, however, usage of Google Maps tiles outside of their service is a violation of their terms and conditions. For that reason, this code is shown just for a bit of fun, it shows easy it is to bring together two different technologies, Bing Maps and the Google Sky tile imagery, to create something cool with very few lines of code.

As an aside, I would have liked to have used the data from the less well know Microsoft WorldWide Telescope, which is accessible through Bing Maps, but just couldn’t work out the tile URL format. This is a shame, I would be happier building this application further based on a Microsoft datasource.

You can download the sourcecode here: GoogleSkyWP7.zip

Regards,
Colin E.