Add or remove graphics from a FeatureLayer

Explore in the sandboxView live

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 applyEdits 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 applyEditsToLayer that calls applyEdits 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();
  });
}

FeatureLayer

applyEdits

add

delete

ArcGIS API for JavaScriptSample Code

Add or remove graphics from a FeatureLayer

Was this page helpful?