topic Re: First attempt at using a geoprocessing service in a js web app in ArcGIS JavaScript Maps SDK Questions

First attempt at using a geoprocessing service in a js web app

ChrisRomsos — Wed, 25 Feb 2015 17:42:38 GMT

Hi,

I'm a novice web developer and have run into a snag and am not sure how to proceed.

Objective: create a simple web viewer using the javascript API for arc gis server. Create a button in the application that triggers an asynchronous geoprocessing service and adds the output as a dynamic map layer.

Progress: Using the example code on the ESRI webpages I quickly re-deployed the basic js example of a web app that loads a dynamic map service. Next, I read the online help related to using a geoprocessing service in a web app and displaying the results here.

ArcGIS Help 10.1 ‌"using"

and here

ArcGIS Help 10.1 "displaying"

Note: the geoprocessing service works when I test it from arcmap etc.

I'm not sure if I should post code directly to this message or not, so instead I'll put a link to the site. Then view source should reveal the code.

Link to non functional app

Thanks, Chris

Re: First attempt at using a geoprocessing service in a js web app

ChrisRomsos — Wed, 25 Feb 2015 17:45:21 GMT

Oops, itchy trigger finger. I should have added that the PROBLEM I'm having is that I don't really understand how to have the button run the geoprocessing task and return the result. I suspect I've either messed that up or improperly specified the inputs to the geoprocessing task.

Thanks

Re: First attempt at using a geoprocessing service in a js web app

TimWitt2 — Fri, 10 Dec 2021 22:51:23 GMT

Chris,

the following code will run on button click:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"/>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #mapDiv{ margin: 0; padding: 0; }
      #leftPanel {
        margin:5px;
        background: #fff;
        color: #444;
        font-family: arial;
        width: 250px;
        border-right: solid 1px #888;
      }
      #footer{
        border-top: solid 1px #888;
        height:55px;
      }
   


      #status{
        background-color:#E0E0E0; 
        color: #707070; 
        font-weight:bold;
        padding: 3px; 
        border: solid 1px #707070;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius:5px;
        position:absolute;
        top:50%;
        right:50%;
        z-index:100;
        display:none;
        height:20px;
      }
    </style>
    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
  "esri/dijit/BasemapToggle",
  "dojo/on",
  "dojo/parser",
  "dijit/registry",
  "esri/tasks/Geoprocessor",
  "dojo/dom",
  "dijit/layout/BorderContainer",
  "dijit/form/Button",
        "dojo/domReady!"

      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle,on, parser,registry, Geoprocessor, dom) {

        //parser.parse();

  map = new Map("mapDiv", {
          basemap: "topo",
          center: [-124.5, 44.15],
          zoom: 8
        });
  var toggle = new BasemapToggle({
          map: map,
          basemap: "satellite"
        }, "BasemapToggle");
        toggle.startup();

////////////////////////  Geoprocessing

  // esri.tasks.gp is required for using Geoprocessor.
  //  Add it along with other dojo.require statements.




  /* Step 1: Initialize Geoprocessing Task as a global variable. 
  That is, declare the variable outside a function definition 
  since we will be using gpTask variable in other methods */
  var gpTaskUrl="http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/RasterPlusModel/GPServer/Model";
  var gpTask = new Geoprocessor(gpTaskUrl);


  // Set output spatial reference property to map's spatial reference.
  //   myMap is assumed to be an instance of map container esri.map.
  gpTask.outSpatialReference=map.spatialReference;

  //Step 2: Setup Parameters of the task
  function setupParameters(){
    
  // Get Input Parameter 1 : GPFeatureRecordSetLayer from fLayer.
    var Input_raster_or_constant_value_1 = "Cetaceans\\Initial\\suitability";    


    // Get Input Parameter 2 : GPLinearunit from a dojo UI element
    var Input_raster_or_constant_value_2 = "Cetaceans\\Initial\\suitability";
    
    var params= {"Input_raster_or_constant_value_1":Input_raster_or_constant_value_1, "Input_raster_or_constant_value_2":Input_raster_or_constant_value_2};
    // Return name-value pairs of parameters
    return params;
  }

  on(dom.byId("hotspotButton"), "click", myGPSubmitJob);
  //Step 3: Run the task
  function myGPSubmitJob(){
  // Get params from setupParameters method described above.
  var params=setupParameters();


  // Setup event handlers.
  dojo.connect(gpTask, "onJobComplete",onTaskComplete);
  dojo.connect(gpTask, "onError",onTaskFailure);
  dojo.connect(gpTask, "onStatusUpdate",onTaskStatus);
  gpTask.submitJob(params);
  }


  // On Job Complete Callback add a dynamic map service using ResultMapService
  function onTaskComplete(jobInfo){
  //replace mapservice url with your url and append jobid
  var mapurl = "http://bhc.coas.oregonstate.edu:6080/arcgis/rest/services/geoprocessing/RasterPlusModel/MapServer/jobs/" + jobinfo.jobId;
  //create a dynamic map service
  var gpResultLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapurl, {
  id: "foo",
  opacity: 0.5
  });
  //add to web application.
  map.addLayer(gpResultLayer);
  }


  // Event handler for onStatusUpdate event
  function onTaskStatus(jobInfo) {
  //write status to console to help debugging
  console.log(jobInfo.jobStatus);
  }


  // Event handler for onError event
  function onTaskFailure(error) {
   // Report error 
   alert("Error:"+ error); 
  }


   app = {
        myGPSubmitJob: myGPSubmitJob
      };
      });
    </script>
  </head>
  <body>
  <div data-dojo-type="dijit.layout.BorderContainer"
       data-dojo-props="design:'headline',gutters:false"
       style="width: 100%; height: 100%; margin: 0;">
    <div id="mapDiv"></div>
  <div id="leftPanel" data-dojo-type="dijit.layout.ContentPane"data-dojo-props="region:'left'">
        <div align="center">
       
   <button id="hotspotButton" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Submit Job</button>
        </div>      
    </div>
  </div>

  </body>
</html>

Hope this helps!

Tim

Re: First attempt at using a geoprocessing service in a js web app

ChrisRomsos — Wed, 25 Feb 2015 18:58:42 GMT

I'll give it a try. thanks Tim.

-Chris

Re: First attempt at using a geoprocessing service in a js web app

TerryGustafson — Mon, 17 Aug 2015 18:53:20 GMT

Tim, this sounds like what I would like to do.. Did Chris ever say whether it worked for him?

Re: First attempt at using a geoprocessing service in a js web app

TimWitt2 — Mon, 17 Aug 2015 19:11:57 GMT

I don't know, but it is always a good sign when no answer follows

Re: First attempt at using a geoprocessing service in a js web app

TerryGustafson — Mon, 17 Aug 2015 19:15:47 GMT

That is a good point. ☺ So would that code you showed him go in the widget.js file?

Re: First attempt at using a geoprocessing service in a js web app

TerryGustafson — Mon, 17 Aug 2015 19:17:32 GMT

Hey Chris,

I was trying to do something similar. Did you have any luck with this?

Thanks,

Terry

Re: First attempt at using a geoprocessing service in a js web app

TimWitt2 — Mon, 17 Aug 2015 19:23:13 GMT

Yes inside the widget.js is where you have all your functions.

Re: First attempt at using a geoprocessing service in a js web app

TerryGustafson — Tue, 18 Aug 2015 13:50:36 GMT

Then I would have to create the widget.html and the config.json file? What is the manifest.json file for?

Re: First attempt at using a geoprocessing service in a js web app

TimWitt2 — Tue, 18 Aug 2015 13:58:05 GMT

This is where you tell the WebApp builder what files your widget uses via the properties.

Check out this document if you want to start developing: Web AppBuilder Developer Edition - Customization Resource List

Re: First attempt at using a geoprocessing service in a js web app

TerryGustafson — Tue, 18 Aug 2015 21:55:25 GMT

Ok , I make some progress but still can’t figure out why this will not go to the define coordinates.. Any ideas?

html, body, #mapDiv

#info

.label

var map;

var APP = {};

require([

"dojo/dom", "dojo/_base/array", "dojo/promise/all", "dojo/json",

"esri/map", "esri/domUtils", "esri/graphic", "esri/graphicsUtils",

"esri/geometry/Point", "esri/SpatialReference", "esri/tasks/GeometryService", "esri/tasks/Geoprocessor",

"esri/tasks/FeatureSet", "esri/tasks/RelationParameters",

"esri/Color", "esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol",

"esri/config", "esri/request", "dojo/domReady!"

], function(

dom, array, all, JSON,

Map, domUtils, Graphic, graphicsUtils,

Point, SpatialReference, GeometryService, Geoprocessor,

FeatureSet, RelationParameters,

Color, SimpleLineSymbol,

SimpleMarkerSymbol, SimpleFillSymbol,

esriConfig, esriRequest

) {

var geometryService, geometries, baseGraphics;

map = new esri.Map("mapDiv", {

basemap: "topo",

center: ,

zoom: 15

});

map.on("click", executeGP);

var gpUrl = "http://app.mdt.mt.gov/arcgis/rest/services/LRS/LocateFeaturesOnDCandRM/GPServer/Locate%20features%20along%20DC%20and%20RM";

APP.geoprocessor = new Geoprocessor(gpUrl);

function executeGP(){

var point = new Point(-12180856.426452411, 5952832.259593694, new SpatialReference({ wkid: 102100 }));

//var geometry = new geometry();

var graphic = new Graphic(point);

var features = [];

var featureSet = new FeatureSet();

featureSet.features = features;

var params = {

"f": "json",

"outSR": 102100,

"City_Centers" : featureSet,/**{

"geometryType":"esriGeometryPoint",

"features": [{

"geometry": {

"x": -12180856.426452411,

"y": 5952832.259593694,

"spatialReference":{

"wkid": 102100

}

}],

"sr": {

"wkid": 102100

}

},**/

"Search_Radius": {

"distance":50,

"units":"esriFeet"

"Keep_only_closest_route_location": false

//'distance_field': true,

//'zero_length_events': true,

//'in_fields': true,

//'m_direction_offsetting': true

};

APP.geoprocessor.submitJob(params, processGP);

};

function processGP(jobInfo){

APP.geoprocessor.getResultData(jobInfo.jobId, "LRM_DC_RM_MI1", renderResult);

};

function renderResult(result, message){

alert(result);

};

});

Enter the lat/long: