This sample demonstrates how to add or remove graphics from a collection of features on a FeatureLayer. To learn how to create a FeatureLayer on the client-side, see the Create a FeatureLayer with client-side graphics sample.
After creating the FeatureLayer from client-side graphics, you might want to add or delete features. To add and remove features at runtime, you must call featureLayer.applyEdits() and pass in your array of graphics.
How it works
In this sample, we create features by defining the data as an array of objects, then we create a Graphic for each object, specifying the latitude and longitude for each feature we would like to add to the map.
for (let i = 0; i < data.length; i++){
graphic = new Graphic({
geometry: {
type: "point",
latitude: data[i].LATITUDE,
longitude: data[i].LONGITUDE
},
attributes: data[i]
});
graphics.push(graphic);
}After creating the array of graphics that you want to add to the FeatureLayer, you must call applyEdits() on the layer. The object that you pass into apply tells the method whether you will be adding, removing, or updating features. For adding features, that object would look like this:
const addEdits = {
addFeatures: graphics
};After creating our edits object, we call the method apply that calls apply on the layer. If features were successfully added using applyEdits, we must call featureLayer.queryFeatures() to return the updated features, as shown in the following function.
function applyEditsToLayer(edits) {
monumentLayer
.applyEdits(edits)
.then((results) => {
// if edits were removed
if (results.deleteFeatureResults.length > 0){
console.log(
results.deleteFeatureResults.length,
"features have been removed"
);
addBtn.disabled = false;
removeBtn.disabled = true;
}
// if features were added - call queryFeatures to return
// newly added graphics
if (results.addFeatureResults.length > 0){
const objectIds = [];
results.addFeatureResults.forEach((item) => {
objectIds.push(item.objectId);
});
// query the newly added features from the layer
monumentLayer
.queryFeatures({
objectIds: objectIds
})
.then((results) => {
console.log(
results.features.length,
"features have been added."
);
addBtn.disabled = true;
removeBtn.disabled = false;
})
}
})
.catch((error) => {
console.error();
});
}