topic Re: Create a base map gallery list in a drop down button using AMD in ArcGIS JavaScript Maps SDK Questions

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

KenBuja — Fri, 17 May 2013 19:11:23 GMT

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

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

derekswingley1 — Fri, 17 May 2013 20:44:18 GMT

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/

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

KenBuja — Mon, 20 May 2013 14:46:39 GMT

Thanks Derek!

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

Anonymous User — Thu, 17 Apr 2014 21:55:27 GMT

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

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

Anonymous User — Sat, 11 Dec 2021 10:39:23 GMT

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

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

KenBuja — Sat, 11 Dec 2021 10:39:26 GMT

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

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

Anonymous User — Fri, 18 Apr 2014 14:56:18 GMT

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.

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

Anonymous User — Sat, 11 Dec 2021 10:39:28 GMT

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

});

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

JeffPace — Fri, 18 Apr 2014 15:28:28 GMT

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

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

Anonymous User — Sat, 11 Dec 2021 10:39:31 GMT

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

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

Anonymous User — Sat, 11 Dec 2021 10:39:34 GMT

This is just a note for anyone who comes across this thread.

I had to revisit the issue with the basemapGallery dijit loading that I encountered before and finally got it resolved, definitely a forehead slapping moment as the reason is in the documentation ("'[load] Fires when the BasemapGallery retrieves the ArcGIS.com basemaps"). If 'showArcGISBasemaps:true' is set then it's important to use the basemaps.on("load") syntax. If it's ever set to false, however, this will NEVER fire because load only fires for fetching ArcGIS.com basemaps. The code now is:

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