Scale dependent layers visibility in LayerList

AshleyPeters

I have two layers in my file that are scale dependent. How can I force the layerlist widget to only show that layer when the user is zoomed in to the point that the layer is visible and able to be turned on and off? I'm sure I'm missing something simple...

I'm using the Javascript 4.12 API.

Thanks in advance!

Ashley

Egge-Jan_Pollé

Hi Ashley Peters,

By default, if a layer is not visible in the map due to scale dependencies, it is grayed out in the LayerList. This is neat functionality, but apparently not what you want...

The trick to accomplish what you want is:

• 'watch' the scale of you map with a watch handler
• set the listMode of your layer(s) to hide or show accordingly.

See this code snippet:

<SPAN class="comment token">// watch handler: the callback fires each time the scale of the view changes</SPAN>
<SPAN class="keyword token">var</SPAN> handle <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'scale'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>newScale<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">"Scale: "</SPAN><SPAN class="punctuation token">,</SPAN> newScale<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>newScale <SPAN class="operator token">></SPAN> <SPAN class="number token">500000</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        dutchMunicipalitiesLayer<SPAN class="punctuation token">.</SPAN>listMode <SPAN class="operator token">=</SPAN> <SPAN class="string token">'hide'</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
        dutchMunicipalitiesLayer<SPAN class="punctuation token">.</SPAN>listMode <SPAN class="operator token">=</SPAN> <SPAN class="string token">'show'</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>

I have published the fully working example here: ArcGIS JavaScript Tutorial - Scale dependent layers visibility in LayerList 

Hope this helps,

Egge-Jan