Creating Striking Mapping Applications On Windows Phone 7 Using Bing Maps and CloudMade
Thursday, January 20th, 2011
After presenting at the Bing Maps User Group recently in which i discussed how to implement a custom mapping tile layer using the Deep Earth Silverlight control (http://deepearth.codeplex.com) and the Cloudmade mapping service (http://www.cloudmade.com) I began thinking about using this method to create a mapping application for Windows Phone 7 which more fits in with metro theme.
To begin with let’s have a look at the app we are going to build, as you can see the tiles being displayed are completely different to the standard Bing Maps tiles. Not only are you able to choose from thousands of pre-set map styles but you can also create your own too!
Ok lets kick off building this, to begin you are going to need to head off to the Bing Maps Portal to sign up and create yourself an application key. Once you have done this head off to CloudMade and create yourself a developer account. We are now in a position to actually write some code, create a new WP7 project and add a reference Microsoft.Phone.Controls.Maps.dll. We can now add some code to our MainPage.xaml as below.
Add two namespace statements to the top of the page:
xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
xmlns:core="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"
Then add a map control to the page also, setting the map mode as below:
<maps:Map CredentialsProvider="{Enter Your Bing Maps Key Here}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Name="map1" >
<maps:Map.Mode>
<core:MercatorMode></core:MercatorMode>
</maps:Map.Mode>
</maps:Map>
If you run the application at this point you will not see a great deal of anything, in effect what we have done is turn off the standard Bing Map tiles. We now need to create our custom tile provider to serve the tiles from CloudMade to our app using the code below:
public class CloudMadeTileSource : TileSource
{
private const string _tilePath= "http://{S}.tile.cloudmade.com/{creds}/{style}/256/{Z}/{X}/{Y}.png";
private readonly Random _rand = new Random();
private readonly string[] TilePathPrefixes = new[] { "a", "b", "c" };
public string CloudMadeCredentialsProvider { get; set; }
public string CloudMadeMapStyleId { get; set; }
public override Uri GetUri(int x, int y, int zoomLevel)
{
string url = string.Empty;
string prefix = string.Empty;
prefix = TilePathPrefixes[_rand.Next(3)];
url = _tilePath;
//Randomize to different OSM Servers based on URL prefix
url = url.Replace("{creds}", CloudMadeCredentialsProvider);
url = url.Replace("{style}", CloudMadeMapStyleId);
url = url.Replace("{S}", prefix);
url = url.Replace("{Z}", zoomLevel.ToString());
url = url.Replace("{X}", x.ToString());
url = url.Replace("{Y}", y.ToString());
return new Uri(url);
}
}
Here we are inheriting from the TileSource class and overiding the GetUri method which gives the mapping control the uri to the image file for a tile on the map. this is done by taking a URL which has placeholders for the important pieces of information the CloudMade system requires which is described very well on the CloudMade site. we also have properties for setting the CloudMade credentials and style id so these can be set in xaml.
We can now add a a reference to this class in our xaml as so:
xmlns:local="clr-namespace:StylisedMap"
Then add the TileSource to the map in our xaml:
<maps:Map CredentialsProvider="{Enter Your Bing Maps Key Here}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.Row="1" Name="map1" >
<maps:Map.Mode>
<core:MercatorMode></core:MercatorMode>
</maps:Map.Mode>
<maps:MapTileLayer>
<maps:MapTileLayer.TileSources>
<local:CloudMadeTileSource
CloudMadeCredentialsProvider="{Enter Your CloudMade Key Here}"
CloudMadeMapStyleId="{Enter Your Chosen Map Style Id Here}" />
</maps:MapTileLayer.TileSources>
</maps:MapTileLayer>
</maps:Map>
If you now build and run the application you have a working Bing Map Windows Phone Application with custom map tiles. Enjoy!!
You can download the sample project here.
