Unable to Remove Graphics from Graphics Layer - ArcGIS API for JS

PaulMcCord

I'm using ArcGIS API for JS v 4.11, and I'd like to remove a group of graphics from a Graphics Layer according to which checkbox is checked. In my code below, I'm giving the user the option to check either basketball, volleyball, or both. The layer on the ArcGIS Server is queried and the appropriate graphics are added to the map. This works fine when I'm adding graphics to the map. However, when I uncheck basketball, volleyball, or both, I'm unable to remove the appropriate graphics. When viewing the console window, it looks like I'm capturing the correct graphics, but when I attempt to remove with them with the removeMany() method (line 56 below), nothing is removed from the map.

<SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">".featureCheck"</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> trgt <SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">attr</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-rel"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//This 'if' statement will execute the query and get the query results</SPAN>
        <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>trgt <SPAN class="operator token">==</SPAN> <SPAN class="string token">"bball"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          params<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Park_Att_4 = 'Y'"</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">is</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".checked"</SPAN><SPAN class="punctuation token">)</SPAN><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">"checked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            myMap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>wayneCoParks<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            qTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</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">"unchecked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            qTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>removeLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
            <SPAN class="comment token">//resultsLayer.removeAll();</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
        <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>trgt <SPAN class="operator token">==</SPAN> <SPAN class="string token">"vball"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          params<SPAN class="punctuation token">.</SPAN>where <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Park_At_45 = 'Y'"</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">is</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".checked"</SPAN><SPAN class="punctuation token">)</SPAN><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">"volleyball is checked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            myMap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>wayneCoParks<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            qTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>getResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</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">"unchecked"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            qTask<SPAN class="punctuation token">.</SPAN><SPAN class="token function">execute</SPAN><SPAN class="punctuation token">(</SPAN>params<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>removeLayer<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="comment token">//Add and remove parks according to community</SPAN>
      <SPAN class="comment token">/*$("#multi-select").change(function(){
        console.log("change to selection");
        x = $("#multi-select").val()
        console.log(x);
      })*/</SPAN>

      <SPAN class="comment token">//Called once promise is resolved</SPAN>
      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">getResults</SPAN><SPAN class="punctuation token">(</SPAN>response<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">"in getResults"</SPAN><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>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">var</SPAN> parkResults <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          feature<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN> parkSymbol<SPAN class="punctuation token">;</SPAN>
          feature<SPAN class="punctuation token">.</SPAN>popupTemplate <SPAN class="operator token">=</SPAN> resultsPopupTemplate<SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">return</SPAN> feature<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//Add results to the Layer</SPAN>
        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>parkResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        resultsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN>parkResults<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>resultsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="comment token">//Called once promise is resolved</SPAN>
      <SPAN class="keyword token">function</SPAN> <SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>response<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>response<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        resultsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeMany</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>features<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>resultsLayer<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>‍</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>

Note that the resultsLayer and several of the server query parameters are defined earlier in the code.

Please let me know if I'm missing something. Thank you.

RobertScheitlin__GISP

Paul,

   When you query the map service the graphics that are returned from the query are unique and will not be identical to the graphics that are already added to the map so you can not do removeMany and specify the results of your query from the map service. You can remove all the graphics from the GL and re-add the ones for the checked sport type each time, or you can add a specific attribute to the graphics before added them to the GL and then loop through the GLs graphics and only remove those graphics that have that specific attribute.