AnsweredAssumed Answered

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

Question asked by pmccord_wayne on Jul 15, 2019
Latest reply on Jul 22, 2019 by pmccord_wayne

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.

 

$(document).on("click", ".featureCheck", function(){
        var trgt = $(this).attr("data-rel");

        //This 'if' statement will execute the query and get the query results
        if(trgt == "bball"){
          params.where = "Park_Att_4 = 'Y'"
          if ($(this).is(".checked")){
            console.log("checked");
            myMap.remove(wayneCoParks);
            qTask.execute(params).then(getResults);
          } else{
            console.log("unchecked");
            qTask.execute(params).then(removeLayer);
            //resultsLayer.removeAll();
          }
        }
        else if(trgt == "vball"){
          params.where = "Park_At_45 = 'Y'";
          if ($(this).is(".checked")){
            console.log("volleyball is checked");
            myMap.remove(wayneCoParks);
            qTask.execute(params).then(getResults);
          } else{
            console.log("unchecked");
            qTask.execute(params).then(removeLayer);
          }
        }
      });

      //Add and remove parks according to community
      /*$("#multi-select").change(function(){
        console.log("change to selection");
        x = $("#multi-select").val()
        console.log(x);
      })*/


      //Called once promise is resolved
      function getResults(response){
        console.log("in getResults");
        console.log(response);
        var parkResults = response.features.map(function(feature){
          feature.symbol = parkSymbol;
          feature.popupTemplate = resultsPopupTemplate;
          return feature;
        });

        //Add results to the Layer
        console.log(parkResults);
        resultsLayer.addMany(parkResults);
        console.log(resultsLayer);
      };

      //Called once promise is resolved
      function removeLayer(response){
        console.log(response.features);
        resultsLayer.graphics.removeMany(response.features);
        console.log(resultsLayer);
      };

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.

Outcomes