topic Re: Help with using Geoprocessing task in JS application in Geoprocessing Questions

Help with using Geoprocessing task in JS application

JssrRR — Tue, 21 Jul 2015 18:55:35 GMT

Hi,

I am working with GP task for the first time and I am having some trouble getting it to work. I have published a synchronous GP service and I am trying to use that in a JS web application.

In my application all I want is a base map and I am using a map click to draw a buffer, with a user defined distance and select all the census block points that fall within that distance and output a summary of total block points, population and housing units within the buffer, I am not using a feature layer to select features or a result map service to draw the selected points on the map, but I want to use GP task to output a summary table.

What I am trying to do is, add the buffer graphics on the map and use it to input GP task result, something like in his sample which is using the user defined polygon to input the GP task, and getting a summary of population for that area.

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=gp_zonalstats

The GP task is working fine, because I added This GP task to the geoprocessing widget in the web app builder and it is doing exactly like I want it:

I am having trouble adding it to JS application, here is a JS fiddle with what I have so far but is not working:

This is what JSON from the service looks like:

I have also attached the image of the model used to publish the service and the details from the REST service directory.

Any help will be greatly appreciated!!

Re: Help with using Geoprocessing task in JS application

OwenEarley — Wed, 22 Jul 2015 21:40:06 GMT

You may need to project the input point from your JS application to match the projection used in your service. From the REST service image the input point should be in Spatial Reference 102603 (3081) - Texas?

However, most ESRI web mapping applications use the spatial reference 102100 so the point you are sending to the service is most likely in the wrong coordinate system and you are getting no results.

Re: Help with using Geoprocessing task in JS application

JssrRR — Wed, 22 Jul 2015 22:00:32 GMT

Owen,

I thought the adding this to the code while a creating the GP task object should take care of the projection and match the input to the projection of the map :

gpTask.setOutSpatialReference = map.spatialReference;

Let me know if you think I still need to republish the service with SR 102100.

Thanks.

Re: Help with using Geoprocessing task in JS application

OwenEarley — Wed, 22 Jul 2015 22:42:14 GMT

I think this only changes the output geometries:

setOutSpatialReference(spatialReference) None Sets the well-known ID of the spatial reference of the output geometries.

I haven't tried using this but you may be able to use setProcessSpatialReference() to force the task to complete the analysis using the map's spatial reference.

Alternatively, I would publish the service in WGS84 and use the webMercatorUtils to convert your map point to a geographic point.

Re: Help with using Geoprocessing task in JS application

JssrRR — Thu, 23 Jul 2015 18:07:48 GMT

Owen,

Thanks again for the quick response.

So you mean that if I publish the service in WGS84 and add this, in GP task input params?

like this

param.geometries = [webMercatorUtils.webMercatorToGeographic(feature.geometry)];

and I will not have to worry about, setOutSpatialReference to map's spatial reference?

Re: Help with using Geoprocessing task in JS application

JssrRR — Thu, 23 Jul 2015 20:54:24 GMT

Owen,

I have republished the GP service in WGS84 and I have also set the out spatial reference in the model's environments settings to WGS 84.

I have added the require and function in the application but do not what is the actual code that would be needed I got this from the API reference something like this?

require(["esri/geometry/webMercatorUtils"],

function(webMercatorUtils) {var pt = Point(0, 0), // a geographic point.
result;
if (webMercatorUtils.canProject(pt, map)) {
result = webMercatorUtils.project(pt, map)

} });

Here is the updated JS fiddlle, if you could please look at that and let me know if the code looks right?

http://jsfiddle.net/1snzLwcm/

I have also updated my attachments to my original post, with new REST inputs and JSON image

Thank you!

Re: Help with using Geoprocessing task in JS application

OwenEarley — Fri, 31 Jul 2015 02:36:05 GMT

To convert the point you would use this:

var ptGeo = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);

However, there are several other issues in the code that will also prevent it from working. I have created a modified version that uses your service and shows the results.

Please check the working example - GP Task (link removed).

The source is available from this page (link removed).

Let me know if you have questions about the code.

EDIT - the links have been removed as requested, please see the update by Saloni Rajput with the working code sections.

Re: Help with using Geoprocessing task in JS application

JssrRR — Fri, 31 Jul 2015 09:40:35 GMT

Thanks, Owen for modifying the code and making it work. I will look at the changes.

Re: Help with using Geoprocessing task in JS application

JssrRR — Mon, 03 Aug 2015 16:44:50 GMT

Hi Owen,

I have modified the code in my application and is working now. Could you please delete the link to the URL of my service for the GP task and the source code, and I will paste the required code for others to refer.

Thanks

Re: Help with using Geoprocessing task in JS application

OwenEarley — Mon, 03 Aug 2015 22:10:17 GMT

Done - can you make the relevant sections of code available on this post? Thanks.

Re: Help with using Geoprocessing task in JS application

JssrRR — Tue, 04 Aug 2015 14:52:52 GMT

Thanks, will do that.

Re: Help with using Geoprocessing task in JS application

JssrRR — Sun, 12 Dec 2021 04:03:42 GMT

Here is the relevant JavaScript part of the code from the working sample modified by Owen Earley

You would have to add the URL of the your GP service and input parameter pertaining to your GP service:

    require([
        "esri/map",
        "esri/dijit/Scalebar",
        "esri/dijit/Search",
        "esri/tasks/query",
        "esri/tasks/Geoprocessor",
        "esri/tasks/FeatureSet",
        "esri/tasks/ParameterValue",
        "esri/geometry/Circle",
        "esri/graphic",
        "esri/geometry/webMercatorUtils",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/SpatialReference",
        "esri/config",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "esri/Color",
        "dojo/dom",
        "dojo/parser",
        "dojo/on",
        "dojo/dom-style",
        "esri/layers/GraphicsLayer",
        "dojo/domReady!"],
    function (
        Map,
        Scalebar,
        Search,
        Query,
        Geoprocessor,
        FeatureSet,
        ParameterValue,
        Circle,
        Graphic,
        webMercatorUtils,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        SimpleFillSymbol,
        SimpleRenderer,
        SpatialReference,
        esriConfig,
        BorderContainer,
        ContentPane,
        Color,
        dom,
        parser,
        on,
        domStyle,
        GraphicsLayer) {


    // Parse DOM nodes decorated with the data-dojo-type attribute
    parser.parse();


    //Step: Specify the output fields           
    // this should not be needed as nearly all query & select functions are performed on the client  
    esriConfig.defaults.io.proxyUrl = "/proxy";


    map = new Map("mapDiv", {
        basemap: "streets",
        center: [-99.249, 31.954],
        zoom: 7,
        slider: true
    });
    
    var s = new Search({map: map}, "search");
    s.startup();


    var scalebar = new Scalebar({
        map: map,
        scalebarUnit: "dual"
    });
    
    //Buffer circle symbol  based on user input distance for dispaly only, not used for selecting features
    var circleSymb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
                        new Color([105, 105, 105]), 2), new Color([255, 255, 0, 0.25]));


    // GP
    var gpTask = new Geoprocessor("YourGP service URL");
    gpTask.setOutSpatialReference = map.spatialReference;
                        
    // Setup onTaskSuccess and onTaskFailure event handlers.
    dojo.connect(gpTask, "onExecuteComplete", createSummaryTable);
    dojo.connect(gpTask, "onError", createSummaryTableFailed);                
                        
    //when the map is clicked create a buffer around the click point of the specified distance.  
    map.on("click", function (evt) {
        
        // Add search radius graphic to map
        var radius = parseInt(dom.byId("bufferDistance").value);
        addRadiusGraphic(evt.mapPoint, radius);
        
        // Project map point to geographic and send to GP Task
        var ptGeo = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);    
        runGpTask(ptGeo, radius)        
    });
    
    function addRadiusGraphic(pt, radius) {
        var circle = new Circle({
            center: pt,
            geodesic: true,
            radius: radius,
            radiusUnit: "esriMiles"
        });
        var graphic = new Graphic(circle, circleSymb);
        map.graphics.clear();        
        map.graphics.add(graphic);
    }
    
    function runGpTask(pt, radius) {
        console.log("Run GP Task: ", pt, radius);
        
        //pt.attributes["OBJECTID"] = 1;
        
        var gr = new Graphic(pt);
        gr.setAttributes({"OBJECTID": 1});
        
        // Create GP task params (input feature set and search distance)
        var inputFeatures = new esri.tasks.FeatureSet();
        inputFeatures.geometryType = "esriGeometryPoint";
        inputFeatures.spatialReference = new SpatialReference(4326);
        inputFeatures.features = [gr];
        var SearchDistance = new esri.tasks.LinearUnit();
        SearchDistance.distance = radius;
        SearchDistance.units = "esriMiles";        
        var params = {
            "PointFeatureSet_WGS": inputFeatures,
            "Search_Distance": SearchDistance
        };
        
         console.log("Execute GP Task: ", params);
         
        dom.byId("totalsInfo").innerHTML = 'Calculating...';
        // Execute GP task
        gpTask.execute(params);
        
    }
    
    
    function createSummaryTable(results, messages) {
        console.log("createSummaryTable: ", results, messages);
        
        var recSet = results[0].value;
        var totBlocks = recSet.features.length;
        
        var totTotalPopulation = 0;
        var totHouseholdUnits = 0;                
        for (var x = 0; x < recSet.features.length; x++) {
          totHouseholdUnits += recSet.features.attributes["SUM_HU100"];
          totTotalPopulation += recSet.features.attributes["SUM_POP100"];
        }
        
        var htmlSummary = '<table id="resultsTable" cellspacing="0">' +
          '<tr><td>Blocks</td><td align="right">' + totBlocks + '</td></tr>' +
          '<tr><td>Total Population</td><td align="right">' + totTotalPopulation + '</td></tr>' +
          '<tr><td>Housing Units</td><td align="right">' + totHouseholdUnits + '</td></tr>' +
          '</table>';
        dom.byId("totalsInfo").innerHTML = htmlSummary;
    }
    
    function createSummaryTableFailed() {
        dom.byId("totalsInfo").innerHTML = "Processing Error";
    }
    
    
    });

Thanks.