Geoprocessing in ESRI-Leaflet with a polygon returns an error 500

[SimonWebster]

I'm having some trouble hooking up a geoprocessing task in esri-leaflet, when allowing the user to input a polygon.

I'm receiving an error 500 back from ArcGIS Server when I submit a polygon via ESRI-Leaflet. I'm not overly good with Javascript, so I may be missing something obvious - though it's not obvious to me.

I'm hoping you might be able to point at something in the first bit of javascript below with a "this is where it's wrong, try this instead". I've spent quite a number of hours searching esri-leaflet examples for polygon operations, but am coming up empty handed.

{"error":{"code":500,"message":"Error performing execute operation","details":[]}}‍

The page is very basic at the moment, and uses the leaflet example page, with esri-leaflet.js and esri-leaflet-gp added for the desired functionality.

I'll include the full page code at the bottom, but the main piece of JS in question is:

//Define the GP service location
var gpService = L.esri.GP.service({
url: "http://machine:6080/arcgis/rest/services/GPServices/TestPolygonGPService/GPServer/Test%20Polygon%20GP%20Service",
useCors:true
});


//Trigger when the create event is complete
map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;

    var gpTask = gpService.createTask();
    gpTask.setParam("InputPolygonSymbology_lyr", layer.toGeoJSON());
    console.log(layer.toGeoJSON());
    console.log("setParameter of event.layer successful");
    gpTask.run(polyQueryCallback);
    console.log("successfully called and returned the callback");
    drawnItems.addLayer(layer);
});

function polyQueryCallback(error, response, raw){
    //map.addLayer(L.geoJSON(layer));
    //console.log(Polyarea);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The geoprocessing service looks like below. Notice that there is a field "rand" and the shape length and area that I'm not submitting to the GP service. "rand" is set to allow nulls.

In this scenario I'm hoping that the only required input is the polygon geometry as JSON via the esri-leaflet arrangment.

Task: Test Polygon GP Service
Display Name: Test Polygon GP Service 

Description: This service is designed to test returning a single unique identifying parameter, together with comitting a polygon to an SDE database table whilst using in_memory workspaces. 

Category: 

Help URL: http://mi018461:6080/arcgis/rest/directories/arcgisoutput/GPServices/TestPolygonGPService_GPServer/GPServices_TestPolygonGPService/Model.htm 

Execution Type: esriExecutionTypeAsynchronous 

Parameters: 
Parameter: InputPolygonSymbology_lyr 
Data Type: GPFeatureRecordSetLayer 
Display Name InputPolygonSymbology.lyr 
Description: 50 percent opacity, and purple. 
Direction: esriGPParameterDirectionInput 
Default Value:
Geometry Type: esriGeometryPolygon 
HasZ: false 
HasM: false 
Spatial Reference: 102100  (3857) 

Fields:
objectid ( type: esriFieldTypeOID , alias: OBJECTID )
rand ( type: esriFieldTypeString , alias: rand , length: 50 )
shape_Length ( type: esriFieldTypeDouble , alias: shape_Length )
shape_Area ( type: esriFieldTypeDouble , alias: shape_Area )
Features: # records: 1

objectid: 1
rand: null
shape_Length: 8686075.788202167
shape_Area: 4.50582047673178E12
Polygon:
[-9999054.1244, 2095332.1645000018] , [-8234515.1612, 2524514.3561999984] , [-8203558.337300001, 139316.78449999914] more... 



Parameter Type: esriGPParameterTypeRequired 
Category: 

Parameter: RandVal 
Data Type: GPString 
Display Name RandVal 
Description: 
Direction: esriGPParameterDirectionOutput 
Default Value: 
Parameter Type: esriGPParameterTypeDerived 
Category: ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The data that the browser is sending seems to be in line with what I'd expect. Properly formed JSON, with coordinates, and type defined as polygon. It is perhaps missing the fields, as seen in the second image. The second image is the network output from Web App Builder with the geoprocessing widget (which returns a successful result)

Web App Builder network output 

So at this point, I can say it's something in how I'm submitting, but I'm not sure what to change, or how. Any keen suggestions?

The full code to the page is below - the GP service URL wont work - sorry.

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.draw vector editing handlers</title>

    <script src="http://leaflet.github.io/Leaflet.draw/docs/examples/libs/leaflet-src.js"></script>
    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/docs/examples/libs/leaflet.css"/>

    <script src="http://leaflet.github.io/Leaflet.draw/src/Leaflet.draw.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/Leaflet.Draw.Event.js"></script>
    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/src/leaflet.draw.css"/>

    <script src="http://leaflet.github.io/Leaflet.draw/src/Toolbar.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/Tooltip.js"></script>

    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/GeometryUtil.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/LatLngUtil.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/LineUtil.Intersect.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/Polygon.Intersect.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/Polyline.Intersect.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/ext/TouchEvents.js"></script>

    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/DrawToolbar.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Feature.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.SimpleShape.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polyline.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Marker.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Circle.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.CircleMarker.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polygon.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Rectangle.js"></script>


    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/EditToolbar.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Edit.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Delete.js"></script>

    <script src="http://leaflet.github.io/Leaflet.draw/src/Control.Draw.js"></script>

    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Poly.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.SimpleShape.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Rectangle.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Marker.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.CircleMarker.js"></script>
    <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Circle.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"
    integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
    crossorigin=""></script>

    <!-- load the latest release from the cdn automatically -->
    <script src="https://unpkg.com/esri-leaflet-gp"></script>

</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>

<script>
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
            map = new L.Map('map', { center: new L.LatLng(51.505, -0.04), zoom: 13 }),
            drawnItems = L.featureGroup().addTo(map);
    L.control.layers({
        'osm': osm.addTo(map),
        "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
            attribution: 'google'
        })
    }, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

    //Define the GP service location
    var gpService = L.esri.GP.service({
    url: "http://machine:6080/arcgis/rest/services/GPServices/TestPolygonGPService/GPServer/Test%20Polygon%20GP%20Service",
    useCors:true
    });


    //Trigger when the create event is complete
    map.on(L.Draw.Event.CREATED, function (event) {
        var layer = event.layer;

        var gpTask = gpService.createTask();
        gpTask.setParam("InputPolygonSymbology_lyr", layer.toGeoJSON());
        console.log(layer.toGeoJSON());
        console.log("setParameter of event.layer successful");
        gpTask.run(polyQueryCallback);
        console.log("successfully called and returned the callback");
        drawnItems.addLayer(layer);
    });

    function polyQueryCallback(error, response, raw){
        //map.addLayer(L.geoJSON(layer));
        //console.log(Polyarea);
    }

</script>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SimonWebster]

john gravois‌ Do you think you might be able to lend a hand, please?

[SimonWebster]

As it turns out there's nothing wrong with the code - providing the geoprocessing service is Synchronous. 

As soon as the geoprocessing service is set to Asynchronous this code fails with error 500, as described. 

[GavinRehkemper · Accepted solution]

Did you see this note in the documentation:

If you are working with an asynchronous service or one with a custom operation name and don't indicate corresponding information in the constructor, you'll have to leave the plugin enough time to make a roundtrip to the server to inquire before calling run().

L.esri.GP.Task | Esri Leaflet 

I'm not totally sure this is your issue, but you might try following that example to see if it helps.

[SimonWebster]

Gavin,

That was exactly the issue. I have not tried that code snippet you linked to yet, but changing the task to synchronous showed that running an async service was the issue. I suspect I’ll have to convert back to async by the end of the exercise anyhow. Thank you very much for the link!