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
Toggle multiple ArcGIS Online services
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can use buttons to switch between different layers in a map. All the layers in this map happen to be ArcGISTiledMapServiceLayers from ArcGIS Online. The BasemapGallery widget, introduced at version 2.1 of the ArcGIS JavaScript API simplifies the process of toggling the display of ArcGIS Online basemaps. In this sample a menu item is created for each basemap in the gallery. Since showArcGISBasemaps is set to true, the gallery contains basemaps from ArcGIS Online.
basemapGallery = new esri.dijit.BasemapGallery({showArcGISBasemaps: true,
map: map
});
When a menu item is selected the default basemap is changed to the selected item: onClick: dojo.hitch(this, function() {
this.basemapGallery.select(basemap.id);
})
this.basemapGallery.select(basemap.id);
})
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>Display Multiple ArcGIS Online Services</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,#map{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("dijit.form.Button");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
var map;
var basemapGallery;
function init() {
map = new esri.Map("map", {
center: [-31.036, 42.747],
zoom: 3
});
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: true,
map: map
});
dojo.connect(basemapGallery, "onLoad", function(){
dojo.forEach(basemapGallery.basemaps, function(basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("basemapMenu").addChild(
new dijit.MenuItem({
label: basemap.title,
onClick: dojo.hitch(this, function() {
this.basemapGallery.select(basemap.id);
})
})
);
});
});
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="map">
<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="basemapMenu">
</div>
</button>
</div>
</div>
</body>
</html>