Hide Table of Contents
Latest Samples
View Geoprocessing tool link in popup sample in sandbox
Geoprocessing tool link in popup

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.26/esri/css/esri.css">

    <style>
       html,body, #mapDiv{
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    </style>

    <script src="https://js.arcgis.com/3.26/"></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>
 
          
Show Modal