Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

Working with Tile Layers

Bing

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

Adding a Tile Layer

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" "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">
         
         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 }); 

            try
            {
               // Create the tile layer source
               var tileSource = new Microsoft.Maps.TileSource({uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{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
               map.entities.push(tilelayer);

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

      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>       
   </body>
</html>
Show:
© 2015 Microsoft