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>
  • 1
    can you be more precise about the problem you get ? – LMokrane May 7 '18 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 May 7 '18 at 11:32
  • i've updated my answer – LMokrane May 7 '18 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 May 7 '18 at 22:58
  • i hope you have replaced the ... with the lines from "your" code – LMokrane May 8 '18 at 3:59
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);
    });
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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