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

780
4
Jump to solution
06-28-2019 03:18 AM
SimonWebster
Occasional Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Reply
0 Kudos
1 Solution

Accepted Solutions
GavinRehkemper
Esri Contributor

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.

View solution in original post

Reply
0 Kudos
4 Replies
SimonWebster
Occasional Contributor

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

Reply
0 Kudos
SimonWebster
Occasional Contributor

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. 

Reply
0 Kudos
GavinRehkemper
Esri Contributor

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.

View solution in original post

Reply
0 Kudos
SimonWebster
Occasional Contributor

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!

Reply
0 Kudos