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 .
Go to the Create a new feature layer tutorial and follow the steps to create a new My Points feature layer.
In your dashboard , click Manage Layers 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 : 70264c2e37784a819e235d3a0129832fService URL : https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer
Create a new pen To get started, either complete the Display a map tutorial or use this pen . Set the API key To access ArcGIS services , you need an API key .
Go to your dashboard to get an API key .
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 In the require
statement, add the FeatureLayer
and Editor
modules.
More info The ArcGIS API for JavaScript uses AMD modules . The require
function is used to load modules so they can be used in the main function
. It's important to keep the module references and function parameters in the same order.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS JavaScript Tutorials: Edit feature data </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer" ,
"esri/widgets/Editor"
], function ( esriConfig, Map , MapView, FeatureLayer, Editor ) {
// 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]
});
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" );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
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.
Above the map
, create a myPointsFeatureLayer
and set its url
property to access the feature service .
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS JavaScript Tutorials: Edit feature data </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer" ,
"esri/widgets/Editor"
], function ( esriConfig, Map , MapView, FeatureLayer, Editor ) {
// 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]
});
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" );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
Set the layers
property in map
to myPointsFeatureLayer
.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS JavaScript Tutorials: Edit feature data </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer" ,
"esri/widgets/Editor"
], function ( esriConfig, Map , MapView, FeatureLayer, Editor ) {
// 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]
});
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" );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
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 the ui
of the view
.
Use dark colors for code blocks
Show more lines
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
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "initial-scale=1, maximum-scale=1, user-scalable=no" >
< title > ArcGIS JavaScript Tutorials: Edit feature data </ title >
< style >
html , body , #viewDiv {
padding : 0 ;
margin : 0 ;
height : 100% ;
width : 100% ;
}
</ style >
< link rel = "stylesheet" href = "https://js.arcgis.com/4.23/esri/themes/light/main.css" >
< script src = "https://js.arcgis.com/4.23/" > </ script >
< script >
require ([
"esri/config" ,
"esri/Map" ,
"esri/views/MapView" ,
"esri/layers/FeatureLayer" ,
"esri/widgets/Editor"
], function ( esriConfig, Map , MapView, FeatureLayer, Editor ) {
// 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]
});
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" );
});
</ script >
</ head >
< body >
< div id = "viewDiv" > </ div >
</ body >
</ html >
Show more lines
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.
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.
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: