Search code examples
z-indexbing-maps

How to specify the zIndex of tile layers in Bing Maps v8 in order to overwrite town names?


The following code is copied from Bing Maps V8 interactive SDK. Only the zIndex is added:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
  credentials: 'Your Bing Maps Key',
  center: new Microsoft.Maps.Location(40.750220, -99.476964),
  zoom: 4
});
// weather radar tiles from Iowa Environmental Mesonet of Iowa State University
var weatherTileSource = new Microsoft.Maps.TileSource({
    uriConstructor: 'http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{zoom}/{x}/{y}.png'
});
var weatherTileLayer = new Microsoft.Maps.TileLayer({
  mercator: weatherTileSource,
  zIndex: 10001
});
map.layers.insert(weatherTileLayer);

Is it possible to adjust the zIndex in a way that the weather tile layer lies over the layer which shows town and state names?


Solution

  • By default the Bing Maps uses vector labels which render above everything but pushpins. You can disable this feature and have the labels rendered in the base map tiles (below tile layers) by adding the following map option when loading: liteMode: true

    You can find out more about vector labels here: https://msdn.microsoft.com/en-us/library/mt750538.aspx