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.
Thanks, Chris
Solved! Go to Solution.
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/Mod..."; 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/jo..." + 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
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
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/Mod..."; 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/jo..." + 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
I'll give it a try. thanks Tim.
-Chris
Hey Chris,
I was trying to do something similar. Did you have any luck with this?
Thanks,
Terry
Tim, this sounds like what I would like to do.. Did Chris ever say whether it worked for him?
I don't know, but it is always a good sign when no answer follows
That is a good point. ☺ So would that code you showed him go in the widget.js file?
Yes inside the widget.js is where you have all your functions.
Then I would have to create the widget.html and the config.json file? What is the manifest.json file for?