In this sample, we create features by defining the data as an array of objects, then we create a Graphic for each object, specifying the latitude and longitude for each feature we would like to add to the map.
Use dark colors for code blocks
1
2
3
4
5
6
7
8
9
10
11
for (let i = 0; i < data.length; i++){
graphic = new Graphic({
geometry: {
type: "point",
latitude: data[i].LATITUDE,
longitude: data[i].LONGITUDE
},
attributes: data[i]
});
graphics.push(graphic);
}
After creating the array of graphics that you want to add to the FeatureLayer, you must call applyEdits() on the layer. The object that you pass into applyEdits tells the method whether you will be adding, removing, or updating features. For adding features, that object would look like this:
Use dark colors for code blocks
1
2
3
const addEdits = {
addFeatures: graphics
};
After creating our edits object, we call the method applyEditsToLayer that calls applyEdits on the layer. If features were successfully added using applyEdits, we must call featureLayer.queryFeatures() to return the updated features, as shown in the following function.
Use dark colors for code blocks
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
functionapplyEditsToLayer(edits) {
monumentLayer
.applyEdits(edits)
.then((results) => {
// if edits were removedif (results.deleteFeatureResults.length > 0){
console.log(
results.deleteFeatureResults.length,
"features have been removed" );
addBtn.disabled = false;
removeBtn.disabled = true;
}
// if features were added - call queryFeatures to return// newly added graphicsif (results.addFeatureResults.length > 0){
const objectIds = [];
results.addFeatureResults.forEach((item) => {
objectIds.push(item.objectId);
});
// query the newly added features from the layer monumentLayer
.queryFeatures({
objectIds: objectIds
})
.then((results) => {
console.log(
results.features.length,
"features have been added." );
addBtn.disabled = true;
removeBtn.disabled = false;
})
}
})
.catch((error) => {
console.error();
});
}