Remove all highlighted features from a layer

[Mr_Kirkwood]

I have a table that selects data and also highlights the data on the map. When I use the highlightSelectRoom.remove (); it only removes the last highlighted object and not all of them. 

here is my code that selects the data in the map when the table  row is selected:

function zoomSingleRoom (id)
{
    require ([
        "esri/rest/query",
        "esri/rest/support/Query",
        "esri/layers/FeatureLayer"],
            function (query, Query, FeatureLayer)
            {
                console.log ("zoomRoom");
                view.whenLayerView (roomsOrgsLayer).then (function (layerView)
                {
                    var query = roomsOrgsLayer.createQuery ();
                    query.objectIds = [id];
                    query.where = "1=1";
                    roomsOrgsLayer.queryFeatures (query).then (function (results)
                    {
                        const features = results.features;
                         graphicsLayer = results.features;
                        highlightSelectRoom = layerView.highlight (results.features);
                    });
                });
            });
}

I call on the highlightSelectRoom.remove () using a button and that also clears the selected rows in the table. Any ideas? 

Thanks! 

[UndralBatsukh]

Hi there, 

In addition to calling highlightSelectRoom.remove (), you also need to clear collection of highlightIds from the feature table. You can this in action in this sample - https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=highlight-features-by-ge...

Essentially you need to add this line: 
table.highlightIds.removeAll();

Hope this helps,

-Undral

[Mr_Kirkwood]

Thanks! I am not using a Feature table. I have some code that clears the slected rows. 

I will try the example and see if i can piece out what i need.

Thank again! 

[Mr_Kirkwood]

I am confused about how to implement those examples since i do not use the FeatureTable. I have a jQuery jqxGrid that i am using for my table. I have it working so that when ido click on a row it selects the FeatureLayer in the map. The problem is it only works to remove the last highlight selected.  I do not select them all at once but one at a time depending on what rows the user needs slecected to edit. 

How would I gather the highlight ids that are being selected.  I found somehting like this but cannot get it to work:

function removeAllHighlights(layerView) {
  if (layerView && layerView._highlightIds) {
    for (const id in layerView._highlightIds) {
      layerView.removeHighlight(id);
    }
  }
}

I have never dealt with the highlights before. So any help would be appreciated. Thanks! 

[UndralBatsukh · Accepted solution]

Hey there, 

It seems like you are overwriting highlight handle each time a new feature is highlighted. As a result, when you call remove on the handle, it only removes the highlight from the most recently highlighted feature. To fix this,  you should store each highlight handle so they can all be removed later. You can do this by adding each handle to an array whenever a feature is highlighted, like this:

highlight = layerView.highlight(result.features, {name: "temporary"});
hightlights.push(highlight);

Then, when you want to remove all highlights, loop through the array and call remove() on each handle:

hightlights.forEach((h) =>{
  h.remove();
});

This codepen shows how this works: https://codepen.io/U_B_U/pen/OPPojdN?editors=1000

Hope this helps,

-Undral

[Mr_Kirkwood]

Brilliant! That worked perfectly. Thank you so much for your help!