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
Geoprocessing tool link in popup
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This sample demonstrates how to run a geoprocessing tool from a popup window. The popup class extends the default info window to provide additional capabilities including the ability to associate feature(s) with an info window. In this sample, a link is added to each popup window that use the Population geoprocessing service to calculate the population summary for the selected feature.
To run the geoprocessing task, a new link is added to the bottom of the popup in the 'actions list' section next to the zoom link. After creating the link, a function is registered that will run each time someone clicks on the link. The function, calculatePopulation, sets up and runs the geoprocessing task using the selected feature.
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>Extend Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html,body, #mapDiv{
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/map",
"esri/arcgis/utils",
"esri/tasks/Geoprocessor",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/geometry/webMercatorUtils",
"esri/SpatialReference",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/config",
"dojo/dom-construct",
"dojo/query",
"dojo/on",
"dojo/dom-attr",
"dojo/dom",
"esri/Color",
"dojo/domReady!"
], function(
Map,
arcgisUtils,
Geoprocessor,
GeometryService,
BufferParameters,
webMercatorUtils,
SpatialReference,
FeatureSet,
SimpleFillSymbol,
Graphic,
config,
domConstruct,
query,
on,
domAttr,
dom,
Color
) {
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
config.defaults.geometryService = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
config.defaults.io.proxyUrl = "/proxy/";
//create the map based on an arcgis online webmap id
arcgisUtils.createMap("a193c5459e6e4fd99ebf09d893d65cf0", "mapDiv").then(function(response){
window.map = response.map;
//setup the geoprocessing tool that will run when users click the new link. This tool
//calculates the population in the specified area.
window.gp = new Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary");
//create a link that we'll the map's popup window.
//The link section of the popup has a class called actionList assigned so we can
//use dojo/query to find the elements with this class name.
var link = domConstruct.create("a",{
"class": "action",
"id": "statsLink",
"innerHTML": "Population", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", window.map.infoWindow.domNode)[0]);
//when the link is clicked register a function that will run
on(link, "click", calculatePopulation);
});
function calculatePopulation(evt){
//display a message so user knows something is happening
domAttr.set(dom.byId("statsLink"), "innerHTML", "Calculating...");
//Get the feature associated with the displayed popup and use it as
//input to the geoprocessing task. The geoprocessing task will calculate
//population statistics for the area within the specified buffer distance.
var feature = window.map.infoWindow.getSelectedFeature();
var param = new BufferParameters();
param.geometries = [webMercatorUtils.webMercatorToGeographic(feature.geometry)];
param.distances = [10]; //buffer distance
param.unit = GeometryService.UNIT_KILOMETER;
param.bufferSpatialReference = new SpatialReference({"wkid": 4326});
param.outSpatialReference = new SpatialReference({"wkid": 102100});
param.geodesic = true;
config.defaults.geometryService.buffer(param, function(geometries){
var graphic = new Graphic(geometries[0]);
graphic.setSymbol(new SimpleFillSymbol().setColor(new Color([0,255,255,0.25])));
window.map.graphics.add(graphic);
//Use the buffered geometry as input to the GP task
var featureSet = new FeatureSet();
featureSet.geometryType = "esriGeometryPolygon";
featureSet.features = [graphic];
var taskParams = {
"inputPoly": featureSet
};
window.gp.execute(taskParams, gpResultAvailable, gpFailure);
});
}
function gpResultAvailable(results, messages){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Population");
//clear any existing features displayed in the popup
window.map.infoWindow.clearFeatures();
//display the query results
var content = "";
if(results.length > 0){
content = "Population = " + results[0].value.features[0].attributes.SUM;
}else{
content = "No Results Found";
}
window.map.infoWindow.setContent(content);
}
function gpFailure(error){
domAttr.set(dom.byId("statsLink"),"innerHTML", "Population");
var details = domConstruct.create("div", {
"innerHTML": "Population = " + error
}, query(".break", window.map.infoWindow.domNode)[0],"after" );
console.error("Error occurred: ", error);
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>