Click here to Skip to main content
Click here to Skip to main content

Tagged as

Google Sky on Windows Phone 7

, 20 May 2011
Rate this:
Please Sign up or sign in to vote.
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! 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, coupl

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"></OBJECT>

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Colin Eberhardt
Architect Scott Logic
United Kingdom United Kingdom
I am CTO at ShinobiControls, a team of iOS developers who are carefully crafting iOS charts, grids and controls for making your applications awesome.
 
I am a Technical Architect for Visiblox which have developed the world's fastest WPF / Silverlight and WP7 charts.
 
I am also a Technical Evangelist at Scott Logic, a provider of bespoke financial software and consultancy for the retail and investment banking, stockbroking, asset management and hedge fund communities.
 
Visit my blog - Colin Eberhardt's Adventures in .NET.
 
Follow me on Twitter - @ColinEberhardt
 
-
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 21 May 2011
Article Copyright 2011 by Colin Eberhardt
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid