I am using the ArcGIS JavaScript API 3.24 and trying to update a featureLayer via an HTML input form. Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MyMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<style>
html,
body,
#map {
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Search",
"esri/geometry/Point",
"dojo/dom",
"esri/geometry/SpatialReference",
"dojo/on",
"dojo/domReady!"
], function (
map,
FeatureLayer,
Graphic,
Search,
Point,
dom,
SpatialReference,
on
) {
featureLayer = new FeatureLayer({
url: "https://services8.arcgis.com/R1PAHHLiCM5plgJt/arcgis/rest/services/Somepoint/FeatureServer/0",
outFields: ["*"],
});
//for testing purpose
var extent = {
XMin: -5120763.26772284,
XMax: 2036.05706365815,
YMin: 6120763.26772284,
YMax: 19997963.9429363,
};
var getLongitude = function() {
return (Math.random() * extent.XMax) + extent.XMin;
};
var getLatitude = function() {
return (Math.random() * extent.YMax) + extent.YMin;
};
on(document.getElementById('edit-save'), 'click', function() {
//create the feature
var feature = new Graphic();
var geometry = new Point({
x: getLongitude(),
y: getLatitude(),
spatialReference: new SpatialReference({wkid: 28354})
});
feature.geometry = geometry;
feature.attributes = {
"Name": document.getElementById('Name').value,
"Id": document.getElementById('Id').value
};
//add to the featureLayer
var promise = featureLayer.applyEdits({
addFeatures: [feature]
});
promise.then(function(res){
console.log('new OBJECTID:', res.addFeatureResults[0].objectId);
}, function(err){
console.error(err);
});
});
});
</script>
</head>
<body class="">
<div id="" class="">
<div class="">
<div class="">
<div class="">
<h1 class="">Edit Information</h1>
</div>
<div class="">
<form class="">
<div class="">
<label class="">ID</label>
<div class="">
<input type="text" class="" id="Id">
</div>
</div>
<div class="">
<label class="">Name</label>
<div class="">
<input type="text" class="" id="Name">
</div>
</div>
</form>
</div>
<div class="">
<button type="button" class="" id="edit-save">Save Changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
1 Answer 1
Edit: to add a feature, you can take a look at the example from the documentation.
Create a new graphic, you will need a geometry and its attributes. You get the attributes from your form https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#attributes
That featureLayer expects Points. So create a new one with its coordinates (i've put random longitude and latitude) and the spatialreference of the Feature Layer (28354) https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html#constructors-summary
var feature = new Graphic();
var geometry = new Point({
x: 5120763.26,
y: 97963.94,
spatialReference: new SpatialReference({wkid: 28354})
});
feature.geometry = geometry;
feature.attributes = {
"Name": dom.byId('Name').value,
"Id": dom.byId('Id').value
};
Now you can add that feature https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#applyEdits
const promise = featureLayer.applyEdits({
addFeatures: [feature]
});
Don't forget to add "esri/geometry/SpatialReference" as a required module
ps: i suggest you to use dojo/on, to handle the event of user's click on the user-save button, instead of jQuery:
require([
...
"esri/geometry/SpatialReference",
"dojo/on",
"dojo/domReady!"
], function (
...
SpatialReference,
on
) {
featureLayer = new FeatureLayer({
url: "https://services8.arcgis.com/R1PAHHLiCM5plgJt/arcgis/rest/services/Somepoint/FeatureServer/0",
outFields: ["*"],
});
//for testing purpose
var extent = {
XMin: -5120763.26772284,
XMax: 2036.05706365815,
YMin: 6120763.26772284,
YMax: 19997963.9429363,
};
var getLongitude = function() {
return (Math.random() * extent.XMax) + extent.XMin;
};
var getLatitude = function() {
return (Math.random() * extent.YMax) + extent.YMin;
};
on(dom.byId('edit-save'), 'click', function() {
//create the feature
var feature = new Graphic();
var geometry = new Point({
x: getLongitude(),
y: getLatitude(),
spatialReference: new SpatialReference({wkid: 28354})
});
feature.geometry = geometry;
feature.attributes = {
"Name": dom.byId('Name').value,
"Id": dom.byId('Id').value
};
//add to the featureLayer
var promise = featureLayer.applyEdits({
addFeatures: [feature]
});
var promise = featureLayer.applyEdits({
addFeatures: [feature]
});
promise.then(function(res){
console.log('new OBJECTID:', res.addFeatureResults[0].objectId);
}, function(err){
console.error(err);
});
});
});
...with the lines from "your" code