nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Encuentra más publicaciones etiquetadas con

Accepted answers

derekswingley1

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/

All comments

Anonymous User

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

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

JeffPace1

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

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

});

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.

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

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

Anonymous User

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

kenbuja

Thanks Derek!

derekswingley1

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.