Working with Tile Layers


You are not viewing the latest version of the Bing Maps Web control (AJAX). Bing Maps V8 Web Control is the recommended JavaScript control for Bing Maps.

This topic describes how to add a custom tile layer to the map.

A tile layer is a valid map entity, so after you construct your layer, you can add it to the map using the push method of the map entities collection. The code below adds a custom tile layer to the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script type="text/javascript" src=""></script>

      <script type="text/javascript">

         function GetMap()
            // Initialize the map
            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", center:new Microsoft.Maps.Location(48.03,-122.4), zoom:12, mapTypeId: Microsoft.Maps.MapTypeId.road }); 

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

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

               // Push the tile layer to the map

               alert( 'Error Message:' + err.message);

   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>