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

Hide/Show graphic with 4.3 API

deleted-user-db3s_-rQ1tkN

3.2 has a hide and show method for a graphic. Is there a way to do this with the 4.3 API? I've tried setting the visible property to false but the features still show on the map. What is the proper way to do this?

Example of how I'm trying to hide certain graphics based on attribute. All features still show on map.

&nbsp;&nbsp;&nbsp; view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layerID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>lyrView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; lyrView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val<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><SPAN class="operator token">!</SPAN>val<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; lyrView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>results<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;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> results<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator 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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>dow <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Tuesday"</SPAN><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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>visible <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp; <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; <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="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>

Find more posts tagged with

Accepted answers

ThomasSolow

Setting the 'visible' property on a graphic works in 3D, so my feeling is that it should work in 2D also, but it doesn't right now.

example: JS Bin - Collaborative JavaScript Debugging

edit: I can confirm that this is a known issue. It doesn't look like it will be fixed by 4.4 though.

All comments

mgeorge

FYI, we recently added a client-side FeatureFilter which provides a fast way of hiding/showing features based on an attribute.

ThomasSolow

I didn't mean to imply that it was broken, which would mean that there's a bug to be fixed. That isn't the case as far as I know. My understanding is that some work needs to be done to deliver this functionality.

I agree that this should work. But there are workarounds.

For feature layers, I suggest you use a definition expression to show/hide certain features. For graphics layers you can probably get away with cloning and flipping the visibility property of the clone. Something like this:

<SPAN class="comment token">// for graphics layer</SPAN>
<SPAN class="comment token">// clone graphic and toggle visibility, remove old graphic and add clone</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">toggleVisibility</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">.</SPAN>layer <SPAN class="operator token">&&</SPAN> graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>declaredClass <SPAN class="operator token">===</SPAN> <SPAN class="string token">'esri.layers.GraphicsLayer'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">const</SPAN> clone <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; clone<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="operator token">!</SPAN>graphic<SPAN class="punctuation token">.</SPAN>visibility<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>clone<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="comment token">// for feature layer</SPAN>

<SPAN class="comment token">// keep track of hidden graphics</SPAN>
<SPAN class="keyword token">let</SPAN> hiddenGraphics <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN>

<SPAN class="comment token">// takes objectIdField and array of graphics and returns a definition expression</SPAN>
<SPAN class="comment token">// to hide all those graphics</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getDefExpression</SPAN><SPAN class="punctuation token">(</SPAN>oidField<SPAN class="punctuation token">,</SPAN> graphicsArray<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">return</SPAN> graphicsArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">reduce</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>accum<SPAN class="punctuation token">,</SPAN> curr<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>accum<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">===</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="template-string token"><SPAN class="string token">`</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>oidField<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> != </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>curr<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>oidField<SPAN class="punctuation token">]</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">return</SPAN> <SPAN class="template-string token"><SPAN class="string token">`</SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>accum<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> AND </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>oidField<SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token"> != </SPAN><SPAN class="interpolation token"><SPAN class="interpolation-punctuation punctuation token">${</SPAN>curr<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>oidField<SPAN class="punctuation token">]</SPAN><SPAN class="interpolation-punctuation punctuation token">}</SPAN></SPAN><SPAN class="string token">`</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> 
&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="comment token">// takes a graphic and uses the above function and array to toggle its visbility</SPAN>
<SPAN class="comment token">// via definition expression</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">toggleVisibility</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> layer <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">const</SPAN> oidField <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>objectIdField<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layer <SPAN class="operator token">&&</SPAN> layer<SPAN class="punctuation token">.</SPAN>declaredClass <SPAN class="operator token">===</SPAN> <SPAN class="string token">'esri.layers.FeatureLayer'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">let</SPAN> idx <SPAN class="operator token">=</SPAN> hiddenGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>idx <SPAN class="operator token">>=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hiddenGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">splice</SPAN><SPAN class="punctuation token">(</SPAN>idx<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hiddenGraphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; layer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> <SPAN class="token function">getDefExpression</SPAN><SPAN class="punctuation token">(</SPAN>oidField<SPAN class="punctuation token">,</SPAN> hiddenGraphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&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>‍</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>

Here's a sample for feature layers. Click on graphics to hide them: JS Bin - Collaborative JavaScript Debugging

williampreston

How is "it's broken and won't be fixed" an answer? This should be something simple. THis should be something that works.

ThomasSolow

Setting the 'visible' property on a graphic works in 3D, so my feeling is that it should work in 2D also, but it doesn't right now.

example: JS Bin - Collaborative JavaScript Debugging

edit: I can confirm that this is a known issue. It doesn't look like it will be fixed by 4.4 though.

khutchins

One simple way to do this would be to apply a definition expression to the layer. For example this expression will display all features where the Status is not equal to P or I.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; featureLayer<SPAN class="punctuation token">.</SPAN>definitionExpression <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Not Status = 'P' AND Not Status = 'I'"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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.