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
