Edit feature data

Learn how to add, update, and delete features in a feature service.

You can add, update, and delete features in a feature layer with the Editor widget. This widget allows you to edit both geometries and attributes. To use the widget, you need to ensure that you have the correct credentials to access and edit the feature layer, and that the Enable Editing property is set to true in the feature layer's item page. You can verify credentials and settings on the item property page in your ArcGIS account.

In this tutorial, you use the Editor widget to add, update, and delete features in the My Points feature layer you had created in the Create a new feature layer tutorial.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a feature layer to edit

Before you start the tutorial, you need to create your own feature layer hosted in ArcGIS called My Points.

  1. Go to the Create a new feature layer tutorial and follow the steps to create a new My Points feature layer.

  2. In your dashboard, click Manage Layers to access your layers.

  3. Click My Points to open the feature layer property page.

  4. In Overview, find the Layer Id and Service URL. For example:

    • Layer Id: 70264c2e37784a819e235d3a0129832f
    • Service URL: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

    Use dark colors for code blocks
        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });

Add modules

  1. In the require statement, add the FeatureLayer and Editor modules.

    The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require function uses references to determine which modules will be loaded – for example, you can specify "esri/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

    Expand
    Use dark colors for code blocks
                                                                  
    Add line.Add line.Change line
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
        require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
    
          "esri/layers/FeatureLayer",
          "esri/widgets/Editor"
    
        ], function(esriConfig, Map, MapView, FeatureLayer, Editor) {
    
    Expand

Add a feature layer

Use the FeatureLayer class to access your My Points feature layer. The feature layer will be added to the map with the layers property.

  1. Above the map, create a myPointsFeatureLayer and set its url property to access the feature service.

    Expand
    Use dark colors for code blocks
                                                                  
    Add line.Add line.Add line.Add line.
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
          // Reference a feature layer to edit
          const myPointsFeatureLayer = new FeatureLayer({
            url: "https://services3.arcgis.com/<YOUR ID>/arcgis/rest/services/my_points/FeatureServer"
          });
    
          esriConfig.apiKey = "YOUR_API_KEY";
    
          const map = new Map({
            basemap: "arcgis-topographic", // Basemap layer service
    
          });
    
    Expand
  2. Set the layers property in map to myPointsFeatureLayer.

    Expand
    Use dark colors for code blocks
                                                                  
    Add line.
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
          // Reference a feature layer to edit
          const myPointsFeatureLayer = new FeatureLayer({
            url: "https://services3.arcgis.com/<YOUR ID>/arcgis/rest/services/my_points/FeatureServer"
          });
    
          esriConfig.apiKey = "YOUR_API_KEY";
    
          const map = new Map({
            basemap: "arcgis-topographic", // Basemap layer service
    
            layers: [myPointsFeatureLayer]
    
          });
    
    Expand

Create an editor widget

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

  1. Create an editor and add it to the ui of the view.

    Expand
    Use dark colors for code blocks
                                                                  
    Add line.Add line.Add line.Add line.Add line.Add line.
    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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700],
            zoom: 13
          });
    
          // Editor widget
          const editor = new Editor({
            view: view
          });
          // Add widget to the view
          view.ui.add(editor, "top-right");
    
    Expand
  2. You should see the widget at the top-right corner of the browser.

Edit features

Use the Editor widget to add, update, and delete a feature.

  1. If the application is not running, at the top-right click Run.

  2. In the Editor, click Add feature. Click on the map to create a new feature with the following properties:

    • id: 100
    • name: My Point
    • rating: Good

    Click Add to add the feature to the view. Click < to return to the main window.

  3. In the Editor, click Edit feature. Click on the feature you created and update its attribute values.

    • id: 101
    • name: Awesome Beach
    • rating: Excellent

    Click Update to update the feature in the view. Click < to return to the main window.

  4. In the Editor, click Edit feature. Click on the feature you edited and then click Delete.

Run the app

In CodePen, run your code to display the map.

You should now have the ability to add, update, and delete features from your My Points feature layer.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials:

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