Create a base map gallery list in a drop down button using AMD

[KenBuja]

I'm attempting to convert the example that Kelly wrote to add the basemap gallery basemaps to the map in a dropdown button into AMD. I'm running into a problem with getting the base maps added to the button. In this function, the ForEach loop fires, but the children aren't added. I've created a fiddler with the new code and original code commented out.

                         function createBasemapGallery() {                 var basemapGallery = new BasemapGallery({                     showArcGISBasemaps: true,                     map: map                 });                  connect.connect(basemapGallery, 'onLoad', function () {                     array.forEach(basemapGallery.basemaps, function (basemap)                          dom.byId('basemapMenu').addChild(new dijit.MenuItem({                             label: basemap.title,                             onClick: lang.hitch(this, function(){                                 this.basemapGallery.select(basemap.id);                             })                         }));                     });                 });             } 

[derekswingley1 · Accepted solution]

Use dijit/registry.byId to get a reference to a dijit (in this case your dijit/Menu) and not dom.byId. Then use addChild on the object retuned by registry.byId. I also cleaned up the code and markup a little:  http://jsfiddle.net/rVM9Z/

[KenBuja]

Thanks Derek!

[Anonymous User]

Was just going to ask how to convert that basemap drop down menu sample to AMD, so glad you posted this!

[Anonymous User]

I'm sorry to dig up this old thread, but if you're there, I am having a problem populating the basemap dropdown menu with a custom list of basemaps. The code works great when 'showArcGISBasemaps : true', but not when 'false' and I try to use my own list in the BasemapGallery. Here I make my custom list:

 // Create custom list of basemaps for the gallery
 var basemapsList = [];
 var basemapAerial = new Basemap({
  layers : [new BasemapLayer({
   type : "BingMapsAerial"
  })],
  title : "Aerial",
  thumbnailUrl : "images/bingMapsAerial.png"
 });
 basemapsList.push(basemapAerial);

 var basemapHybrid = new Basemap({
  layers : [new BasemapLayer({
   type : "BingMapsHybrid"
  })],
  title : "Hybrid",
  thumbnailUrl : "images/bingMapsHybrid.png"
 });
 basemapsList.push(basemapHybrid);
 

And here I put it in the basemapGallery, but in this scenario, the dropdown is empty:

function createBasemapGallery() {  
  var basemapGallery = new BasemapGallery({
   showArcGISBasemaps : false,
   bingMapsKey : "example",
   basemaps : basemapsList,
   map : map
  });
 basemapGallery.startup();

  connect.connect(basemapGallery, 'onLoad', function() {
   arrayUtils.forEach(basemapGallery.basemaps, function(basemap) {
    registry.byId('basemapMenu').addChild(new MenuItem({
     label : basemap.title,
     onClick : function() {
      basemapGallery.select(basemap.id);
     }
    }));         
   });
  }); 
 }

[KenBuja]

In my application, I added a custom base map to the dropdown list of ArcGIS basemaps with the following code

basemapGallery = new BasemapGallery({
     showArcGISBasemaps: true,
     map: map
});

var basemaps = [];
var chartsBMLayer = new BasemapLayer({
     url: "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/RNC/NOAA_RNC/ImageServer"
});
var chartBaseMap = new Basemap({
     layers: [chartsBMLayer],
     title: "NOAA Charts",
     id: "NOAAChart"
});
basemaps.push(chartBaseMap);

basemapGallery.add(chartBaseMap);

basemapGallery.on("load", function () {
     for (i = 0; i < basemapGallery.basemaps.length; i++) {
          (function (x) {
               registry.byId('basemapMenu').addChild(new MenuItem({
                    label: basemapGallery.basemaps.title,
                    onClick: function () {
                         basemapGallery.select(basemapGallery.basemaps.id);
                    }
               }));
          }(i));
     }
});

[Anonymous User]

Thanks for that Ken, I still get the blank drop down if I choose to not show the ArcGIS basemaps. Basically I am trying to not show any of the gallery's default basemaps by hiding them. I think I must have messed up some snippet of code while copying and pasting, because this worked when I tried it in a title pane.

[Anonymous User]

This is the whole shebang, btw (editor, navigation and basemaps):

require(["esri/config", "esri/map", "esri/dijit/BasemapGallery", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", 
"esri/toolbars/draw", "esri/toolbars/navigation", "dojo/on", "dijit/registry", "dojo/keys", "dojo/parser", "dojo/_base/array", "dojo/i18n!esri/nls/jsapi", "dijit/form/Button", "dijit/Menu", "dijit/MenuItem", 
"dojo/dom", "dojo/_base/connect", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dijit/Toolbar", "dijit/DropDownMenu", "dojo/domReady!"], 
function(esriConfig, Map, BasemapGallery, Basemap, BasemapLayer, Editor, FeatureLayer, GeometryService, Draw, Navigation, on, registry, keys, parser, arrayUtils, i18n, Button, Menu, MenuItem, dom, connect) {

 parser.parse();

 //snapping is enabled for this sample - change the tooltip to reflect this
 i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";
 i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";


 esriConfig.defaults.geometryService = new GeometryService("http:/.../Geometry/GeometryServer");

 var map = new Map("map", {
  basemap : "topo",
  center : [-98, 39],
  zoom : 4,
  slider : false
 });

 // Have to combine the basemap gallery and edit 'on load' functions
 map.on("layers-add-result", initEditing);
 
 var operationsPointLayer = new FeatureLayer("http://.../test/FeatureServer/0", {
  mode : FeatureLayer.MODE_ONDEMAND,
  outFields : ["*"],
  opacity : .50
 });

 map.addLayers([operationsPointLayer]);
 map.infoWindow.resize(400, 300);

 function initEditing(event) {

  // This is a test of syntax to ONLY edit the CDB layer
  var featureLayerInfos = [{
   'featureLayer' : operationsPointLayer
  }];

  var settings = {
   map : map,
   createOptions : {
    polygonDrawTools : [esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE]
   },
   // Try referencing just the CDB layer, is this what layerInfos needs?
   layerInfos : featureLayerInfos
  };
  var params = {
   settings : settings
  };
  var editorWidget = new Editor(params, 'editorDiv');

 }

 // Create custom list of basemaps for the gallery
 var basemapsList = [];
 var basemapAerial = new Basemap({
  layers : [new BasemapLayer({
   type : "BingMapsAerial"
  })],
  title : "Bing Aerial",
  thumbnailUrl : "images/bingMapsAerial.png"
 });
 basemapsList.push(basemapAerial);

 var basemapHybrid = new Basemap({
  layers : [new BasemapLayer({
   type : "BingMapsHybrid"
  })],
  title : "Bing Hybrid",
  thumbnailUrl : "images/bingMapsHybrid.png"
 });
 basemapsList.push(basemapHybrid);

 var basemapTopo = new Basemap({
  layers : [new BasemapLayer({
   url : "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
  })],
  title : "Topographic",
  thumbnailUrl : "images/topo.jpg"
 });
 basemapsList.push(basemapTopo);

 var basemapUSATopo = new Basemap({
  layers : [new BasemapLayer({
   url : "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
  })],
  title : "USA Topo",
  thumbnailUrl : "images/usa_topo.jpg"
 });
 basemapsList.push(basemapUSATopo);

 var basemapGallery = new BasemapGallery({
  showArcGISBasemaps : true,
  //bingMapsKey : "test",
  basemaps : basemapsList,
  map : map
 });
 basemapGallery.startup();
 
 // Add the basemap gallery in drop down menu on toolbar
 basemapGallery.on("load", function() {
  createBasemapGallery();
 });

 function createBasemapGallery() {
  for ( i = 0; i < basemapGallery.basemaps.length; i++) {( function(x) {
     registry.byId('basemapMenu').addChild(new MenuItem({
      label : basemapGallery.basemaps.title,
      onClick : function() {
       basemapGallery.select(basemapGallery.basemaps.id);
      }
     }));
    }(i));
  }
 }


 //Navigation tools
 navToolbar = new Navigation(map);

 registry.byId("zoomin").on("click", function() {
  navToolbar.activate(Navigation.ZOOM_IN);
 });

 registry.byId("zoomout").on("click", function() {
  navToolbar.activate(Navigation.ZOOM_OUT);
 });

 registry.byId("pan").on("click", function() {
  navToolbar.activate(Navigation.PAN);
 });
 registry.byId("deactivate").on("click", function() {
  navToolbar.deactivate();
 });

});

[JeffPace]

i wonder

you require has connect (including contentpane, bordercontainer, etc..) but it is not in your function.

Double check your syntax and make sure you are aliasing properly

[Anonymous User]

Funny, it was the 'loaded' property phrasing for the BasemapGallery. Instead of:

basemapGallery.on("load", function() {
 createBasemapGallery();
});

I needed to use:

if (basemapGallery.loaded) {
 createBasemapGallery();
};