0

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>
Improve this question
10
  • 1
    can you be more precise about the problem you get ?
    – LMokrane
    Commented May 7, 2018 at 8:50
  • Thank you for your response, I'm trying to add a new feature rather than edit an existing one. I have found it very hard to find much information about how to go about it.
    – OTBS
    Commented May 7, 2018 at 11:32
  • i've updated my answer
    – LMokrane
    Commented May 7, 2018 at 13:06
  • I am still having issues pushing data. It looks like someone has however there are no geometries. I have posted the updated full codeblock. Any help would be greatly appreciated
    – OTBS
    Commented May 7, 2018 at 22:58
  • i hope you have replaced the ... with the lines from "your" code
    – LMokrane
    Commented May 8, 2018 at 3:59

1 Answer 1

Reset to default
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);
    });
  });
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.