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 = [];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) {<!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>