AnsweredAssumed Answered

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

Question asked by SimonWebster.QFES on Jun 28, 2019
Latest reply on Jul 1, 2019 by SimonWebster.QFES

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>

Outcomes