Hide Table of Contents
View Toggle multiple ArcGIS Online services sample in sandbox
Toggle multiple ArcGIS Online services

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);
})

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