Using listMode to hide layers in LayerList

AshleyPeters

It's been a couple of years since I've done much work with the JavaScript API. I'm beginning the process to update several of our maps to the newest version of the API and to make them more mobile-friendly.

I'm working with the Layer list with a legend sample and would like to hide two out of my three layers. It looks like the easiest way to do this would be to use listMode. I've tried a few different things and can successfully get only one of the two layers to hide.

Here's my layer list code currently:

<SPAN class="keyword token">var</SPAN> layerList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
    container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN>createElement <SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
        listItemCreatedFunction<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">const</SPAN> item <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>item<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>type <SPAN class="operator token">!=</SPAN> <SPAN class="string token">"group"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="comment token">// don't show legend twice</SPAN>
              item<SPAN class="punctuation token">.</SPAN>panel <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">,</SPAN>
                open<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</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="punctuation token">;</SPAN>
    
    <SPAN class="keyword token">var</SPAN> llExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
    content<SPAN class="punctuation token">:</SPAN> layerList<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN>
    expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-layer-list"</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    
    view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>llExpand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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>‍</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>

I've tried this option - https://community.esri.com/thread/232289-remove-layers-from-the-layerwidget - with little to no success.

Any help would be appreciated. Thanks!

Ashley

DavidWilson3

Hi Ashley,

If you want to have your layers still be in the list but be un-selected you can make the visibilityMode property of the GroupLayer "independent" and then set the visible property of the layers to false. Also if you have a GroupLayer you could just remove the layers you do not want from the GroupLayer.