topic Re: Clear a basemap from the application. in ArcGIS JavaScript Maps SDK Questions

Clear a basemap from the application.

Sai_AnandPeketi1 — Wed, 24 May 2017 13:40:54 GMT

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.

Re: Clear a basemap from the application.

RickeyFight — Wed, 24 May 2017 14:26:35 GMT

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

Re: Clear a basemap from the application.

ThomasSolow — Sat, 11 Dec 2021 09:18:57 GMT

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.

Re: Clear a basemap from the application.

Sai_AnandPeketi1 — Wed, 24 May 2017 15:21:33 GMT

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

Thanks for the help.

Re: Clear a basemap from the application.

Sai_AnandPeketi1 — Wed, 24 May 2017 15:23:30 GMT

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.

Re: Clear a basemap from the application.

ThomasSolow — Wed, 24 May 2017 15:43:58 GMT

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.

Re: Clear a basemap from the application.

Sai_AnandPeketi1 — Wed, 24 May 2017 16:43:04 GMT

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

Re: Clear a basemap from the application.

ThomasSolow — Wed, 24 May 2017 17:15:22 GMT

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.

Re: Clear a basemap from the application.

HemingZhu — Wed, 24 May 2017 18:47:46 GMT

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

Re: Clear a basemap from the application.

Sai_AnandPeketi1 — Thu, 25 May 2017 12:53:39 GMT

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.

Re: Clear a basemap from the application.

Sai_AnandPeketi1 — Wed, 31 May 2017 11:56:16 GMT

Instead of removing the base map. I added another base map and set the transparency level 100% in the base map gallery widget that resolved my problem.

layers: [new esri.dijit.BasemapLayer({
URL: "http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer",
opacity: "0"
})

Re: Clear a basemap from the application.

JerrySimmons_GISP — Mon, 15 Feb 2021 18:49:11 GMT

Works with minor correction:

layer[i].title