Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample shows how you can send some input values to a GIS model on an ArcGIS Server and get the results back in your web application. In this example, the model calculates drive time polygons from a point that you click on the map. This type of analysis could be useful for a business that wanted to know how many people live within a 1, 2, and 3 minute drive, for example.
This model is exposed through an ArcGIS Server geoprocessing service. To get an idea of what inputs and outputs are used in the model, see the Services Directory page for the CalculateDriveTimePolygons service. Besides the default information, the model author has provided additional documentation that you can access by clicking the "Help URL" link on the page.
To access your models from ArcGIS Server, you'll need to create a geoprocessing task:
gp = new esri.tasks.Geoprocessor("..."); You can use Services Directory to discover the URLs to your own geoprocessing services.
When you use a geoprocessing task, you'll typically configure a set of input parameters, then execute the task.
var params = {"Input_Location": featureSet,"Drive_Times": driveTimes};gp.execute(params, getDriveTimePolys); You can optionally include a callback function that runs when the task is done executing. In this example the callback function getDriveTimePolys configures the symbols for the result polygons and adds them to the map.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Service Area Task</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #mapDiv {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#info {
bottom: 20px;
color: #444;
height: auto;
font-family: arial, sans-serif;
left: 20px;
margin: 5px;
padding: 10px;
position: absolute;
text-align: left;
width: 200px;
z-index: 40;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/Color",
"esri/map",
"esri/graphic",
"esri/graphicsUtils",
"esri/tasks/Geoprocessor",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol"
], function(Color, Map, Graphic, graphicsUtils, Geoprocessor, FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol) {
var map, gp;
var driveTimes = "1 2 3";
// Initialize map, GP and image params
map = new Map("mapDiv", {
basemap: "streets",
center: [-95.255, 38.96],
zoom: 12
});
gp = new Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons");
gp.setOutputSpatialReference({wkid: 102100});
map.on("click", computeServiceArea);
function computeServiceArea(evt) {
map.graphics.clear();
var pointSymbol = new SimpleMarkerSymbol();
pointSymbol.setOutline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1);
pointSymbol.setSize(14);
pointSymbol.setColor(new Color([0, 255, 0, 0.25]));
var graphic = new Graphic(evt.mapPoint, pointSymbol);
map.graphics.add(graphic);
var features = [];
features.push(graphic);
var featureSet = new FeatureSet();
featureSet.features = features;
var params = { "Input_Location": featureSet, "Drive_Times": driveTimes };
gp.execute(params, getDriveTimePolys);
}
function getDriveTimePolys(results, messages) {
var features = results[0].value.features;
// add drive time polygons to the map
for (var f = 0, fl = features.length; f < fl; f++) {
var feature = features[f];
if (f === 0) {
var polySymbolRed = new SimpleFillSymbol();
polySymbolRed.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0, 0.5]), 1));
polySymbolRed.setColor(new Color([255, 0, 0, 0.7]));
feature.setSymbol(polySymbolRed);
}
else if (f == 1) {
var polySymbolGreen = new SimpleFillSymbol();
polySymbolGreen.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 0, 0.5]), 1));
polySymbolGreen.setColor(new Color([0, 255, 0, 0.7]));
feature.setSymbol(polySymbolGreen);
}
else if (f == 2) {
var polySymbolBlue = new SimpleFillSymbol();
polySymbolBlue.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0, 0.5]), 1));
polySymbolBlue.setColor(new Color([0, 0, 255, 0.7]));
feature.setSymbol(polySymbolBlue);
}
map.graphics.add(feature);
}
// get the extent for the drive time polygon graphics and
// zoom to the extent of the drive time polygons
map.setExtent(graphicsUtils.graphicsExtent(map.graphics.graphics), true);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
<div id="info" class="esriSimpleSlider">
Click the map to use a Geoprocessing(GP) task to generate and zoom to drive time polygons. The drive time polygons
are 1, 2, and 3 minutes.
</div>
</body>
</html>