Update FeatureLayer using applyEdits() | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to use FeatureLayer.applyEdits() to create new features, update attributes of existing features, or delete existing features. This sample uses the FeatureTemplates widget to display templates from the editable feature layer. The widget listens for an end user to select a specific template in the widget. Its select event is fired and the resulting template information is returned. This is used in creating new features.

In addition to the FeatureTemplates widget, this sample also uses the FeatureForm widget to update attributes of new or existing features.

In this sample, the applyEdits function is called when a user either:

Clicks to create a new feature.
Selects a feature on the view and updates its attributes.
Selects a feature on the view and deletes it.

// Call FeatureLayer.applyEdits() with specified params.
function applyEdits(params) {
  addFeatureBtnDiv.style.display = "none";
  addTemplatesDiv.style.display = "none";
  unselectFeature();

  featureLayer
    .applyEdits(params)
    .then((editsResult) => {
      // Get the objectId of the newly added feature.
      // Call selectFeature function to highlight the new feature.
      if (editsResult.addFeatureResults.length > 0) {
        const objectId = editsResult.addFeatureResults[0].objectId;
        selectFeature(objectId);
      }
    })
    .catch((error) => {
      console.log("error = ", error);
    });
}

FeatureLayer.applyEdits() resolves to an object containing edit results. If the edit failed, the edit result includes an error.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Update FeatureLayer using applyEdits() | Sample | ArcGIS Maps SDK for JavaScript</title>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        margin: 0;
      }

      #formDiv {
        width: 100%;
      }

      .esri-item-list__scroller {
        overflow-y: visible;
      }

      .editArea-container {
        background: #fff;
        line-height: 1.5em;
        overflow: auto;
        padding: 12px 15px;
        width: 300px;
      }

      .list-heading {
        font-weight: normal;
        margin-top: 20px;
        margin-bottom: 10px;
        color: #323232;
      }

      .or-wrap {
        background-color: #e0e0e0;
        height: 1px;
        margin: 2em 0;
        overflow: visible;
      }

      .or-text {
        background: #fff;
        line-height: 0;
        padding: 0 1em;
        position: relative;
        bottom: 0.75em;
      }

      /* override default styles */
      .esri-feature-form {
        background: #fff;
      }

      .esri-feature-templates {
        width: 256px;
      }

      .esri-feature-templates__section-header {
        display: none;
      }

      .esri-feature-templates__section {
        box-shadow: none;
      }

      .esri-feature-templates__scroller {
        max-height: 200px;
      }
    </style>

    <script type="module">
      const [Map, MapView, FeatureLayer, Graphic, Expand, FeatureForm, FeatureTemplates] =
        await $arcgis.import([
          "@arcgis/core/Map.js",
          "@arcgis/core/views/MapView.js",
          "@arcgis/core/layers/FeatureLayer.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/widgets/Expand.js",
          "@arcgis/core/widgets/FeatureForm.js",
          "@arcgis/core/widgets/FeatureTemplates.js",
        ]);

      let editFeature, highlight;

      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/IncidentsReport/FeatureServer/0",
        outFields: ["*"],
        id: "incidentsLayer",
      });

      const map = new Map({
        basemap: "dark-gray-vector",
        layers: [featureLayer],
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-117.18, 34.06],
        zoom: 14,
      });

      // New FeatureForm and set its layer to 'Incidents' FeatureLayer.
      // FeatureForm displays attributes of fields specified in the formTemplate's field elements.
      const featureForm = new FeatureForm({
        map: map, // required if using Arcade expressions using the $map global variable
        container: "formDiv",
        layer: featureLayer,
        formTemplate: {
          title: "Enter the incident number",
          elements: [
            {
              type: "field",
              fieldName: "IncidentType",
              label: "Choose incident type",
            },
            {
              type: "field",
              fieldName: "IncidentDescription",
              label: "Describe the problem",
            },
          ],
        },
      });

      // Listen to the feature form's submit event.
      // Update feature attributes shown in the form.
      featureForm.on("submit", () => {
        if (editFeature) {
          // Grab updated attributes from the form.
          const updated = featureForm.getValues();

          // Loop through updated attributes and assign
          // the updated values to feature attributes.
          Object.keys(updated).forEach((name) => {
            editFeature.attributes[name] = updated[name];
          });

          // Setup the applyEdits parameter with updates.
          const edits = {
            updateFeatures: [editFeature],
          };
          applyEditsToIncidents(edits);
          document.getElementById("viewDiv").style.cursor = "auto";
        }
      });

      // Check if the user clicked on the existing feature
      selectExistingFeature();

      // The FeatureTemplates widget uses the 'addTemplatesDiv'
      // element to display feature templates from incidentsLayer
      const templates = new FeatureTemplates({
        container: "addTemplatesDiv",
        layers: [featureLayer],
      });

      // Listen for when a template item is selected
      templates.on("select", (evtTemplate) => {
        // Access the template item's attributes from the event's
        // template prototype.
        const attributes = evtTemplate.template.prototype.attributes;
        unselectFeature();
        document.getElementById("viewDiv").style.cursor = "crosshair";

        // With the selected template item, listen for the view's click event and create feature
        const handler = view.on("click", (event) => {
          // remove click event handler once user clicks on the view
          // to create a new feature
          handler.remove();
          event.stopPropagation();
          featureForm.feature = null;

          if (event.mapPoint) {
            const point = event.mapPoint.clone();
            point.z = undefined;
            point.hasZ = false;

            // Create a new feature using one of the selected
            // template items.
            editFeature = new Graphic({
              geometry: point,
              attributes: {
                IncidentType: attributes.IncidentType,
              },
            });

            // Setup the applyEdits parameter with adds.
            const edits = {
              addFeatures: [editFeature],
            };
            applyEditsToIncidents(edits);
            document.getElementById("viewDiv").style.cursor = "auto";
          } else {
            console.error("event.mapPoint is not defined");
          }
        });
      });

      // Call FeatureLayer.applyEdits() with specified params.
      function applyEditsToIncidents(params) {
        featureLayer
          .applyEdits(params)
          .then((editsResult) => {
            // Get the objectId of the newly added feature.
            // Call selectFeature function to highlight the new feature.
            if (
              editsResult.addFeatureResults.length > 0 ||
              editsResult.updateFeatureResults.length > 0
            ) {
              unselectFeature();
              let objectId;
              if (editsResult.addFeatureResults.length > 0) {
                objectId = editsResult.addFeatureResults[0].objectId;
              } else {
                featureForm.feature = null;
                objectId = editsResult.updateFeatureResults[0].objectId;
              }
              selectFeature(objectId);
              if (addFeatureDiv.style.display === "block") {
                toggleEditingDivs("none", "block");
              } else if (addFeatureDiv.style.display === "none") {
                toggleEditingDivs("block", "none");
              }
            }
            // show FeatureTemplates if user deleted a feature
            else if (editsResult.deleteFeatureResults.length > 0) {
              toggleEditingDivs("block", "none");
            }
          })
          .catch((error) => {
            console.log("error = ", error);
          });
      }

      // Check if a user clicked on an incident feature.
      function selectExistingFeature() {
        view.on("click", (event) => {
          // clear previous feature selection
          unselectFeature();
          if (document.getElementById("viewDiv").style.cursor != "crosshair") {
            view.hitTest(event, { include: featureLayer }).then((response) => {
              // If a user clicks on an incident feature, select the feature.
              if (response.results.length === 0) {
                toggleEditingDivs("block", "none");
              } else {
                if (addFeatureDiv.style.display === "block") {
                  toggleEditingDivs("none", "block");
                }
                selectFeature(response.results[0].graphic.getObjectId());
              }
            });
          }
        });
      }

      // Highlights the clicked feature and display
      // the feature form with the incident's attributes.
      function selectFeature(objectId) {
        // query feature from the server
        featureLayer
          .queryFeatures({
            objectIds: [objectId],
            outFields: ["*"],
            returnGeometry: true,
          })
          .then((results) => {
            if (results.features.length > 0) {
              editFeature = results.features[0];

              // display the attributes of selected feature in the form
              featureForm.feature = editFeature;

              // highlight the feature on the view
              view.whenLayerView(editFeature.layer).then((layerView) => {
                highlight = layerView.highlight(editFeature);
              });
            }
          });
      }

      // Expand widget for the editArea div.
      const editExpand = new Expand({
        expandIcon: "pencil",
        expandTooltip: "Expand Edit",
        expanded: true,
        view: view,
        content: document.getElementById("editArea"),
      });

      view.ui.add(editExpand, "top-right");
      // input boxes for the attribute editing
      const addFeatureDiv = document.getElementById("addFeatureDiv");
      const attributeEditing = document.getElementById("featureUpdateDiv");

      // Controls visibility of addFeature or attributeEditing divs
      function toggleEditingDivs(addDiv, attributesDiv) {
        addFeatureDiv.style.display = addDiv;
        attributeEditing.style.display = attributesDiv;

        document.getElementById("updateInstructionDiv").style.display = addDiv;
      }

      // Remove the feature highlight and remove attributes
      // from the feature form.
      function unselectFeature() {
        if (highlight) {
          highlight.remove();
        }
      }

      // Update attributes of the selected feature.
      document.getElementById("btnUpdate").onclick = () => {
        // Fires feature form's submit event.
        featureForm.submit();
      };

      // Delete the selected feature. ApplyEdits is called
      // with the selected feature to be deleted.
      document.getElementById("btnDelete").onclick = () => {
        // setup the applyEdits parameter with deletes.
        const edits = {
          deleteFeatures: [editFeature],
        };
        applyEditsToIncidents(edits);
        document.getElementById("viewDiv").style.cursor = "auto";
      };
    </script>
  </head>

  <body>
    <div id="editArea" class="editArea-container esri-widget--panel">
      <div id="addFeatureDiv" style="display: block">
        <h3 class="list-heading">Report Incidents</h3>
        <ul style="font-size: 13px; padding-left: 1.5em">
          <li>Select template from the list</li>
          <li>Click on the map to create a new feature</li>
          <li>Update associated attribute data</li>
          <li>Click <i>Update Incident Info</i></li>
        </ul>
        <div id="addTemplatesDiv" style="background: #fff"></div>
      </div>

      <div id="featureUpdateDiv" style="display: none; margin-top: 1em">
        <div id="attributeArea">
          <div id="formDiv"></div>
          <input type="button" class="esri-button" value="Update incident info" id="btnUpdate" />
        </div>
        <br />
        <div id="deleteArea">
          <input type="button" class="esri-button" value="Delete incident" id="btnDelete" />
        </div>
      </div>

      <div id="updateInstructionDiv" style="text-align: center; display: block">
        <p class="or-wrap"><span class="or-text">Or</span></p>
        <p id="selectHeader">Select an incident to edit or delete.</p>
      </div>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>