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 will 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
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.
- Go to the Create a new feature layer tutorial and follow the steps to create a new My Points feature layer.
- In your portal, click
Content
to access your layers. - Click My Points to open the feature layer property page.
- In Overview, find the Layer Id and Service URL. For example:
- Layer Id: 70264c2e37784a819e235d3a0129832f
- Service URL:
https
://services3.arcgis.com/ G Vgb Jbqm8h XASV Yi/arcgis/rest/services/my _points/ Feature Server
Create a new pen
- To get started, either complete the Display a map tutorial or .
Get an access token
You need an access token with the correct privileges to access the location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- 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 access to the layer item. Learn more in Item access privileges.
- Privileges
- In CodePen, set
esri
to your API key..Config.api Key Use dark colors for code blocks esriConfig.apiKey = "YOUR_ACCESS_TOKEN"; const map = new Map({ basemap: "arcgis/topographic" // basemap styles service });
To learn about other ways to get an access token, go to Types of authentication.
Add modules
-
In the
require
statement, add theFeature
andLayer 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/
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g.Map" 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. To learn more about the API's different modules visit the Overview Guide page.Use dark colors for code blocks require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Editor" ], function(esriConfig, Map, MapView, FeatureLayer, Editor) {
Add a feature layer
Use the Feature
class to access your My Points feature layer. The feature layer will be added to the map with the layers
property.
-
Above the
map
, create amy
and set itsPoints Feature Layer url
property to access the feature service.Use dark colors for code blocks // 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 });
-
Set the
layers
property inmap
tomy
.Points Feature Layer Use dark colors for code blocks // 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] });
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.
-
Create an
editor
and add it to theui
of theview
.Use dark colors for code blocks 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");
-
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.
-
If the application is not running, at the top-right click Run.
-
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. - id:
-
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. - id:
-
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: