Edit feature data

Learn how to add, update, and delete in a .

You can add, update, and delete in a with the Editor . This widget allows you to edit both and . 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 . You can verify credentials and settings on the item property page in your .

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

Prerequisites

Steps

Create a feature layer to edit

Before you start the tutorial, you need to create your own hosted in 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 , click Content to access your layers.
  3. Click My Points to open the feature layer property page.
  4. In Overview, find the 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 .

Get an access token

You need an with the correct privileges to access the used in this tutorial.

  1. Go to the Create an API key tutorial and create an with the following :
    • Privileges
      • Location services > Basemaps
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the access to the layer item. Learn more in Item access privileges.
  2. In CodePen, set esriConfig.apiKey to your access token.
    1
    2
    3
    4
    5
    6
    7
    8
    9
      var esriConfig = {
        apiKey: "YOUR_ACCESS_TOKEN"
      };
    

To learn about other ways to get an access token, go to Types of authentication.

Add modules

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

    Expand
    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 . 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 .

    Expand
    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_ACCESS_TOKEN";
    
          const map = new Map({
            basemap: "arcgis/topographic", // basemap styles service
    
          });
    
    Expand
  2. Set the layers property in map to myPointsFeatureLayer.

    Expand
    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_ACCESS_TOKEN";
    
          const map = new Map({
            basemap: "arcgis/topographic", // basemap styles service
    
            layers: [myPointsFeatureLayer]
    
          });
    
    Expand

Create an editor widget

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

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

    Expand
    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 at the top-right corner of the browser.

Edit features

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

  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 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 you created and update its 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 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 from your My Points .

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.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close