Widget: BasemapGallery dropdown question

[JanBenson]

I just posted this, but can't find it so I will try again.

I am trying to duplicate the widget BasemapGallery- dropdown (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm) button.  I want this particular one because I can customize the dropdown window and I want a simple dropdown button.  The example uses all Bing items.  I want to use the basemaps Ocean_Basemap, NatGeo_World_Map, and I3_Imagery_Prime_World_2D .  My confusion is in the type and id.  The example code shows the following:

      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: bingKey,
          map: map
        });

Do I replace type: �??BingMapsAerial�?� with �??Ocean_Basemap�?�?  What do I use instead for id: �??bmRoad�?�?  I do not understand where type and id are coming from.  When I look at http://services.arcgisonline.com/ArcGIS/rest/services/ and go into the individual layers, I still can�??t seem to find similar items.  I realize the basemaps are already there, but it looks like I still have to define them to build the custom menu.  If there is a simpler way, I�??m game, but I am a beginner.

Thanks for your help!

[KellyHutchins]

You will need to manually build the basemaps you want to add to the gallery. Here's an example that shows adding the Oceans and National Geographic basemaps. You can't include the Imagery Prime map with these because its in a different spatial reference (4326) and all the basemaps in the gallery need to share the same spatial reference.

        //Manually create a list of basemaps to display
        var basemaps = [];
      
      var oceanLayer = new esri.dijit.BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
      });
       var oceansBasemap = new esri.dijit.Basemap({
          layers:[oceanLayer],
          title:"World Oceans",
          thumbnailUrl:"http://www.arcgis.com/sharing/content/items/2adf08a4a1a84834a773805a6e86f69e/info/thumbnail/oceans.jpg"
        });
        basemaps.push(oceansBasemap);
        
        var natGeoLayer = new esri.dijit.BasemapLayer({
          url:"http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
        });
        var natGeoBasemap = new esri.dijit.Basemap({
          layers:[natGeoLayer],
          title:"National Geographic",
          thumbnailUrl:"http://www.arcgis.com/sharing/content/items/b9b1b422198944fbbd5250b3241691b6/info/thumbnail/natgeo3.jpg"
        });

       basemaps.push(natGeoBasemap);
      
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          map: map
        });

Alternatively you could create a group in ArcGIS.com that contains the basemaps you want to display then use the new (at version 2.6) basemapsGroup option to specify the owner and name of the group you created:

 var basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: true,
   basemapsGroup:{owner:"esri",title:"Community Basemaps"},
   map: map
 }, dojo.create('div'));

[JanBenson]

Thanks Kelly.  I am still confused though.   In the Widgets-BasemapGallery-Dropdown description it says �??This widget allows you to define a collection of basemaps to display in a default gallery or you can define a custom user interface.�?�  The sample you provided has a thumbnailURL which I do not want, just a clean dropdown text window.  From reading the documentation on the API reference- digits-BasemapLayer (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi_start.htm), it looks like you can specify url for type.  I am thinking I put in whatever I want for id: or is there an id for each map resource?  Here is what I have so far.  I commented out any reference to bingMapsKey.  Shouldn�??t this work or is it not possible to modify this widget to a user defined subset?

        function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = []; 
        var basemapOcean = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
          })],
          id: "bmOcean",
          title: "Ocean"
        });
        basemaps.push(basemapOcean);

        var basemapImagery = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
          })],
          id: "bmImagery",
          title: "Imagery"
        });
        basemaps.push(basemapImagery);

        var basemapNatGeo = new esri.dijit.Basemap({
          layers: [new esri.dijit.BasemapLayer({
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
          })],
          id: "bmNatGeo",
          title: "National Geographic"
        });
        basemaps.push(basemapNatGeo);


        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: false,
          basemaps: basemaps,
          //bingMapsKey: bingKey, 
          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);
            })
          }));
          
        });
      }


Thanks!

[KellyHutchins]

Yes your code should work. I updated my sample to add the world imagery and remove the thumbnails and it worked for me.
Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>
      Basemap Gallery - Bing Maps
    </title>
       <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">

    <style type="text/css">
      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 type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">
    </script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      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() {
        var initialExtent = new esri.geometry.Extent({
          "xmin": -1641867,
          "ymin": 2647172,
          "xmax": 3064207,
          "ymax": 4765395,
          "spatialReference": {
            "wkid": 102113
          }
        });
        map = new esri.Map("map", {
          extent: initialExtent
        });

        createBasemapGallery();
 
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });

      }
      function createBasemapGallery(){
        //Manually create a list of basemaps to display
        var basemaps = [];
      
      var oceanLayer = new esri.dijit.BasemapLayer({
        url: "http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"
      });
       var oceansBasemap = new esri.dijit.Basemap({
          layers:[oceanLayer],
          title:"World Oceans"
        });
        basemaps.push(oceansBasemap);
        
       var basemapImagery = new esri.dijit.Basemap({ 
         layers: [new esri.dijit.BasemapLayer({ 
           url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" 
         })], 
         id: "bmImagery", 
         title: "Imagery" 
       }); 
       basemaps.push(basemapImagery);        
        
        var natGeoLayer = new esri.dijit.BasemapLayer({
          url:"http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"
        });
        var natGeoBasemap = new esri.dijit.Basemap({
          layers:[natGeoLayer],
          title:"National Geographic"
        });

       basemaps.push(natGeoBasemap);
      
        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("bingMenu").addChild(new dijit.MenuItem({
            label: basemap.title,
            onClick: dojo.hitch(this, function() {
              this.basemapGallery.select(basemap.id);
            })
          }));
          
        });
      }

      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 95%; height: 94%;">

      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton"  label="Basemaps"  dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="bingMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>

    </div>
  </body>

</html>

[JanBenson]

Kelly,  
  I was just getting ready to post my code which now works when yours appeared.  Yes it works.

Thanks again.  It is a learning process.

[ChristopherPollard]

Thanks for the code sample. Its exactly what I was looking for.
I was also looking for any sample code that shows how to use the basemap gallery menu and overlay my own dynamic map services as operational layers?
I really like the sample on the main JS page:http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

I currently have the Canvas map as my basemap with a few dynamic map services (which the user can toggle) and NOW I want to add the Dropdown Menu to allow users to switch to ESRI World Imagery,etc.

Here's the first few lines of code...I keep running into an issue when I add the create basemap galley.
Any help or suggestions would be perfect...if you need to see all or more of my code please let me know.
Thanks,
Chris Pollard

function init() {
   //  DVRPC region   initExtent = new esri.geometry.Extent({"xmin":-8502778.91,"ymin":4784652.06,"xmax":-8227605.61,"ymax":4968100.93,"spatialReference":{"wkid":102100}});
    initExtent = new esri.geometry.Extent({"xmin":-8513951.985121,"ymin":4786968.660565,"xmax":-8248256.864588,"ymax":4996406.126118,"spatialReference":{"wkid":102100}});

        //setup the popup window 
        var popup = new esri.dijit.Popup({marginTop:35,
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, 
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), 
    new dojo.Color([255,255,0,0.25]))
        }, 
   dojo.create("div"));
   
        map = new esri.Map("map",{
          infoWindow:popup,
          extent:initExtent
        });

    
        dojo.connect(map,"onLoad",mapReady);
  
  
  //   imagemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
     //   map.addLayer(imagemap);
  
  basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap);
    
        refmap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer");
        map.addLayer(refmap);
  
  var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [6];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
     cii = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"cii",  "imageParameters": imageParameters, "opacity":1.00});
        map.addLayer(cii);
  
  admin = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"admin", visible:true,"opacity":0.80});
        map.addLayer(admin);
  admin.setVisibleLayers([0,1,2]);
        
  transmap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer",{id:"transmap", visible:true,"opacity":1.00});
        map.addLayer(transmap);
  transmap.setVisibleLayers([3,4,5]);   

      }

[KellyHutchins]

Christopher,

Here's an example that shows how to add the basemap gallery basemaps to the map in a dropdown button.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .esriScalebar {
        padding: 20px 20px;
      }
      #map {
        padding:0;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.Menu");
      dojo.require("dijit.form.Button");

      var map;
      var basemapGallery;

      function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": -75.50,
          "ymin": 39.84,
          "xmax": -74.67,
          "ymax": 40.14,
          "spatialReference": {
            "wkid": 4326
          }
        });
        map = new esri.Map("map", {
          extent: esri.geometry.geographicToWebMercator(initExtent)
        });


        dojo.connect(map, 'onLoad', function () {
          //create the basemap gallery dropdown 
          createBasemapGallery();
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
        map.addLayer(basemap);

        //add dynamic layers
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [6];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        var cii = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "cii",
          "imageParameters": imageParameters,
          "opacity": 1.00
        });
        map.addLayer(cii);

        var admin = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "admin",
          visible: true,
          "opacity": 0.80
        });
        map.addLayer(admin);
        admin.setVisibleLayers([0, 1, 2]);

        var transmap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/Ci2_raster/MapServer", {
          id: "transmap",
          visible: true,
          "opacity": 1.00
        });
        map.addLayer(transmap);
        transmap.setVisibleLayers([3, 4, 5]);


      }

      function createBasemapGallery() {
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        });
        dojo.connect(basemapGallery, 'onLoad', function () {
          //add the basemaps to the menu
          dojo.forEach(basemapGallery.basemaps, function (basemap) {
            dijit.byId("basemapMenu").addChild(new dijit.MenuItem({
              label: basemap.title,
              onClick: dojo.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
        });


      }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
        <!-- basemap dropdown -->
        <div style="position:absolute; right:50px; top:10px; z-Index:99;">
          <button id="dropdownButton" iconClass="bingIcon" label="Basemaps" dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="basemapMenu">
              <!--The menu items are dynamically created using the basemap gallery layers-->
            </div>
          </button>
        </div>
      </div>
    </div>
  </body>

</html>

[ChristopherPollard]

Kelly,
Perfect again.
I'll make sure to send you the link to the final web app when I'm done.
I'll probably add it to my Public ArcGIS.com contents as well (user:map12).
I have a few already listed and this will be a good example to add.

My next step is to manually build the galley with the code you already provided to only include just few basemap options.
enjoy,
Chris

[KellyHutchins]

Chris,

I look forward to seeing the finished app. One simple way to show a filtered list of basemaps would be to create a group in ArcGIS.com that contains only the basemaps you want to display in the gallery. You can then specify this group when creating the BasemapGallery and the gallery will display your custom basemaps. This is often easier than typing out the urls, thumbnails etc for each of the basemaps you want to include.

var basemapGallery = new esri.dijit.BasemapGallery({
   showArcGISBasemaps: true,
   basemapsGroup:{owner:"esri",title:"Community Basemaps"},
   map: map
}, dojo.create('div'));

[Jose_FranciscoSánchez_Díaz]

Hello Kelly:
I just want to do same thing. I don't know how to create a group in ArcGIS.com that contains only the basemaps.
Could you tell me how? Thanks!!