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

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.

Find more posts tagged with

Accepted answers

Sai_AnandPeketi1

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

All comments

JerrySimmons_GISP

Works with minor correction:

layer[i].title

Sai_AnandPeketi1

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

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

Sai_AnandPeketi1

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

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 How can I get the id of the layer? How to pass the value in the remove method.

basemapGallery<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">remove</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;"><</SPAN>id<SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">-</SPAN><SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">of</SPAN><SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">-</SPAN>layer<SPAN class="" style="color: #a67f59; background: rgba(255, 255, 255, 0.5); border: 0px; font-weight: inherit;">></SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>

thanks for the help.

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:

<SPAN class="comment token">// ES6</SPAN>
map<SPAN class="punctuation token">.</SPAN>basemapLayerIds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//ES5</SPAN>
map<SPAN class="punctuation token">.</SPAN>basemapLayerIds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// use .show() to show the layer</SPAN>
‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

To actually remove the layer you can do this:

map<SPAN class="punctuation token">.</SPAN>basemapLayerIds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>id <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token"><</SPAN>id<SPAN class="operator token">-</SPAN><SPAN class="keyword token">of</SPAN><SPAN class="operator token">-</SPAN>layer<SPAN class="operator token">></SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// ids are basemap_0 -> basemap_N</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

RickeyFight

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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