Clear a basemap from the application.

[Sai_AnandPeketi1]

Hello everyone, 

   By using the basemap widget, the user selects one base map and can change the base maps. Now, the user wants to clear base map from the base map widget.

Is it possible? If yes, How its can anyone share the code. M using the base map gallery sample Basemap gallery | ArcGIS API for JavaScript 3.20 

Thanks for the help.

[RickeyFight]

The user wants to be able to remove the option of that basemap from the list of choices? 

[Sai_AnandPeketi1]

Yes, Rickey. User need removes the option of that base map from the list of choices.

Thanks for the help.

[ThomasSolow]

Do you want to hide the basemap(s)?  If so this will hide all basemap layers:

// ES6
map.basemapLayerIds.forEach(id => {
  map.getLayer(id).hide()
});

//ES5
map.basemapLayerIds.forEach(function(id){
  map.getLayer(id).hide()
});

// use .show() to show the layer
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

To actually remove the layer you can do this:

map.basemapLayerIds.forEach(id => {
  map.removeLayer(map.getLayer(id));
});
‍‍‍‍‍‍‍

I'm not sure the best way to go about adding this functionality to the basemap widget.  I agree that it would be nice if the gallery included this option, but aside from some DOM manipulation, I think your best bet would be locating this functionality somewhere else.

Oh, I may have misunderstood.  If the goal is to clear the basemap, you can do this with:

basemapGallery.remove(<id-of-layer>);

// ids are basemap_0 -> basemap_N‍‍‍

It looks like basemaps are displayed in reverse order: so basemap_0 will be the ID of the bottom-right basemap in the widget.

[Sai_AnandPeketi1]

Thanks, Thomas.

But How can I get the id of the layer? How to pass the value in the remove method.

basemapGallery.remove(<id-of-layer>);

thanks for the help.

[ThomasSolow]

You can get the IDs by looking at basemapGallery.basemaps.  This will be an array of objects, each of which will have a property called id that points to that basemap's id in the gallery.

I think the challenge here will be making a good user experience for removing basemaps from the list.  No obvious way to do this occurs to me.

Here's an ugly example where control + click will remove a basemap from the list: JS Bin - Collaborative JavaScript Debugging 

It seems that the event listeners need to be reset after each removal, probably because the entire list gets removed and re-added whenever it changes.

[Sai_AnandPeketi1]

Thanks, Thomas. But I want to set like No Basemap, Topographic, Imagery, Streets option in the base map gallery list.

[ThomasSolow]

This seems hard to do...mainly because the basemap gallery does not actually change the basemap of the map in question.  I have no idea why this is or what the issue is.

Anyway, here's a somewhat hacky solution: JS Bin - Collaborative JavaScript Debugging 

I added a "fake" basemap to the end of the list with a white image (referenced by URL) and a title of "Clear basemap."  Clicking on that basemap will toggle the visibility of the basemap on and off.

I'm not too familiar with the 3.20 API, so if someone else knows of the correct way to determine the basemap layers on a given map, please feel free to chime in.  The way I'm finding them in that example is brittle and probably won't work on a lot of maps.

[Sai_AnandPeketi1]

Thanks, Thomas. The idea was not bad. It is up to my question. Adding a no base map. It's good, but it removing the layer  from the list. Initially, I have 3 items in the list. Whenever I'm clicking on the no base map icon. it removes the layer from the array list. 

[HemingZhu]

Here is how i would approach it: 

map.on("load", function () {
   $("div[id*='map_layer']").hide();  // this will hide any base map layer(s) on when the map load; not i use jquery to hid the //basemap div
});

basemapGallery.on("load", function () {    // this will only left Imagery, Topographic and Streets basemap on the widgets
var baselayers = basemapGallery.basemaps.slice();
for (var i = 0; i < baselayers.length; i++) {
var layer = baselayers;
if (layer.title != "Topographic" && layer.title != "Imagery" && layer.title != "Streets") {
      basemapGallery.remove(layer.id);
   }}
});

basemapGallery.on("selection-change", function () {
$("div[id*='map_layer']").show();     // this will display basemap should user click the base map icon;
});