nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

ChrisRomsos

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

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt2

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

All comments

ChrisRomsos

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

TimWitt2

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

ChrisRomsos

I'll give it a try. thanks Tim.

-Chris

TerryGustafson

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

TimWitt2

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

TerryGustafson

Hey Chris,

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

Thanks,

Terry

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.