Overview

You will learn: how to calculate drive time service areas from a location with the ArcGIS Service Area service.

The ArcGIS Routing and Network Analytics Services can find routes, get driving directions, calculate drive times, and solve complicated multiple vehicle routing problems. If you want to create an application that can determine the area that can be reached by driving or walking for a specific time, you can use the ArcGIS Service Area service and the solveServiceArea operation. The service requires one or more start locations (facilities), one or more time or distance based cutoffs, and a spatial reference. Once processed, the service will return the area that can be reached. These areas are referred to as "service areas". Once you have the results you can add the areas to a map or integrate them further into your application. To learn more about the core capabilities of the service, please visit the ArcGIS REST documentation.

In this tutorial you will generate and display fifteen minute drive time service areas from a point the user clicks on the map.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Get drive time.

Change the basemap and zoom level

  1. In the main function, update the existing code to use the streets-navigation-vector basemap and change the zoom level to 12.

          var map = new Map({
            //*** ADD ***//
            basemap: "streets-navigation-vector"
          });
    
          var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700],
            //*** ADD ***//
            zoom: 12
          });
    

Create the service area task

The first step is to reference the modules required for the application and to create a ServiceAreaTask.

  1. In the require statement, add the serviceAreaTask, ServiceAreaParameters, FeatureSet and Graphic modules.

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "esri/tasks/ServiceAreaTask",
           "esri/tasks/support/ServiceAreaParameters",
          "esri/tasks/support/FeatureSet",
          "esri/Graphic"
        ], function(Map, MapView, ServiceAreaTask, ServiceAreaParams, FeatureSet, Graphic) {
    
  2. At the end of the code in the main function, create a new ServiceAreaTask and reference the ArcGIS Network Analysis service.

          var serviceAreaTask = new ServiceAreaTask({
            url: "https://route.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"
          });
    

Create a point graphic

In this step, create a point graphic that represents the location from which you would like to calculate the drive time service area from. This location is known as a "facility".

  1. In the main function, create a createGraphic function that takes a point as a parameter.

          function createGraphic(point) {
            // Remove any existing graphics
            view.graphics.removeAll();
            // Create a and add the point
            var graphic = new Graphic({
              geometry: point,
              symbol: {
                type: "simple-marker",
                color: "white",
                size: 8
              }
            });
            view.graphics.add(graphic);
            return graphic;
          }
    
  2. Create a click handler for the view and call the createGraphic function. Pass in the mapPoint from the event.

          view.on("click", function(event){
            var locationGraphic = createGraphic(event.mapPoint);
          });
    
  3. Run and click on the map. You should see a small graphic where you clicked.

Create the service task parameters

In this step, create the parameters required for the ServiceAreaTask.

  1. In the main function, create a createServiceAreaParams function that takes a graphic point, drive time, and spatial reference as parameters.

          function createServiceAreaParams(locationGraphic, driveTimeCutoffs, outSpatialReference) {
            // Create one or more locations (facilities) to solve for
            var featureSet = new FeatureSet({
              features: [locationGraphic]
            });
            // Set all of the input parameters for the service
            var taskParameters = new ServiceAreaParams({
              facilities: featureSet, // Location(s) to start from
              defaultBreaks: driveTimeCutoffs, // One or more drive time cutoff values
              outSpatialReference: outSpatialReference // Spatial reference to match the view
            });
            return taskParameters;
          }
    
  2. Add code to the click handler and call the createServiceAreaParams function. Pass in the locationGraphic, an array that represents the driveTimeCutoffs (the drive time cutoff values in minutes), and the view.spatialReference.

          view.on("click", function(event){
            var locationGraphic = createGraphic(event.mapPoint);
            //*** ADD ***//
            var driveTimeCutoffs = [15]; // Minutes (default)
            var serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference);
          });
    
  3. Run the app and click on the map to verify there are no errors. At this point, only the location graphic should be visible.

Execute the service area task

The last step is to call the service with all of the parameters and add the resulting area to the map. This area represents a fifteen minute drive time service area from the location clicked.

  1. In the main function, create a createServiceAreaParams function that takes the service area parameters as input. Add code to get the serviceAreaPolygons from the results and add them to the map with a semi-transparent red graphic symbol. If there are errors, write them out to the console.

          function executeServiceAreaTask(serviceAreaParams) {
            return serviceAreaTask.solve(serviceAreaParams)
              .then(function(result){
                if (result.serviceAreaPolygons.length) {
                  // Draw each service area polygon
                  result.serviceAreaPolygons.forEach(function(graphic){
                    graphic.symbol = {
                      type: "simple-fill",
                      color: "rgba(255,50,50,.25)"
                    }
                    view.graphics.add(graphic,0);
                  });
                }
              }, function(error){
                console.log(error);
              });
          }
    
  2. Add code to the click handler and call the executeServiceAreaTask function. This function will call the service and add the drive time service area graphics to the map.

          view.on("click", function(event){
            var locationGraphic = createGraphic(event.mapPoint);
            var driveTimeCutoffs = [15]; // Minutes (default)
            var serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference);
            //*** ADD ***//
            executeServiceAreaTask(serviceAreaParams);
          });
    
  3. Run the app and click on the map several times to generate drive time service areas for different locations. You may need to zoom out to a larger area.

NOTE: If you would like to prevent the authentication dialog from appearing, try the challenge step below.

Congratulations, you're done!

Your app should look something like this.

Challenge

Prevent the authentication dialog from appearing

If you want to access the ArcGIS Network Analytics service directly and prevent the application from prompting the user for authentication, you can use a service proxy.

  1. Go to the Set up authenticated services lab and create a proxy to access the ArcGIS Network Analytics Service Area service.

  2. In the dashboard, copy the Service Area proxy URL and update the application code.

         var serviceAreaTask = new ServiceAreaTask({
           //*** ADD ***//
           url: "https://utility.arcgis.com/usrsvcs/appservices/<your-id>/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea"
         });
    
  3. Run the application again and it shouldn't prompt the user to sign in.

Create 5, 10, and 15 minute drive time areas

In the click function, add multiple drive time areas by changing the driveTimeArray value to an array of times for 5, 10 and 15 minutes. Each time specified will result in different service area polygon. Feel free to experiment with different time values.

      view.on("click", function(event){
        var locationGraphic = createGraphic(event.mapPoint);

        //*** ADD ***//
        var driveTimeCutoffs = [5,10,15]; // Minutes (default)

        var serviceAreaParams = createServiceAreaParams(locationGraphic, driveTimeCutoffs, view.spatialReference);
        executeServiceAreaTask(serviceAreaParams);
      });