In my top header I have a table, each cell containing a button; here's the html for the basemap dropdown. I used a form DropDownButton & dijit Menu.
<td align="center" style="width: 60px;" valign="middle">
<button id="dropdownButton" iconClass="btnImgBaseMap" title="Switch Basemap" dojoType="dijit.form.DropDownButton">
<div dojoType="dijit.Menu" id="bingMenu">
<!--The menu items are dynamically created using the basemap gallery layers-->
</div>
</button>
</td>
here's my createbasemap function
function createBasemapGallery() {
var streetBasemapURL = new esri.dijit.BasemapLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
});
var topoBasemapURL = new esri.dijit.BasemapLayer({
url:"https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
});
var basemaps= [];
var bingBasemap = new esri.dijit.Basemap({
id: "Bing",
layers:[new esri.dijit.BasemapLayer({
type: "BingMapsAerial"})
],
title:"BingImagery"
//thumbnailUrl:"images/imagery_thumb.png"
});
basemaps.push(bingBasemap);
var streetBasemap = new esri.dijit.Basemap({
id: "Street",
layers:[streetBasemapURL],
title:"Street"
//thumbnailUrl:"images/street_thumb.png"
});
basemaps.push(streetBasemap);
var topoBasemap = new esri.dijit.Basemap({
id: "Topo",
layers:[topoBasemapURL],
title:"Topo"
//thumbnailUrl:"images/topo_thumb.png"
});
basemaps.push(topoBasemap);
var basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: false,
bingMapsKey: 'mykey',
basemaps: basemaps,
map: map
});
basemapGallery.startup();
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,
iconClass: basemap.title,
onClick: function(){basemapGallery.select(basemap.id)}
}));
});
}
For the Thumbnail images, pay attention to the iconClass: basemap.title when the dijit.MenuItem is built.In my CSS I have the following classes defined
.BingImagery {
background-image: url("images/imagery_thumb.png");
background-repeat: no-repeat;
height: 60px;
width: 60px;
}
.Street {
background-image: url("images/street_thumb.png");
background-repeat: no-repeat;
height: 60px;
width: 60px;
}
.Topo {
background-image: url("images/topo_thumb.png");
background-repeat: no-repeat;
height: 60px;
width: 60px;
}