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

Close Basemap Gallery On Selection

LloydBronn

I have the basemaps gallery widget in my maps. I'd like the gallery to automatically close when a user chooses a basemap. I'm not sure if I need to specify this in basemapGallery.on "selection-change" event or in the TitlePane dijit itself. I looked at the API reference and I don't think the destroy() method is what I want.

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

Lloyd,

I normally use tp.toggle(); I would have to see more of your code.

All comments

RobertScheitlin__GISP

Lloyd.

Are you sure that basemapGallery and/or tp are not null that those vars are in scope?

LloydBronn

Tried this, but it didn't work.

<SPAN class="keyword token">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 showArcGISBasemaps<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
 map<SPAN class="punctuation token">:</SPAN> map
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"basemapGallery"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"selection-change"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>refLayerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toggle</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="punctuation token">;</SPAN>
 
 basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"error"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>msg<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"basemap gallery error: "</SPAN><SPAN class="punctuation token">,</SPAN> msg<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>
 
 basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>msg<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>b<SPAN class="operator token">=</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>b<SPAN class="operator token"><</SPAN>map<SPAN class="punctuation token">.</SPAN>basemapLayerIds<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN>b<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> lyr <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">.</SPAN>basemapLayerIds<SPAN class="punctuation token">[</SPAN>b<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>lyr<SPAN class="punctuation token">.</SPAN>_isRefLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 refLayerId <SPAN class="operator token">=</SPAN> lyr<SPAN class="punctuation token">.</SPAN>id<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>‍</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><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Also this

<SPAN class="keyword token">var</SPAN> tp <SPAN class="operator token">=</SPAN>&nbsp; dijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"basemapGallery"</SPAN><SPAN class="punctuation token">)</SPAN>

basemapGallery<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"selection-change"</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">var</SPAN> layer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>refLayerId<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>tp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toggle</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="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Lloyd,

I normally use tp.toggle(); I would have to see more of your code.

LloydBronn

I tried this, but it's not working.

basemapGallery.on("selection-change",function(){
var layer = map.getLayer(refLayerId);
if(layer){
map.removeLayer(layer);
}
dijit.byId("basemapGallery").set('open',false);
});

RobertScheitlin__GISP

Llyod,

Yes if you are opening a TtilePane from some event and you want to close that pane then you need to attach to the selection-change and then close the pane from that event handler.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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