serviceArea

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