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

[Jose_FranciscoSánchez_Díaz]

Really easy!
Thank you Kelly!

[AndrewDavis]

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

[JohnWall]

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

[JanBenson]

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.

[BarryGuidry]

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

[JanBenson]

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.

[KellyHutchins]

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.

[BarryGuidry]

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.

[BarryGuidry]

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.