serviceArea

AMD: require(["esri/rest/serviceArea"], (serviceArea) => { /* code goes here */ });
ESM: import * as serviceArea from "@arcgis/core/rest/serviceArea.js";
Object: esri/rest/serviceArea
Since: ArcGIS Maps SDK for JavaScript 4.19

With the Service area service, you can find the area that can be reached from the input location within a given travel time or travel distance. A service area is the area that encompasses all streets that can be accessed within a given distance or travel time from one or more locations, referred to as facilities. Service areas are generally used to visualize and measure the accessibility of facilities. For example, a three-minute drive-time polygon around a grocery store can determine which residents are able to reach the store within three minutes and are thus more likely to shop there. The service can also create multiple concentric service areas around one or more facilities that can show how accessibility changes with an increase in travel time or travel distance. It can be used, for example, to determine how many hospitals are within 5-, 10-, and 15-minute drive times of schools. When creating service areas based on travel times, the service can make use of traffic data, which can influence the area that can be reached during different times of the day.

Method Overview

Name Return Type Summary Object

Determines the service area based on a set of parameters.

serviceArea

Method Details

solve

Method
solve(url, params, requestOptions){Promise<ServiceAreaSolveResult>}

Determines the service area based on a set of parameters.

Parameters
url String

URL to the ArcGIS Server REST resource that represents a network analysis service.

The parameters needed to define the service area.

requestOptions Object
optional

Additional options to be used for the data request.

Returns
Type Description
Promise<ServiceAreaSolveResult> When resolved, returns an instance of ServiceAreaSolveResult.
Example
require([
  "esri/config",
  "esri/Map",
  "esri/views/MapView",
  "esri/rest/serviceArea",
  "esri/rest/support/ServiceAreaParameters",
  "esri/rest/support/FeatureSet",
  "esri/Graphic"
], function(esriConfig, Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic) {

  // API key from developer's account
  // https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/
  // authenticates for the basemap and the serviceArea request
  esriConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "arcgis-newspaper"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-116.53818, 33.82586],
    zoom: 11
  });

  const serviceAreaUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea";

  view.on("click", function(event){
    const locationGraphic = createGraphic(event.mapPoint);
    const serviceAreaParams = createServiceAreaParams(locationGraphic, view.spatialReference);
    solveServiceArea(serviceAreaUrl, serviceAreaParams);
  });

  // Create the location graphic
  function createGraphic(point) {
    view.graphics.removeAll();
    const graphic = new Graphic({
      geometry: point,
      symbol: {
        type: "simple-marker",
        color: "white",
        size: 8
      }
    });
    view.graphics.add(graphic);
    return graphic;
  }

  function createServiceAreaParams(locationGraphic, outSpatialReference) {
    // Create one or more locations (facilities) to solve for
    const featureSet = new FeatureSet({
      features: [locationGraphic]
    });

    // Set all of the input parameters for the service
    const serviceAreaParameters = new ServiceAreaParams({
      facilities: featureSet,
      trimOuterPolygon: true,
      outSpatialReference: outSpatialReference
    });
    return serviceAreaParameters;
  }

  function solveServiceArea(url, serviceAreaParams) {
    return serviceArea.solve(url, serviceAreaParams).then((result) => {
      if (result.serviceAreaPolygons.features.length) {
        // Draw each service area polygon
        result.serviceAreaPolygons.features.forEach((graphic) => {
          graphic.symbol = {
            type: "simple-fill",
            color: "rgba(62,13,94,.25)"
          }
          view.graphics.add(graphic,0);
        });
      }
    }).catch((error) => {
      console.log(error);
    });
  }
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.