topic Re: Widget: BasemapGallery dropdown question in ArcGIS JavaScript Maps SDK Questions

Widget: BasemapGallery dropdown question

JanBenson — Tue, 20 Dec 2011 14:31:21 GMT

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!

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Sun, 12 Dec 2021 07:33:30 GMT

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

Re: Widget: BasemapGallery dropdown question

JanBenson — Tue, 20 Dec 2011 19:14:58 GMT

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!

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Sun, 12 Dec 2021 07:33:33 GMT

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>

Re: Widget: BasemapGallery dropdown question

JanBenson — Tue, 20 Dec 2011 21:05:31 GMT

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.

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Sun, 12 Dec 2021 07:33:38 GMT

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>

Re: Widget: BasemapGallery dropdown question

ChristopherPollard — Wed, 15 Feb 2012 15:46:23 GMT

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

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Wed, 15 Feb 2012 16:15:13 GMT

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

Re: Widget: BasemapGallery dropdown question

Jose_FranciscoSánchez_Díaz — Mon, 16 Apr 2012 11:44:17 GMT

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!!

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Mon, 16 Apr 2012 14:54:04 GMT

You'll want to follow the instructions on this page to create a group:

http://help.arcgis.com/en/arcgisonline/help/010q/010q00000016000000.htm

Once the group is created you can add web maps to the group that contain the basemaps you want to display. So if your organization has a basemap you'd like to add just create a web map with just that basemap added then share it to the group.

Kelly

Re: Widget: BasemapGallery dropdown question

Jose_FranciscoSánchez_Díaz — Wed, 18 Apr 2012 06:29:23 GMT

Really easy!
Thank you Kelly!

Re: Widget: BasemapGallery dropdown question

AndrewDavis — Fri, 18 May 2012 13:24:32 GMT

Hi,

I have read the entries here and I am working with something similar, but having limited success.

I have my .api's (2.8) installed locally and running fine on my server.

I have 3 cached services which I would like to display in the BasemapGallery dropdown. So far I have gotten two do display (Names of the services) in the dropdown button. However, I am only able to get the first one to work on the click event. This is a manually loaded gallery.

I am unsure of the changes I have made to the function.

function createBasemapGallery(){
//Manually creating a list of basemaps to display
var basemaps = [];
var myStreets = new esri.dijit.BasemapLayer({url: "http://myLittleServer/rest/services/myfolders/MapServer"});
var theStreets = new esri.dijit.Basemap({layers: [myStreets], title: "The StreetNetwork"});
basemaps.push (theStreets);

var myHouses = new esri.dijit.BasemapLayer({url: "http//myLittleServer/rest/services/myotherfolders/MapServer"});
var theHouses = new esri.dijit.Basemap({layers:[myHouses], title: "The Houses"});
basemaps.push (theHouses);

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

Why is there only one working service, and the second one does not display on the click event?

Andy...

Re: Widget: BasemapGallery dropdown question

JohnWall — Thu, 02 Aug 2012 09:10:06 GMT

Is there a way for me to add this thread to my favorites or something?

Re: Widget: BasemapGallery dropdown question

JanBenson — Thu, 02 Aug 2012 14:56:40 GMT

John,

When you reply to a thread, below the text input window there are Additional Options. Under Additional Options there is Subscriptions. Here you can opt for email instantly, daily, or weekly.

Re: Widget: BasemapGallery dropdown question

BarryGuidry — Thu, 16 Aug 2012 13:35:02 GMT

How do you make the "Basemapgallery" drop-down menu collapse after making a selection within?

Re: Widget: BasemapGallery dropdown question

JanBenson — Thu, 16 Aug 2012 14:56:08 GMT

It should be built into the sample. My button from the sample does collapse after I make a selection. If I select the Basemaps button, but then do nothing, it will stay open until I click anywhere in the window.

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Sun, 12 Dec 2021 07:33:41 GMT

Barry,

Something like this should close the dropdown after a selection is made:

      dojo.connect(bookmarks, 'onClick', function(evt) {
        dojo.query('.dijitDropDownButton').forEach(function(node,idx){
            var btn = dijit.getEnclosingWidget(node);

            btn.closeDropDown();
        });
        });

If you have multiple dropdown buttons in your app you'll have to tweak the code a bit to just get the one for the Bookmarks.

Re: Widget: BasemapGallery dropdown question

BarryGuidry — Thu, 16 Aug 2012 15:20:11 GMT

It should be built into the sample. My button from the sample does collapse after I make a selection. If I select the Basemaps button, but then do nothing, it will stay open until I click anywhere in the window.

OK, I see, there is a difference between the samples. The one I started with, here, does not collapse automatically, and is a "digit.TitlePane" rather than a "dijit.form.DropDownButton" as this one.

Re: Widget: BasemapGallery dropdown question

BarryGuidry — Tue, 28 Aug 2012 18:43:38 GMT

Actually, I would like to copy the BasemapGallery functionality from the sample here, but cannot figure it out. There is a dojo requirement "dojo.require("myModules.custommenu")" that I guess cannot be utilized. Or, at least, can someone see how the "Basemaps" menu button collapses after changing the basemap? That is actually all I need to add to my code possibly.

Re: Widget: BasemapGallery dropdown question

KellyHutchins — Sun, 12 Dec 2021 07:33:43 GMT

The code in custommenu is just used to assign images as icons to the menu items listed in the Basemap menu. You can view the code for custommenu.js by using either Firebug or Chrome Developer tools to inspect the scripts associated with the page.

Here's a simple sample based off the code (without the custommenu) that shows how to populate a dropdown menu with basemaps.

<!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/3.1/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=3.1"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.dijit.BasemapGallery");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
      dojo.require("esri.map");

      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-122.46,"ymin":37.73,"xmax":-122.36,"ymax":37.77,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{
          extent:esri.geometry.geographicToWebMercator(initExtent)
        });
        //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/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        dojo.connect(map, 'onLoad', function(theMap) { 
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
          createBasemapGallery();
        });
      }
      function createBasemapGallery() {
        basemapGallery = new esri.dijit.BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        });

        dojo.connect(basemapGallery, 'onLoad', function () {
          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          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.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;">
           <div style="position:absolute; right:65px; top:10px; z-Index:99;">
          <button id="dropdownButton" baseClass='medium button green' iconClass="basemapIcon" 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>