serviceArea | References | ArcGIS Maps SDK for JavaScript

import { solve } from "@arcgis/core/rest/serviceArea.js";

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.

See also

Functions

Name	Return Type	Object
`solve`	`Promise<ServiceAreaSolveResult>`

solve

Function

Determines the service area based on a set of parameters.

Signature: solve (url: string, params: ServiceAreaParameters, requestOptions: RequestOptions | null): Promise<ServiceAreaSolveResult>

Parameters

Parameter	Type	Description
url	`string`	URL to the ArcGIS Server REST resource that represents a network analysis service.
params	`ServiceAreaParameters`	The parameters needed to define the service area.
requestOptions	`RequestOptions \| null`	Additional options to be used for the data request.

Returns: Promise<ServiceAreaSolveResult>
When resolved, returns an instance of ServiceAreaSolveResult.

Example

const [esriConfig, Map, MapView, serviceArea, ServiceAreaParams, FeatureSet, Graphic] = await $arcgis.import([
  "@arcgis/core/config.js",
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
  "@arcgis/core/rest/serviceArea.js",
  "@arcgis/core/rest/support/ServiceAreaParameters.js",
  "@arcgis/core/rest/support/FeatureSet.js",
  "@arcgis/core/Graphic.js"
]);

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