Get drive time

Overview

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

Applications can use the ArcGIS Routing and Network Analytics Services to find routes, get driving directions, calculate drive times, and solve complicated multiple vehicle routing problems. 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 service areas that can be reached. Once you have the results you can add the areas to a map or integrate them further into your application. The ArcGIS Service Area Service is a premium service and requires requests to be authenticated. To access the service without signing in, visit the Set up authenticated services tutorial. To learn more about the capabilities of the underlying service, visit the REST documentation.

In this tutorial you will generate and display a ten minute drive time service area from a location the user clicks on the map.

Click on the map below to create drive time service areas.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

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

Change the basemap and position

1. In the main function, update the existing code to use the streets-navigation-vector basemap. Set the zoom level to 11, and the center to [-118.24532,34.05398] (Los Angeles).

         var map = new Map({
           //*** UPDATE ***//
           basemap: "streets-navigation-vector"
         });
   
         var view = new MapView({
           container: "viewDiv",
           map: map,
           //*** UPDATE ***//
           center: [-118.24532,34.05398],
           zoom: 11
         });
   

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",
         "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 = [10]; // 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 ten 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 = [10]; // 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.

Congratulations, you're done!

Your app should look something like this.

Challenge

Prevent the authentication dialog from appearing

Create 5, 10, and 15 minute drive time areas

      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);
      });