Adapt basemap collection in Dijit BasemapGallery

Question

* Esri has adapted the collection of Basemaps in its BasemapGallery Dijit.

To include the Basemap Gallery in your App, it's just needs;

var basemapGallery = new BasemapGallery({

showArcGISBasemaps: true,

map: map

}, "basemapGallery");

basemapGallery.startup();

But when you want remove one of this 10 basemap-layers you have to add

basemapGallery.remove(id);  //p.e. basemapGallery.remove("basemap_0");

this command you cannot add just after basemapGallery.startup() because the basemapGallery Objewct needs first an interaction until the ids are setted (my assumption; is that right?)

So how can you remove one or two basemap layers with this remove-Method instead of writing every layer manually in the kind of Basemap Gallery - user-defined items | ArcGIS API for JavaScript ?

Thanks for help!

Christian

PS: Discussion started at https://community.esri.com/message/444127?et=watches.email.thread#444127

khutchins · Accepted Answer

There are a few ways to accomplish this.  Option one would be to create a new group in ArcGIS Online that contains the basemaps you want to display then use that to set the BasemapGallery basemapGroup constructor option.

var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: true,
    basemapsGroup: { owner: "esri", title: "Community Basemaps" },
    map: map
  },

Another alternative is to use the BasemapGallery load event to remove the maps you do not want from the gallery. In this code snippet we remove the basemap with a title of Imagery from the gallery.  However you might run into issues with this approach if your web application will be used by multiple locales. For example if your site were viewed in a browser with a French locale the Imagery basemap would not be removed because its title is not Imagery it would be the French equivalent.

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

basemapGallery.on("load", function(){
        for(var i=0; i < basemapGallery.basemaps.length; i++){
          if(basemapGallery.basemaps.title === "Imagery"){
            basemapGallery.remove(basemapGallery.basemaps.id);
          }
        }
      });
      basemapGallery.startup();