Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build an app that can interactively edit data in a feature layer.

If you would like to build an application that can edit features in a feature layer interactively, you can use the Editor widget. The Editor widget gives you the ability to add, edit, and delete point, line, or polygon geometry types, as well as the ability to update the attribute values for features. The Editor also respects coded value domains giving you the ability to select from a list of pre-defined attribute options. In order to successfully edit features with the Editor, you need to ensure: 1) the Enable Editing property is set to true for the feature layer; and 2) you or your application has to correct credentials to access and edit the layer. See the Create a new dataset tutorial to learn how to set these properties.

In this tutorial, you will use the Editor widget to edit features (beach access points) in the My Points feature layer.

Click Edit feature or Add feature in the Editor widget to start editing features.

Before you begin

Create a feature layer to edit

To complete this tutorial you will need at least one editable feature layer.

  1. If you have not completed the Create a new dataset tutorial, go to the tutorial now and follow the steps to create a new feature layer. You will only need the My Points feature layer in this tutorial.

Get the feature layer URL

  1. If you are not signed in, sign in to the ArcGIS for Developers website now.

  2. Go to ArcGIS for Developers/layers and click My Points. Use the feature layer property page to find and copy the Service URL value for the layer. This URL will be used in later steps. Here's an example:

    • Service URL: https://services.arcgis.com/<your ID>/arcgis/rest/services/my_points/FeatureServer/0

Steps

Create a starter app

  1. Open the JavaScript Starter App on CodePen.

  2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Add, edit, and remove features.

Add a feature layer to edit

  1. In the require statement, add the FeatureLayer module.

        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        ], function(Map, MapView, FeatureLayer) {
    
  2. At the top of the code in the main function, create a FeatureLayer and add it to the layers collection of the map. Use the URL for your My Points feature layer (see the Before your begin section above). This is the feature layer that will be edited.

          //*** ADD ***//
          var myPointsFeatureLayer = new FeatureLayer({
            //*** Replace with your URL ***//
            url: "https://services.arcgis.com/<your ID>/arcgis/rest/services/my_points/FeatureServer/0"
          });
    
          var map = new Map({
            basemap: "topo-vector",
            //*** ADD ***//
            layers: [myPointsFeatureLayer]
          });
    
  3. Run the app to view the layer.

Add the Editor widget

The Editor widget gives you the ability to add and edit features interactively. The widget will check the map for all editable layers and make them available automatically.

  1. In the require statement, add the Editor module.
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "esri/widgets/Editor"
        ], function(Map, MapView, FeatureLayer, Editor) {
    
  2. At the end of the code in the main function, create the widget and set the view to the view created earlier. Add the widget to the top right corner of the view by adding it to the view's DefaultUI.
          var editorWidget = new Editor({
            view: view
          });
    
          view.ui.add(editorWidget, "top-right");
    

Add a feature

  1. Run the app.

  2. In the Editor, click Add feature and click the map to create a new feature. Set the following attribute values:

    • ID: 100
    • Name: My Point
    • Rating: Good
    • Click Add to add the new feature.
  3. Click the < in the window to get back to the main window.

Edit a feature

  1. In the Editor, click Edit feature and click on the feature you just created. Update the attribute values:
    • ID: 101
    • Name: Awesome Beach
    • Rating: Excellent
    • Click Update to update the feature.

Delete a feature

  1. In the Editor, click Edit feature and click on the feature you just updated.
    • Click Delete to remove the feature.

Congratulations, you're done!

Your app should look something like this.

Challenge

Add a line and polygon feature layer to edit

If you don't have a My Lines or My Polygons feature layer, go back to the Create a new dataset tutorial and create a line and polygon layer.

Update the code to add these layers to the map.

        var myPointsFeatureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/<your ID>/arcgis/rest/services/my_points/FeatureServer/0"
        });
        //*** ADD ***//
        var myLinesFeatureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/<your ID>/arcgis/rest/services/my_lines/FeatureServer/0"
        });
        var myPolygonsFeatureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/<your ID>/arcgis/rest/services/my_polygons/FeatureServer/0"
        });
        var map = new Map({
          basemap: "topo-vector",
          //*** ADD ***//
          layers: [myPointsFeatureLayer, myLinesFeatureLayer, myPolygonsFeatureLayer]
        });

Now run the application and try editing the feature layers. The Editor widget will allow you to edit all of the layers.