Clear a basemap from the application.

4092
11
Jump to solution
05-24-2017 06:40 AM
Sai_AnandPeketi1
New Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
Sai_AnandPeketi1
New Contributor III

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

View solution in original post

0 Kudos
11 Replies
RickeyFight
MVP Regular Contributor

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

Sai_AnandPeketi1
New Contributor III

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

Thanks for the help.

0 Kudos
ThomasSolow
Occasional Contributor III

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
New Contributor III

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.

0 Kudos
ThomasSolow
Occasional Contributor III

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
New Contributor III

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

0 Kudos
ThomasSolow
Occasional Contributor III

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
New Contributor III

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. 

0 Kudos
HemingZhu
Occasional Contributor III

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