Edit feature data

Learn how to add, update, and delete features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more in a feature service A feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables. Learn more .

You can add, update, and delete features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more in a feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more with the Editor component. This component allows you to edit both geometries A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more and attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more . To use the component, 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 An item page is a web page in ArcGIS Online or the developer dashboard used to access and manage the properties for an item and the content it references such as a web map, hosted layer, or file. Learn more . You can verify credentials and settings on the item property page in your ArcGIS account An ArcGIS account is an identity with a user type and set of privileges that can access specific ArcGIS products, tools, APIs, services, and resources. The main account types that can be used for development are an ArcGIS Location Platform account, ArcGIS Online account, and ArcGIS Enterprise account. ArcGIS Location Platform and ArcGIS Online accounts are also associated with a subscription. Learn more .

In this tutorial, you will use the Editor component to add, update, and delete features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more 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 feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more hosted in ArcGIS ArcGIS is the brand name for all of the desktop, server, and developer products and technologies offered by Esri. Learn more 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 portal ArcGIS portal, also known as a portal, is a website with applications and tools that can be used to create, manage, access, and share geospatial content and data. It supports security and authentication, developer credentials, content and data service management, user and group management, and site administration. A portal can be hosted in Esri's infrastructure or your own infrastructure. Learn more , click Content to access your layers.
3. Click My Points to open the feature layer property page.
4. In Overview, find the Layer Id An item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook. Learn more 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 use this pen .

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

1. Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
   
   • Privileges
     • Location services > Basemaps
   • Item access
     • Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
2. In CodePen, set the apiKey property on the global esriConfig variable to your access token.

     var esriConfig = {
       apiKey: "YOUR_ACCESS_TOKEN",
     };

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

Display a map

1. Follow the steps in the Display a map tutorial to add a map with the arcgis/topographic basemap layer, centered on Point Dume State Beach, Malibu, California.

Add the Editor component

The Editor component gives you the ability to add, update, and delete features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more interactively. The component will check the map for all editable layers A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more and make them available automatically.

1. Create the Editor component inside the arcgis-map element and place the component in the top-right corner of the map.

27 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Edit feature data</title>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

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

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">

    <arcgis-zoom slot="top-left"></arcgis-zoom>

    <arcgis-editor slot="top-right"></arcgis-editor>

  </arcgis-map>
5 collapsed lines


</body>

</html>

Add script and modules

1. In a new <script> at the bottom of the <body>, use $arcgis.import() to add the FeatureLayer module.

   More info

   The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

   36 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Edit feature data</title>
   
     <script>
       var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <arcgis-editor slot="top-right"></arcgis-editor>
   
     </arcgis-map>
   
   
     <script type="module">
       const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
   
   
     </script>
   4 collapsed lines
   
   </body>
   
   </html>

Add a feature layer

Use the FeatureLayer class to access your My Points feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . The feature layer will be added to the map with the layers property.

1. Use document.querySelector() to get a reference to the Map component, then wait for it to be ready with the viewOnReady method. Next, create a myPointsFeatureLayer and set its url property to the My Points feature service A feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables. Learn more you created earlier.

   36 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Edit feature data</title>
   
     <script>
       var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <arcgis-editor slot="top-right"></arcgis-editor>
   
     </arcgis-map>
   
   
     <script type="module">
       const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
   
   
       const viewElement = document.querySelector("arcgis-map");
       await viewElement.viewOnReady();
   
       // Add feature layer (points)
       const myPointsFeatureLayer = new FeatureLayer({
         url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer/0",
       });
   
     </script>
   4 collapsed lines
   
   </body>
   
   </html>
2. Add addMyPoints layer to the map.

   36 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Edit feature data</title>
   
     <script>
       var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <arcgis-editor slot="top-right"></arcgis-editor>
   
     </arcgis-map>
   
   
     <script type="module">
       const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");
   
   
       const viewElement = document.querySelector("arcgis-map");
       await viewElement.viewOnReady();
   
       // Add feature layer (points)
       const myPointsFeatureLayer = new FeatureLayer({
         url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer/0",
       });
   
       viewElement.map.add(myPointsFeatureLayer);
   
     </script>
   4 collapsed lines
   
   </body>
   
   </html>

Edit features

Use the Editor component to add, update, and delete a feature A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more .

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 A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more with the following properties:

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

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

3. In the Editor, click Edit feature. Click on the feature A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more you created and update its attribute Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more values.

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

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

4. In the Editor, click Edit feature. Click on the feature A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more 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 A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more from your My Points feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

What’s next?

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

• Import data as a feature layer
• Create a new feature layer
• Query a feature layer (SQL)
• Query a feature layer (spatial)