Is there a way to load/update the data without removing feature layer and without flicker effect using arcgis javascript api 4

Question

I am creating a feature layer from feature collection by fetching data from external query service and adding to the map.

As per my project need I have to re-fetch the data and add on the map after every 5 seconds. To achieve this I am requesting data using external query and after getting the response data(in JSON format) I am removing the previous feature layer and adding a new one.

Issues: While adding the new layer on the map it takes a little time (~1 sec) to reflect the feature on the map which looks like a flicker effect.

Question: Is there a way to load/update the data without removing feature layer and without flicker effect (only added/removed features should reflect on the map )

RRubalcava · Answer

You can let the layer create the unique id field for you. Just give it a different name. If your unique field is numeric, you can use that if you want. fields: [ { name: "FID", alias: "FID", type: "oid" } ],‍‍‍‍‍‍‍ You could call it UniqueID, that doesn't matter, we'll generate the ids for you.

ShefaliMantri · Answer

Thank you. Project requirement is object id should not change for existing data.

In the project, there is one list widget that is bind with that object id and first list widget create then update on the map.

Currently when after apply edits result is as shown below

As u can see the object is the same for all add features.

Object id value is not created dynamically. When we fetch data from external query service we have one unique field value which we use as a objectid value while creating feature layer.

RRubalcava · Answer

If you are updating data from an external source, you don't need to create a new layer each time. You can use the applyEdits of the FeatureLayer to make these changes. Here is a sample from the SDK that does this. Here is a sample I put together that does the update every 5 seconds. const {features} = await layer.queryFeatures(); layer .applyEdits({ addFeatures: graphics, // new updated features deleteFeatures: features // delete the old features }) .then((results) => { console.log("features updated"); }) .catch((err) => console.warn(err));‍‍‍‍‍‍‍‍‍‍‍ This performs well without flashing of the client side layer.