Displaying Labels on top of Bing Maps Custom Tile Layers

Before I go any further, I ought to mention that any credit for this post should go to Bing Maps MVP Nicolas Boonaert, who first pointed out this technique in this post on the MSDN Bing Maps forum. Thanks Nicolas!

Generally speaking, when you place custom tile layers on a Bing Map, they are superimposed on top of a base tile layer. Historically, that tile layer could either use the road map style, or the aerial style (with or without label), as shown below:

Road Map Style (“r”)
Aerial Map Style no labels (“a”)	Aerial Map Style with labels (“h”)

There’s two points to note here. Firstly, there was no way to display a road map without labels, and nor was there a way to separate the labels from the aerial tiles – labels were either pre-rendered onto the map styles in question, or they weren’t present at all.

Then last year, a new “Lavender” road map style was introduced in two flavours – one with labels and one without:

New road map style no labels (“r”, “stl=h”, “lbl=l0”)

New road map style with labels (“r”, “stl=h”)

However these labels, like those before, were still pre-rendered onto the tile image. This meant that, if you created a custom tile layer and inserted it on top of the base map imagery, you couldn’t easily see any labels on the map, since they always lay “behind” your custom tile layer. This problem is demonstrated well in this image taken from my previous post, in which the weather radar tile layer obscures the placenames in the base aerial tile layer:

However, as Nicolas pointed out, it seems that we also now have the ability to request transparent tiles that contain only the labels, separate from any other features of the map. These labels are available in styles to match both the “old” and “new” road map styles, as follows:

“Old” Label only style (“ho”)

“New” Label only style (“ho”, stl=”h”)

What this means is that you can now use either the aerial or road base map layer without labels, then overlay your custom tile layer, and then insert the labels on top. For example, to add “classic” style labels to my previous weather map, you can use code as follows:

// Define the tile layer source
var labelTileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://ecn.t2.tiles.virtualearth.net/tiles/ho{quadkey}?g=671&mkt=en-US' });

// Construct the layer using the tile source
var labelTilelayer = new Microsoft.Maps.TileLayer({ mercator: labelTileSource, opacity: 1.0 });

// Push the tile layer to the map
map.entities.push(labelTilelayer);

And you can now see the labels on top of the radar imagery as follows to see some of those places that were previously obscured (note also that the weather has changed since I wrote my first post – the NOAA WMS server is updated in near real-time):