function createBasemapGallery() {
esri.dijit.BasemapGallery.prototype._markSelected = function(basemap) {
if (basemap) {
// unselect all basemap gallery items
dojo.forEach(dojo.query(".esriBasemapGallerySelectedNode", this.domNode), function(node) {
dojo.removeClass(node, "esriBasemapGallerySelectedNode");
});
// select current basemap gallery item
var basemapNode = dojo.byId("galleryNode_" + basemap.id);
if (basemapNode) {
dojo.addClass(basemapNode, "esriBasemapGallerySelectedNode");
}
}
}
var aerial2010Layer = new esri.dijit.BasemapLayer({
url : "http://gis.fwb.org/arcgis/rest/services/Maps/AerialFeb2010WebM/MapServer"
});
var aerialBasemap = new esri.dijit.Basemap({
layers : [aerial2010Layer],
id : "aerial2010",
title : "Aerial Photo 2010",
thumbnailUrl : "images/basemap_imagery.jpg"
});
basemaps.push(aerialBasemap);
var wstreetsLayer = new esri.dijit.BasemapLayer({
url : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
});
var wstreetsBasemap = new esri.dijit.Basemap({
layers : [wstreetsLayer],
id : "wstreets",
title : "Streets",
thumbnailUrl : "images/basemap_streets.jpg"
});
basemaps.push(wstreetsBasemap);
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps : false,
basemaps : basemaps,
map : map
}, "basemapGalleryDiv");
selectionHandler = dojo.connect(basemapGallery, "onSelectionChange", changeBasemap);
basemapGallery.startup();
}
function changeBasemap() {
basemapsel = basemapGallery.getSelected();
basemapselid = basemapsel.id;
if (basemapselid == "aerial2010") {
parcelsLayer.hide();
hydroLayer.hide();
parcelsarLayer.show();
bfpLayer.hide();
roadsLayer.show();
roadnameLayer.show();
map.Refresh();
}
if (basemapselid == "wstreets") {
parcelsLayer.hide();
hydroLayer.hide();
parcelsarLayer.show();
bfpLayer.hide();
roadsLayer.show();
roadnameLayer.show();
map.Refresh();
}
}
//Create basemap layers - manual list that can be edited function createBasemapGallery() { //Manually create a list of basemaps to display var basemaps = []; var caBackground_GreyscaleLayer = new esri.dijit.BasemapLayer({ url: "http://example/ArcGIS/rest/services/CABackground_Greyscale/MapServer" }); var caBackground_GreyscaleBasemap = new esri.dijit.Basemap({ layers: [caBackground_GreyscaleLayer], title: "Greyscale" }); basemaps.push(caBackground_GreyscaleBasemap); var caBackgroundLayer = new esri.dijit.BasemapLayer({ url: "http://example/ArcGIS/rest/services/CABackground/MapServer" }); var caBackgroundBasemap = new esri.dijit.Basemap({ layers: [caBackgroundLayer], title: "Colour" }); basemaps.push(caBackgroundBasemap); var caAerial = new esri.dijit.Basemap({ layers: [new esri.dijit.BasemapLayer({ url: "http://example/ArcGIS/rest/services/CAAerial/MapServer" })], id: "CAAerial", title: "Aerial" }); basemaps.push(caAerial); basemapGallery = new esri.dijit.BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, 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("galleryMenu") .addChild(new dijit.MenuItem({ label: basemap.title, onClick: dojo.hitch(this, function () { this.basemapGallery.select(basemap.id); }) })); }); }
<div id="basemapswitcher" region="center"> <button id="dropdownButton" label="Basemaps" dojoType="dijit.form.DropDownButton"> <div dojoType="dijit.Menu" id="galleryMenu"> <!--The menu items are dynamically created using the basemap gallery layers--> </div> </button> </div>
var mapLayer1 = new BasemapLayer({url:"mapService1/rest/url"}); var mapLayer2 = new BasemapLayer({url:"mapService2/rest/url"}); var mapLayer3 = new BasemapLayer({url:"mapService3/rest/url"}); var mapTheme1 = new Basemap({ layers: [mapLayer1, mapLayer2], title: "Map Theme 1", thumbnailUrl:"images/mapTheme1.png" }); var mapTheme2 = new Basemap({ layers: [mapLayer1, mapLayer3], title: "Map Theme 2", thumbnailUrl:"images/mapTheme2.png" }); var basemapGallery = new BasemapGallery({ showArcGISBasemaps: false, basemaps: [mapTheme1, mapTheme2], map: map }, domConstruct.create('div'));