Add or remove graphics from a FeatureLayer

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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
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:

Use dark colors for code blocksCopy
1
2
3
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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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();
  });
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.