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.29/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.29/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 { -moz-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.29/"></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>