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):

Displaying Weather and Traffic Conditions in Bing Maps

I’ve answered several questions on the MSDN forums recently asking how to overlay traffic and weather information on Bing Maps. For future reference, I thought I’d write up the answers together here.

Weather

You can get weather information from the U.S. National Oceanic and Atmospheric Administration (NOAA). The NOAA expose a number of WMS layers showing, for example, cloud coverage, real-time radar data, wind speed and sea levels across the U.S. and territories. (Sadly, I’m not aware of an equivalent data source for the rest of the world). You can find information on the various layers available from http://nowcoast.noaa.gov/help/mapservices.shtml?name=mapservices

The data is exposed as WMS layers, so start by following my previous posts explaining how to access and overlay WMS layers on the AJAX v7 or Silverlight control. Replace the URLTemplate in these examples with the URL of the NOAA WMS service, as follows:

string urlTemplate = “http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetMap&format=png&BBOX={0}&SRS=EPSG:4326&width=256&height=256&transparent=true&Layers=RAS_RIDGE_NEXRAD”;

This example retrieves the RAS_RIDGE_NEXRAD layer, which is a RADAR mosaic for CONUS, Puerto Rico, Hawaii, Alaska, and Guam. When overlaid on Bing Maps, it looks like this (illustrating the weather currently affecting the Mississippi river area):

If you want to add several different weather layers from the NOAA and control them separately you can make several separate requests to the WMS service, changing the URL template each time to request the appropriate layer. Otherwise, you can make a single request that merges several types of information in one layer, by passing a comma-separated list in the LAYERS parameter. E.g. to retrieve a single layer that displays both the land surface temperature (OBS_MET_TEMP) and the sea surface temperature point observations (OBS_MAR_SSTF) in a single layer, you can use the following URL template:

string urlTemplate = “http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?service=wms&version=1.1.1&request=GetMap&format=png&BBOX={0}&SRS=EPSG:4326&width=256&height=256&transparent=true&Layers=OBS_MET_TEMP,OBS_MAR_SSTF”;

Traffic

Bing Maps v6.x contained an inbuilt option to display traffic using the VEMap.LoadTraffic method. This method does not exist in v7 or in the Silverlight control, but you can still access the same tileset as used by the v6.x control. The URL at which these tiles are located is:

http://t0.tiles.virtualearth.net/tiles/t{quadkey}.png

Note that, this time, these are tiles that have already been cut into the Bing Maps quadkey system, so you don’t need to add the intermediate WMS handler step as with the weather example above. Instead, you can directly add a tilesource pointing to the traffic tile data as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
   <script type="text/javascript">
     var map = null;
     var tilelayer = null;
     function GetMap()
     {
      // Initialize the map
      map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", center:new Microsoft.Maps.Location(47.9,-122), zoom:9, mapTypeId:"r"}); 

      // Create the tile layer source
      var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://t0.tiles.virtualearth.net/tiles/t{quadkey}.png' });

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

      // Push the tile layer to the map
      map.entities.push(tilelayer);
     }
   </script>
  </head>
  <body onload="GetMap();">
   <div id='mapDiv' style="position:relative; width:640px; height:480px;"></div>
  </body>
</html>

And here’s what the traffic tiles look like (for the benefit of anybody currently stuck in traffic in New York):

Sadly, once again, this data is for the US only. Also note that there are a few clauses in the Bing Maps Terms of Use specifically governing the use of traffic data.

If anybody knows of any good sources of weather/traffic data for the world outside America, I’d love to hear them!