Tutorial: Perform a feature analysis

Learn how to perform a hot spot feature analysis with the spatial analysis service.

Run a find hot spot analysis on traffic and parking violations in San Francisco.

A feature analysis is the process of using the spatial analysis service to perform server-side geometric and analytic operations on feature data. All feature analysis requests are job requests. The easiest way to programmatically run an analysis request to the spatial analysis service is to use ArcGIS REST JS, which provides a Job class that handles long- running operations.

In this tutorial, you use ArcGIS REST JS to perform a hot spot analysis to find statistically significant clusters of parking violations.

Prerequisites

You need the following to access the spatial analysis service and perform feature analysis operations:

An ArcGIS Online account.
A registered application to obtain its Client ID.
The redirect URL of the registered application to use for authentication in the format "https://<server>[:port]" as in: https://localhost:8080.

Steps

Download the starter code

Download the tutorial starter code zip file from the portal.

The zip file contains the following:

feature-analysis.html
authenticate.html

The feature-analysis.html file contains basic HTML scaffolding and the OAuth 2.0 code necessary to perform the analysis. The authenticate.html file is the callback page used as part of the authentication process.

Configure authentication

To access the spatial analysis service, you need an access token with privileges to perform spatial analysis. Use the ArcGISIdentityManager class from ArcGIS REST JS to configure user authentication.

Go to the item page of your OAuth credentials and copy the Client ID.

In the authenticate.html file, replace YOUR_CLIENT_ID with your Client ID.

Expand
Use dark colors for code blocks
    <script type="module">
      import { ArcGISIdentityManager } from 'https://esm.run/@esri/arcgis-rest-request@4';

      const clientId = "YOUR_CLIENT_ID";

      const redirectUri = "authenticate.html";
      ArcGISIdentityManager.completeOAuth2({
        clientId,
        redirectUri
      })
    </script>
Expand

In the feature-analysis.html file, replace YOUR_CLIENT_ID with your Client ID.

Expand
Use dark colors for code blocks
      const clientId = 'YOUR_CLIENT_ID';

      const signInLabel = "Sign in";

      const acctErrorMsg =
        "You can only access the spatial analysis service if you have an access token with privileges to perform spatial analysis. To learn more, go to the <a href='https://developers.arcgis.com/documentation/mapping-apis-and-services/security/'>Security and authentication guide</a>.";
Expand

Run the application and navigate to your localhost, for example https://localhost:8080.

You should be able to click the Sign in button and successfully log in to an ArcGIS Online account.

Display parking violations

To perform feature analysis, you need to provide feature data as input. In this tutorial, you use the SF parking violations hosted feature layer as input data for the hot spot analysis.

Add the parking violation feature layer and the corresponding map tile layer to the points and pointsTile variables.

Expand
Use dark colors for code blocks
      const acctErrorMsg =
        "You can only access the spatial analysis service if you have an access token with privileges to perform spatial analysis. To learn more, go to the <a href='https://developers.arcgis.com/documentation/mapping-apis-and-services/security/'>Security and authentication guide</a>.";

      const points =
        'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/sf_traffic_parking_violations_sa_osapi/FeatureServer/0';

      const pointsTile = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/sf_traffic_parking_violations_image_tile/MapServer"

      const sampleResults =
        'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/sf_osapi_driveways_sidewalk_hot_spots/FeatureServer/0';
      // You may need to modify this path to reflect your actual file structure
      const redirectUri = `${window.location.origin}/authenticate.html`;
Expand

Create a viewer and set the session.token to display a basemap layer.

Expand
Use dark colors for code blocks
      const initMap = () => {
        authentication = arcgisRest.ApiKeyManager.fromKey(session.token);
        if (viewer) {
            return;
        }
        Cesium.ArcGisMapService.defaultAccessToken = session.token;

        const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
        viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
            timeline: false,
            animation: false,
            geocoder:false
        });
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(-122.456449,37.721988,7000),
            orientation: {
                pitch: Cesium.Math.toRadians(-55),
                heading: Cesium.Math.toRadians(-5)
            }
        });

      };

      const updateSessionInfo = (thisSession) => {
        let sessionInfo = document.getElementById('withPopupButton');

        if (thisSession) {
          session = thisSession;
          sessionInfo.innerHTML = `Sign out : ${session.username}`;
          localStorage.setItem(
            '__ARCGIS_REST_USER_SESSION__',
            session.serialize()
          );

          authentication = arcgisRest.ApiKeyManager.fromKey(session.token);

          document.getElementById('signInModal').open = false;
          document.getElementById('runAnalysisBtn').disabled = false;
          document.getElementById('resultsCBox').disabled = false;
        } else {
          sessionInfo.innerHTML = signInLabel;

          document.getElementById('signInModal').open = true;
          document.getElementById('runAnalysisBtn').disabled = true;
          document.getElementById('resultsCBox').disabled = true;
        }
      };
Expand

Add the SF Parking Violations map tile service to the map.

Expand
Use dark colors for code blocks
      const initMap = () => {
        authentication = arcgisRest.ApiKeyManager.fromKey(session.token);
        if (viewer) {
            return;
        }
        Cesium.ArcGisMapService.defaultAccessToken = session.token;

        const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
        viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
            timeline: false,
            animation: false,
            geocoder:false
        });
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(-122.456449,37.721988,7000),
            orientation: {
                pitch: Cesium.Math.toRadians(-55),
                heading: Cesium.Math.toRadians(-5)
            }
        });

        viewer.imageryLayers.addImageryProvider(
        new Cesium.ArcGisMapServerImageryProvider({
            url: pointsTile,
            maximumLevel:16,
        }))

      };
Expand

Run the application and navigate to your localhost, for example https://localhost:8080. After you sign in, you will see the vector tile layer rendered on the map.

Get the analysis URL

To make a request to the spatial analysis service, you need to get the URL first. The analysis service URL is unique to your organization.

Call the getSelf operation from ArcGIS REST JS to obtain the analysis URL.

Expand
Use dark colors for code blocks
      const getAnalysisUrl = async (withAuth) => {
        const portalSelf = await getSelf({
          authentication: withAuth,
        });

        return portalSelf.helperServices.analysis.url;
      };

      document
        .getElementById('withPopupButton')
        .addEventListener('click', getAuth);
Expand

Make the request

Use the Job class and set the operationURL and params required for the selected analysis.

Create a function that submits a Job request to the spatial analysis service using your organization's analysis URL. Set the params required for a hot spot analysis and authenticate using the session token.

Expand
Use dark colors for code blocks
      const getAnalysisUrl = async (withAuth) => {
        const portalSelf = await getSelf({
          authentication: withAuth,
        });

        return portalSelf.helperServices.analysis.url;
      };

      const runAnalysis = async () => {
        const analysisUrl = await getAnalysisUrl(session);
        const operationUrl = `${analysisUrl}/FindHotSpots/submitJob`;
        const params = {
          analysisLayer: { url: points },
          shapeType: 'Hexagon',
          outputName: {
            serviceProperties: {
              name: `CesiumJS_find_hot_spots_${new Date().getTime()}`,
            },
          }, //Outputs results as a hosted feature serivce.
        };

        const jobReq = await Job.submitJob({
          url: operationUrl,
          params: params,
          authentication: session,
        });

        // listen to the status event to get updates every time the job status is checked.
        jobReq.on(JOB_STATUSES.Status, (jobInfo) => {
          console.log(jobInfo.status);
        });

        // get all the results, this will start monitoring and trigger events
        const jobResp = await jobReq.getAllResults();

        // jobResp.aggregatedLayer.value.url
        return jobResp;
      };
Expand

Call the runAnalysis function to run the operation.

Expand
Use dark colors for code blocks
      const runAnalysisBtnWasClicked = (evt) => {
        document.getElementById('runAnalysisBtn').hidden = true;
        document.getElementById('progressBar').hidden = false;
        document.getElementById('withPopupButton').disabled = true;
        document.getElementById('resultsCBox').disabled = true;

        runAnalysis().then(
          (results) => {
            document.getElementById('runAnalysisBtn').hidden = false;
            document.getElementById('progressBar').hidden = true;
            document.getElementById('withPopupButton').disabled = false;
            document.getElementById('resultsCBox').disabled = false;

          },
          (err) => {
            console.log(err);
            document.getElementById('progressBar').hidden = true;
            document.getElementById('runAnalysisBtn').hidden = false;
            document.getElementById('withPopupButton').disabled = false;
            document.getElementById('resultsCBox').disabled = false;
            showAlert(err);
          }
        );

      };
Expand

Display results

The results of a feature analysis are returned as feature data.

Create a style definition for the analysis result layer. Add a new layer to your map to contain analysis results.

Expand
Use dark colors for code blocks
      let session = null;
      let viewer = null;
      let authentication = null;
      let lastResultUrl = null;

      const fillColors = {
        'Hot Spot with 99% Confidence':'#d62f27',
        'Hot Spot with 95% Confidence':'#ed7551',
        'Hot Spot with 90% Confidence':'#fab984',
        'Not Significant':'#f7f7f2',
        'Cold Spot with 90% Confidence':'#c0ccbe',
        'Cold Spot with 95% Confidence':'#849eba',
        'Cold Spot with 99% Confidence':'#4575b5'
      }
Expand

Access the URL of the result layer when the analysis completes.

Expand
Use dark colors for code blocks
        runAnalysis().then(
          (results) => {
            document.getElementById('runAnalysisBtn').hidden = false;
            document.getElementById('progressBar').hidden = true;
            document.getElementById('withPopupButton').disabled = false;
            document.getElementById('resultsCBox').disabled = false;

            lastResultUrl = results.hotSpotsResultLayer.value.url;
            addResults(false);

          },
          (err) => {
            console.log(err);
            document.getElementById('progressBar').hidden = true;
            document.getElementById('runAnalysisBtn').hidden = false;
            document.getElementById('withPopupButton').disabled = false;
            document.getElementById('resultsCBox').disabled = false;
            showAlert(err);
          }
        );
Expand

Add the results to the map from the hosted feature layer URL as GeoJSON.

Expand
Use dark colors for code blocks
      const sampleResults =
        'https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/sf_osapi_driveways_sidewalk_hot_spots/FeatureServer/0';
      // You may need to modify this path to reflect your actual file structure
      const redirectUri = `${window.location.origin}/authenticate.html`;

      const addResults = (sample) => {
        lastResultUrl = sample ? sampleResults : lastResultUrl;
        if (lastResultUrl) {
          if (viewer.dataSources.getByName('analysisResults').length > 0) {
            emptyLayerSource();
          }

          arcgisRest.queryFeatures({
            url: lastResultUrl,
            authentication,
            f:"geojson",
            where:'Gi_Bin<>0'
          }).then((response) => {
              console.log(response)

          })

          document.getElementById('clearResultsBtn').disabled = false;
          document.getElementById('runAnalysisBtn').disabled = true;
        }
      };

      const clearResults = () => {
        if (lastResultLayer) {
          emptyLayerSource();
          document.getElementById('clearResultsBtn').disabled = true;
          document.getElementById('resultsCBox').checked = false;
          if (session) {
            document.getElementById('runAnalysisBtn').disabled = false;
          }
        }
      };
Expand

Style the GeoJSON layer to color and extrude each hex bin.

Expand
Use dark colors for code blocks
      const addResults = (sample) => {
        lastResultUrl = sample ? sampleResults : lastResultUrl;
        if (lastResultUrl) {
          if (viewer.dataSources.getByName('analysisResults').length > 0) {
            emptyLayerSource();
          }

          arcgisRest.queryFeatures({
            url: lastResultUrl,
            authentication,
            f:"geojson",
            where:'Gi_Bin<>0'
          }).then((response) => {
              console.log(response)

              Cesium.GeoJsonDataSource.load(response, {
                  stroke:Cesium.Color.fromCssColorString('#bbbbbb')
              }).then(layer => {
                  layer.name = 'analysisResults'

                  const hexBins = layer.entities.values;

                  for (let i=0;i<hexBins.length;i++) {
                      const bin = hexBins[i];

                      bin.polygon.material = Cesium.Color.fromCssColorString(fillColors[bin.properties['Gi_Text']]);
                      bin.polygon.extrudedHeight = (bin.properties['Gi_Bin']+4) * 100;
                  }

                  viewer.dataSources.add(layer);
              })

          })

          document.getElementById('clearResultsBtn').disabled = false;
          document.getElementById('runAnalysisBtn').disabled = true;
        }
      };
Expand

Run the app

Run the application and navigate to your localhost, for example https://localhost:8080.

When you click the Run analysis button, you submit a request to the spatial analysis service to perform a hot spot analysis. When the job is complete, the results of the analysis will display on the map.

What's next?

To learn how to perform other types of feature analysis, go to the related tutorials in the Spatial analysis guide:

Go to these tutorials to find, create, and enrich data for spatial analysis.

Find data sources

Discover data in ArcGIS that you can use for feature analysis.

Create data sources

Import, create, and generate data for feature analysis.

Enrich data sources

Enrich data with demographics and local facts for feature analysis.

Go to these tutorials to learn how to perform analyses interactively with the Map Viewer and programmatically with ArcGIS REST JS, ArcGIS API for Python, and ArcGIS REST API.

Find and extract data

Find data with attribute and spatial queries using find analysis operations.

Combine data

Overlay, join, and dissolve features using combine analysis operations.

Summarize data

Aggregate and summarize features using summarize analysis operations.

Discover patterns in data

Find patterns and trends in data using spatial analysis operations.