There is a product called “CloudMade” which gives you the ability to choose amongst a large number of map types that have different skins. You can either create your own skins or use a pre-existing skin from the following page http://maps.cloudmade.com/editor. As cool as this is it would be even cooler if we could do something like this in Bing Maps. This post is going to describe a method that can be used to re-skin the default road tiles from Bing Maps. The idea is to create a service that downloads a tile and uses graphic tools to transform the colors on the tile. This is similar to what was done in the “Dynamic Tile Layers in the Bing Maps Silverlight Control” which can be found here: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!1047.entry.
The first step is to create a service (Generic ASHX handler in this case) that takes in a quadkey, culture and transformation type parameters via a query string. This service will the create a URL to retrieve tiles from Bing Maps. A tile will be downloaded and turned into a bitmap image so that it can be used with .NET graphic tools. For the examples in the demo the ImageAttibutes class is sued to create the transformation. The two key methods used to transform the colors consist of using ColorMatrix or a ColorMap. By using a color matrix all the colors on the tile can be changed within a couple lines of code. Using a ColorMap allows you to change one color at a time. This is useful if you only want to change a few colors on the map.
In the example application I have showed how to convert the tiles to grey scale, invert the colors, and how to use a custom color map.
Complete source code can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/CustomMapTileSkins.zip
To get this code to work you will need to add your Bing Maps API Key to the MainPage.xaml.cs file.
Note that by using this method there is a performance lose as the tiles on the map are no longer being loaded from the Bing Maps cloud but from your tile service.
Here are some screen shots of the different skins used in this code:
Grey Scaled tiles
Inverted Tiles
Custom Color Mapping
Ricky's Microsoft Maps Blog 