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:

image
Road Map Style (“r”)
image
Aerial Map Style no labels (“a”)
image
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:

image
New road map style no labels (“r”, “stl=h”, “lbl=l0”)
image
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:

image

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:

ho12022
“Old” Label only style (“ho”)
image
“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):

image

This entry was posted in Bing Maps, Spatial and tagged , . Bookmark the permalink.

One Response to Displaying Labels on top of Bing Maps Custom Tile Layers

  1. ben says:

    It looks like you can only get the labels to not show for Birdseye or Satellite view. Also the labels you get from making a call to http://ecn.t2.tiles.virtualearth.net/tiles/ho12022?g=671&mkt=fr-fr&lbl=l1&stl=h are different color than the one on the road map. Do you know of anyway to get them as the same color as the road map.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s