Add, update, and delete data in a hosted feature layer .
Prerequisites You need an ArcGIS account to access the developer dashboard and create an API key .
Steps Create a new pen If you are using the CDN libraries, use this pen to get started. Get an API Key To access location services , you need an API key or OAuth 2.0 access token . To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial. In CodePen , update apiKey to use your key. Make the request Copy and paste the code below, following the steps to make a request to the feature service.
Reference the ArcGIS REST JS libraries either through CDN, ES Modules, or Node JS.
Set the apiKey with the API key from your dashboard .
Define the parameters needed for the request.
Call the feature service and handle the results.
CDN CDN ES Modules Node JS Use dark colors for code blocks
Show more lines
Add line. Change line Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width" />
< title > ArcGIS REST JS </ title >
< style >
body {
font-family : monospace;
color : white;
}
pre {
overflow : auto;
padding : 1rem ;
}
body ,
pre {
background : #000000 ;
}
</ style >
</ head >
< body >
< pre id = "result-add" > </ pre >
< hr />
< pre id = "result-update" > </ pre >
< hr />
< pre id = "result-delete" > </ pre >
<!-- require ArcGIS REST JS libraries from https://unpkg.com -->
< script src = "https://unpkg.com/@esri/arcgis-rest-request@4.0.0/dist/bundled/request.umd.js" > </ script >
< script src = "https://unpkg.com/@esri/arcgis-rest-feature-service@4.0.0/dist/bundled/feature-service.umd.js" > </ script >
< script >
/* when including ArcGIS REST JS all exports are available
from the same arcgisRest global */
const apiKey = "YOUR_API_KEY" ;
const authentication = arcgisRest.ApiKeyManager.fromKey(apiKey);
const featureServiceLayerUrl = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/my_points/FeatureServer/0" ;
const featureToAdd = {
attributes : {
id : 101 ,
name : "editing test" ,
rating : "2"
},
geometry : {
x : - 118.807 ,
y : 34.002 ,
spatialReference : {
wkid : 4326
}
}
};
// begin by adding a new feature to the feature service layer,
// then update its attributes,
// and finally delete it from the layer
arcgisRest
.addFeatures({
url : featureServiceLayerUrl,
features : [featureToAdd],
authentication
})
.then(handleAdded);
function handleAdded ( response ) {
console .log(response);
document .getElementById( "result-add" ).textContent = JSON .stringify(response, null , 2 );
if (!response.addResults[ 0 ].success) {
// stop early if adding a new feature was not successful
return ;
}
// perform an update to feature attributes using the objectId of the newly added feature
const featureToUpdate = {
attributes : {
objectId : response.addResults[ 0 ].objectId,
name : "new name" ,
rating : "3"
}
};
arcgisRest
.updateFeatures({
url : featureServiceLayerUrl,
features : [featureToUpdate],
authentication
})
.then(handleUpdated);
}
function handleUpdated ( response ) {
console .log(response);
document .getElementById( "result-update" ).textContent = JSON .stringify(response, null , 2 );
if (!response.updateResults[ 0 ].success) {
// stop early if updating the feature was not successful
return ;
}
// delete the feature using the objectId of the updated feature
// NOTE: it is the same objectId provided in the response of `arcgisRest.addFeatures`
const featureToDelete = [response.updateResults[ 0 ].objectId];
arcgisRest
.deleteFeatures({
url : featureServiceLayerUrl,
objectIds : [featureToDelete],
authentication
})
.then(handleDeleted);
}
function handleDeleted ( response ) {
console .log(response);
document .getElementById( "result-delete" ).textContent = JSON .stringify(response, null , 2 );
}
</ script >
</ body >
</ html >
Show more lines
Result The request will return the following results :
What's next? Learn how to use additional ArcGIS location services in these tutorials: