You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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 (var 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(function(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){
        var objectIds = [];
        results.addFeatureResults.forEach(function(item) {
          objectIds.push(item.objectId);
        });
        // query the newly added features from the layer
        monumentLayer
          .queryFeatures({
            objectIds: objectIds
          })
          .then(function(results){
            console.log(
              results.features.length,
              "features have been added."
            );
            addBtn.disabled = true;
            removeBtn.disabled = false;
          })
      }
  })
  .catch(function(error) {
    console.log(error);
  });
}

Sample search results

TitleSample
Loading...