Adding a map image to a secondary live tile.

Does your app use live tiles to pin a tile that relates to a location that has a known Latitude and Longitude? If so did you know that it is easy to have a map of that location appear on that tile. This is done by using the Bing maps imagery service.

For starters lets look at how you create the tile in code:

var secondaryTile = new StandardTileData                  
{  
    Title = "Title Title",
    Count = null,
    BackgroundImage = new Uri("/Background.png", UriKind.Relative),
    BackBackgroundImage = new Uri("/BackBackground.png", UriKind.Relative)                 
};

ShellTile.Create(navUri, secondaryTile);

As you can see both the BackgroundImage and BackBackgroundImage take a Uri in the code above. The Uri above is specified as Relative this means that the images can be located within the apps content (as part of the XAP file) or within the applications isolated storage.

You are however not restricted to relative Uri’s you can specify Absolute Uri’s for the image. This opens up the ability to have the image come from an external web server. This is where the Bing maps imagery API comes in.

The API is a RESTfull service which means that all calls to get an image is nothing more complicated than a Uri

Here is how a call to get a map image looks:

http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/47.644829750061,-122.141661643982/15?mapSize=190,190&&key=****ENTER A KEY HERE***

This produces the following image:

You can find out more about using the Bing maps Rest services here : link with the  details of the imagery services found here: link You will also need to get yourself an application key so that you can use the service. Details can be found here: link

so for adding the image to a live tile all you need to do is get the Uri in the correct format and set that to be the source image of the tile here is an example how how I go about this:

string strURi = string.Format(
	"http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/{0},{1}/15?mapSize=190,190&&key={2}", 
	lat, lon, key); 

var secondaryTile = new StandardTileData 
{ 
	Title = selectedLI.Name, 
	Count = null, 
	BackgroundImage = new Uri("/Background.png", UriKind.Relative), 
	BackBackgroundImage = new Uri(strUri, UriKind.Absolute) 
}; 

ShellTile.Create(navUri, secondaryTile); 

The lat, lon and key variables have all been set prior to calling this code.

This is how the tile looks in the emulator:

As you can see this is a rather simple way of adding some extra information to one of your tiles.

In the next blog post I hope to extend this further and add some additional graphics to the background. I will also be making use of the powerful WP7Contrib library.