Having trouble adding a feature to a feature service through leaflet.

[NikolasSchmidt]

So, I've got a feature service that I'd like to be able to add a feature to through a Leaflet map. I've got it set up so that when the user clicks anywhere on the map, a Bootstrap modal pops up and lets them enter information about that point, to be added as attributes. The points are added to the map with all the appropriate attributes, but they're all clustered around the origin (equator, prime meridian). I assumed this was an issue with the spatial reference, so I explicitly set it to a different spatial reference, but that didn't help. I then attempted to convert from decimal degrees to meters with some rough math, which got it away from the origin, but not anywhere near close to where it should be. Is there a way to convert from decimal degrees through either the Esri Javascript API or Esri Leaflet API? Are there other ways to make sure the correct spatial reference is being used? Are there simple mathematical formulas to convert from degrees to meters? Any other suggestions?

Thank you in advance!

[JohnGravois]

please share a small reproducible test case with the bare minimum of code necessary to demonstrate the problem. i'd be happy to take a look at it and help.

you're welcome to use this demo feature service if yours isn't publicly accessible.

[NikolasSchmidt]

I was having trouble getting it to work with the server you provided, unfortunately. I keep getting a vague 500 error {"error":{"code":500,"message":"Unable to complete operation.","details":[]}} with no details when trying to post the feature to that server, whether through the function below or the actual addFeatures link. As a result, this may not be 100% reproducible, for which I apologize. Regardless, here's the function where I'm running into trouble. I stole the jquery posting from another Geonet thread. If there's anything else I can try to supply for you, please let me know.

Assume that the arguments "author" and "comment" are user-defined strings, and that "latitude" and "longitude" are stored as numerical representations of coordinates, such as 21.107012104600532.

function addComment(latitude, longitude, author, comment) {
   var url = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/ServiceRequest/FeatureServer/0/addFeatures"; //again, I was unable to get this function to work with this server

   var feature = {
      "geometry" : {"type" : "Point", "x": longitude, "y":latitude },
      "attributes" : {
         "name" : author,
         "comments": comment
      },
   };

   $.post(url, {
      features: JSON.stringify([feature]),
      f: "json"
    })
   .done(function(results) {
      console.log(results);
   })
   .fail(function(error) {
      console.log(error);
   });
}

This function works to post it to the server I'm working with, but when it does, I believe all the coordinates are read in as measurements in meters as opposed to latitude and longitude coordinates because they're all around the origin. I've tried multiplying by different values to get closer to where these points should be, but I feel like that's not the most effective way to solve this problem. I've also tried specifying a spatialReference and wkid for the feature, but that wasn't helpful either.

[JohnGravois]

i noticed a few unexplainable errors with that sample server too, so i found a different test server to play with.

there are several problems with your approach:

1. "type" : "Point"  is not valid to include within a JSON geometry object

2. you forgot to remove a trailing comma from your "attributes" object

3. you absolutely must provide a spatial reference object to let the service know you are passing lat/long coordinates when the service itself stores its data in a different CRS.

{ "x" : -118.15, "y" : 33.80, "spatialReference" : { "wkid" : 4326 }}

4. i don't know why, but in my own testing i encountered more predictable, appropriate responses when i used the generic "/applyEdits" operation than when i made requests to "/addFeatures"

http://jsbin.com/lafarap/edit?html,output 

edit: i tested a bit more and realized the only reason i was having trouble with /addFeatures was because i was using it to try and add geometries that were way outside the source extent of the original data. both endpoints are consistent, as they should be.

[NikolasSchmidt]

Alright, this worked. Thank you very much for all the help! I am going to mark your other reply as the correct answer just to encourage better practices. I'll see if I'm able to transition my work into something more along those lines. That said, this solution did resolve my issues with trying to post through jQuery and whatnot. Thanks again!

[JohnGravois · Accepted solution]

all that said, i'd highly recommend you consider using the functionality we built into esri leaflet for this, as it makes it substantially more straightforward to ensure the appropriate request is made.

L.esri.FeatureLayer | Esri Leaflet 

map.on("click", function (evt) {
  // http://leafletjs.com/reference-1.1.0.html#marker-togeojson
  let newFeature = L.marker(evt.latlng).toGeoJSON();
  newFeature.properties.inspector = 'john';

  myFeatureLayer.addFeature(newFeature, function (err, response) {
    console.log(response);
  });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

http://jsbin.com/kufesac/edit?html,output