Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Add a Bing maps layer
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
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.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script>dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.29/"></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>