Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Display Bing maps in basemap gallery
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to use the BasemapGallery widget to update the map's basemap. This widget allows you to define a collection of basemaps to display in a default gallery or you can define a custom user interface. In this sample we add the Bing Maps basemaps to the basemap gallery.
var basemaps = [];var basemapRoad = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsRoad"
})],
title: "Road"
});
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: bingKey,
map: map
});
Once the basemaps are added to the basemap gallery widget a custom menu is built to display the three basemaps from the gallery: Roads, Aerial and Aerial with Labels.
dojo.forEach(basemapGallery.basemaps, function(basemap) {//Add a menu item for each basemap, when the menu items are selected
dijit.byId("bingMenu").addChild(new dijit.MenuItem({
label: basemap.title,
onClick: dojo.hitch(this, function() {
this.basemapGallery.select(basemap.id);
})
}));
});
When a menu item is selected, the basemap's select method is used to change the map's basemap to the newly selected item.
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>Basemap Gallery - Bing Maps</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">
<style>
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
background-color:#feffff;
overflow:hidden;
font-family:"Trebuchet MS";
margin:2%;
}
#map {
border-radius:4px;
overflow:hidden;
border:solid 2px #03c;
}
.claro .dijitButtonText {
color:#03c;
font-family: Arial, Helvetica, sans-serif
font-weight:bold;
}
.claro td.dijitMenuItemLabel {
color:#03c;
font-family: Arial, Helvetica, sans-serif
font-weight:500;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.Tooltip");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
var map, basemapGallery;
function init() {
map = new esri.Map("map", {
center: [6.389, 36.054],
zoom: 4
});
createBasemapGallery();
}
function createBasemapGallery(){
//Manually create a list of basemaps to display
var basemaps = [];
var basemapRoad = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsRoad"
})],
id: "bmRoad",
title: "Road"
});
basemaps.push(basemapRoad);
var basemapAerial = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsAerial"
})],
id: "bmAerial",
title: "Aerial"
});
basemaps.push(basemapAerial);
var basemapHybrid = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsHybrid"
})],
id: "bmHybrid",
title: "Aerial with labels"
});
basemaps.push(basemapHybrid);
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: prompt("Please enter your bing maps key"),
map: map
});
//BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
//we are going to create a custom user interface to display the basemaps, in this case a menu.
dojo.forEach(basemapGallery.basemaps, function(basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("bingMenu").addChild(new dijit.MenuItem({
label: basemap.title,
onClick: dojo.hitch(this, function() {
this.basemapGallery.select(basemap.id);
})
}));
});
}
//show map on load
dojo.ready(init);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 96%; height: 94%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div style="position:absolute; right:50px; top:10px; z-Index:99;">
<button id="dropdownButton" label="Basemaps" data-dojo-type="dijit.form.DropDownButton">
<div data-dojo-type="dijit.Menu" id="bingMenu">
</div>
</button>
</div>
</div>
</div>
</body>
</html>