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

LayerList 2.1 option to displays sublayer

haThach

Have anyone know if there is a way to configure a dynamic map server with 3 sublayers, the first layer is active as default. if a user turn on the second sublayer, any displays sublayer within this "Sample Locations" map server will turn off? I don't want a user to manually have to turn off the displays "Active" layer.

Thanks,

Ha Thach

Trouver plus de publications taguées avec

Accepted answers

All comments

RobertScheitlin__GISP

Ha Thach,

Here is what I was able to come up with:

In the LayerListView.js:

&nbsp;&nbsp;&nbsp; _onCkSelectNodeClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">,</SPAN> ckSelect<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>ctrlKey <SPAN class="operator token">||</SPAN> evt<SPAN class="punctuation token">.</SPAN>metaKey<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isRootLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">turnAllRootLayers</SPAN><SPAN class="punctuation token">(</SPAN>ckSelect<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">turnAllSameLevelLayers</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">,</SPAN> ckSelect<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>parentLayerInfo <SPAN class="operator token">&&</SPAN> layerInfo<SPAN class="punctuation token">.</SPAN>newSubLayers<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">===</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">&&</SPAN> ckSelect<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> layerOptions <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> rootLayerInfo <SPAN class="operator token">=</SPAN> layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getRootLayerInfo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rootLayerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">traversal</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>subLayerInfo<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>subLayerInfo<SPAN class="punctuation token">.</SPAN>parentLayerInfo <SPAN class="operator token">&&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; subLayerInfo<SPAN class="punctuation token">.</SPAN>parentLayerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> layerInfo<SPAN class="punctuation token">.</SPAN>parentLayerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">&&</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token">!</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">isLayerHiddenInWidget</SPAN><SPAN class="punctuation token">(</SPAN>subLayerInfo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerOptions<SPAN class="punctuation token">[</SPAN>subLayerInfo<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>subLayerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> layerInfo<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerOptions<SPAN class="punctuation token">[</SPAN>subLayerInfo<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerOptions<SPAN class="punctuation token">[</SPAN>subLayerInfo<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>visible<SPAN class="punctuation token">:</SPAN> subLayerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; rootLayerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resetLayerObjectVisibility</SPAN><SPAN class="punctuation token">(</SPAN>layerOptions<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN>ckSelect<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

ColterSikora1

Hello rscheitlin,

Where in the LayerListView.js is this code supposed to be placed?

Thank you!

Colter

RobertScheitlin__GISP

Colter,

The code is a replacement for the _onCkSelectNodeClick function.

ColterSikora1

No luck so far Robert Scheitlin, GISP‌. Are there any other alterations that I should keep in mind? I'm just making the change from the downloaded code straight out of ArcGIS Web App Builder.

ShannonHealy1

Hi Robert, I attempted to add this code to my widget but it did not provide the described function. I was wondering whether that was because the layers I would like to switch on and off are sub-sublayers? (I have attached an image of my operational layers list, the ones I want to have this exclusive viewing functionality are layers 3-5)

Thanks in advance, I appreciate the help!

RobertScheitlin__GISP

Shannon,

That would be the case as you have a group nested inside another group. I did not setup the code to search through nested groups recursively.

Gianna_BBSRC

Hello,

I have a similar issue. However, I'd like only some checkboxes to act as radio buttons (ie with mutually exclusive viewing functionality).

I've managed to hide the checkboxes for group layers and applied Robert Scheitlin, GISP's code above in replacement for the _onCKSelectNodeClick function.

The problem I'm facing is that I'm dealing with mosaic raster time-series data displaying different scenarios which are mutually exclusive (ie I don't want them displayed at the same time on top of each other). Additionally, within each mosaic dataset are three folders (boundary, footprint and image) which I'd like to hide from the end user. So the structure for my datasets looks like this:

and I've managed to achieve this in WAB developer (with checkboxes shown acting as radio buttons):

But the only checkboxes I'd like to provide are at the mosaic dataset level (layer 2 and 3 in example) with boundary, footprint, image layers all on but hidden AND I'd like those checkboxes to act like radio buttons with mutually exclusive viewing functionality, as below.

Any advice you could provide will be massively useful.

Many thanks,

Gianna

(I've posted this as a new question and there's an answer to it here)

layerlist

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.