Geoprocessing - hotspot analysis | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to use the geoprocessor asynchronously to calculate a hotspot analysis based on the frequency of 911 calls. It calculates the frequency of these calls within a given study area during a specified constrained time period set between 1/1/1998 and 5/31/1998. To run the hotspot analysis, click on the Analyze 911 Calls button.

How it works

When the Analyze 911 Calls button is clicked, an event listener triggers the function findHotspot(), which builds a date-constrained query and passes it as a parameter to geoprocessor. The submitJob() method is subsequently called and runs asynchronously. This method returns immediately after the job is submitted with a JobInfo object that contains information relating to the execution state of geoprocessor. The waitForJobCompletion() method recognizes when geoprocessor has finished processing, then calls the function to draw the result on the map.

        try {
          const jobInfo = await geoprocessor.submitJob(gpUrl, params);
          // geoprocessor submitJob, returns a JobInfo object
          const options = {
            statusCallback: (jobInfo1) => {
              progTest(jobInfo1);
            },
          };
          // once the job completes, add resulting layer to map
          jobInfo.waitForJobCompletion(options).then((jobInfo2) => {
            drawResultData(jobInfo2);
          });
        } catch (error) {
          message.innerText = `Failed to successfully submitJob:\n
            ${error}`;
        }
      }

While the submitJob() method is running, the progTest function pushes job status updates to the panel message area.

      function progTest(value) {
        message.textContent = `Job status: "${value.jobStatus}"`;
      }

The drawResultData callback function obtains the result as a MapImageLayer when the method completes successfully. It then adds the MapImageLayer to the map.

      async function drawResultData(result) {
        // add wait message
        message.textContent = "Adding MapImageLayer to the map...";

        // use the result (JobInfo object) to fetch a MapImageLayer
        try {
          const resultLayer = await result.fetchResultMapImageLayer(result.jobId);
          resultLayer.opacity = 0.7;
          resultLayer.title = "HotspotLayer";

          // add the result layer to the map
          viewElement.map.add(resultLayer);

          // once the MapImageLayer is added to the map,
          // update the message and add the legend
          resultLayer.on("layerview-create", () => {
            message.textContent = `Job status: "job-succeeded"`;
            // show the legend for the geoprocessing service result
            legend.hidden = false;
          });

          // if an error is produced when adding the MapImageLayer to the map,
          // update the message
          resultLayer.on("layerview-create-error", (event) => {
            legend.hidden = true;
            message.innerText = `Failed to add the MapImageLayer geoprocessing service output:\n
                ${event.error.message}\n ${event.error.details.url}`;
          });
        } catch (error) {
          legend.hidden = true;
          // if an error is produced when fetching the MapImageLayer from the geoprocessing service
          // display an error.
          message.innerText = `Failed to add the MapImageLayer geoprocessing service output:\n
            ${error}`;
        }
      }