Custom Rendering in Bing Silverlight Control

Question

Hi,

I'm ramping up on a Silverlight 2 project that leverages the Bing Maps control. One thing our UX guys are wondering is whether it is possible to customize the look of the map completely. For example, draw countries as simple outlines with different color interiors. Or draw the ocean as white and countries as black dotted shapes.

Does anyone know whether it is possible to achieve this level of customization? The MapMode class looked promising, but it doesn't seem to quite give me what I need.

Thanks, Kent

Answer 1

To answer my own question, yes this is possible.

Firstly, add your own layer with a custom tile source:

<m:Map>
    <m:Map.Mode>
     <mCore:MercatorMode/>
    </m:Map.Mode>
    <m:Map.Children>
     <m:MapTileLayer>
      <m:MapTileLayer.TileSources>
       <local:CustomTileSource/>
      </m:MapTileLayer.TileSources>
     </m:MapTileLayer>
    </m:Map.Children>
</m:Map>

Next, define the CustomTileSource. Here is an example:

public class CustomTileSource : TileSource
{
 public CustomTileSource()
  : base(GetAbsoluteUrl("/ClientBin/Resources/{0}.png"))
 {
 }

 public override Uri GetUri(int x, int y, int zoomLevel)
 {
  var quadKey = new QuadKey(x, y, zoomLevel);
  return new Uri(String.Format(this.UriFormat, quadKey.Key));
 }

 public static string GetAbsoluteUrl(string strRelativePath)
 {
  if (string.IsNullOrEmpty(strRelativePath))
   return strRelativePath;

  string strFullUrl;
  if (strRelativePath.StartsWith("http:", StringComparison.OrdinalIgnoreCase)
    || strRelativePath.StartsWith("https:", StringComparison.OrdinalIgnoreCase)
    || strRelativePath.StartsWith("file:", StringComparison.OrdinalIgnoreCase)
    )
  {
   //already absolute
   strFullUrl = strRelativePath;
  }
  else
  {
   //relative, need to convert to absolute
   strFullUrl = System.Windows.Application.Current.Host.Source.AbsoluteUri;
   if (strFullUrl.IndexOf("/ClientBin") > 0)
    strFullUrl = strFullUrl.Substring(0, strFullUrl.IndexOf("/ClientBin")) + strRelativePath;
  }

  return strFullUrl;
 }
}

Note how the tile source must return a URL. If you have an image you want to use as the map, you can use the MapCruncher tool to prepare it.

HTH, Kent