Hide Table of Contents
View Add a Bing maps layer sample in sandbox
Add a Bing maps layer

Description

This sample shows how you can add a layer from Bing Maps (formerly Microsoft Virtual Earth) to your map. It also demonstrates how you can use buttons to switch between the different types of maps: Road, Aerial, and Aerial with Labels.

Code

<!DOCTYPE html>
<html>
 
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
   
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
   
<title>VE Tile Layer</title>
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
   
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">

   
<script>dojoConfig = { parseOnLoad: true };</script>
   
<script src="https://js.arcgis.com/3.46/"></script>
   
<script>
      dojo
.require("esri.map");
      dojo
.require("esri.virtualearth.VETiledLayer");
      dojo
.require("dijit.form.Button");

     
var veTileLayer;

     
function init() {
       
var map = new esri.Map("map");
       
//Creates the Virtual Earth layer to add to the map
       
//Example for adding a Bing Maps key
       
// bingMapsKey:  "1B2C3OlkbxWHYa1b2c3qkPrO_Ou3nRrGtSa_5Op-xvPNya1b2c3",
        veTileLayer
= new esri.virtualearth.VETiledLayer({
          bingMapsKey
: prompt("Please enter your bing maps key"),
          mapStyle
: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL
       
});
        map
.addLayer(veTileLayer);
     
}
      dojo
.ready(init);
   
</script>

 
</head>
 
<body class="claro">
   
<div style="position:relative;">
     
<div id="map" style="width:1024px; height:512px; border:1px solid #000;">
     
<div style="position:absolute; left:650px; top:10px; z-Index:999;">
       
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>
       
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>
       
<button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD)">Roads</button>
     
</div>
     
</div>
   
</div>
 
</body>
</html>
 
         
Show Modal