Hide Table of Contents
View Basic service area sample in sandbox
Basic service area

Description

This sample demonstrates how to work with ServiceAreaTask added at version 2.0. This sample uses the task to calculate the service area around an input location. A network service area is a region that encompasses all accessible streets within the specified range. The ServiceAreaParameters object is used to define the parameters used to calculate the service area. In the snippet below the defaultBreaks property is used to define that a two minute drive time service area should be calculated.

params = new esri.tasks.ServiceAreaParameters(); params.defaultBreaks= [2]; params.outSpatialReference = map.spatialReference; params.returnFacilities = false;

The input location is defined by creating a new facility when a user clicks on the map. Once the facility is generated a new service area request is created and sent to the server. After the route is solved, the results are returned to the client and the result is added to the map's graphics layer.

Code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Basic Service Area</title>
  
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
  <style> 
    body, html, #main { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
      width: 100%;
    }
  </style> 
  
  <script src="https://js.arcgis.com/3.21/"></script>
  <script>
    var map, serviceAreaTask, params, clickpoint;

    require([
      "esri/map", "esri/config", 
      "esri/tasks/ServiceAreaTask", "esri/tasks/ServiceAreaParameters", "esri/tasks/FeatureSet",
      "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
      "esri/geometry/Point", "esri/graphic",
      "dojo/parser", "dojo/dom", "dijit/registry", 
      "esri/Color", "dojo/_base/array",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalSlider",
      "dojo/domReady!"
    ], function(
      Map, esriConfig, 
      ServiceAreaTask, ServiceAreaParameters, FeatureSet, 
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
      Point, Graphic,
      parser, dom, registry,
      Color, arrayUtils
    ) {
      parser.parse();

      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to  
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic 
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";
      
      map = new Map("map", { 
        basemap: "streets",
        center: [-122.447, 37.781],
        zoom: 15
      });

      map.on("click", mapClickHandler);

      params = new ServiceAreaParameters();
      params.defaultBreaks= [1];
      params.outSpatialReference = map.spatialReference;
      params.returnFacilities = false;
      
      serviceAreaTask = new ServiceAreaTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");
            
      registry.byId("hslider").on("change", updateHorizontalLabel);
      updateHorizontalLabel();

      // Create function that updates label when changed
      function updateHorizontalLabel() {
        // Get access to nodes/widgets we need to get/set values
        var hSlider = registry.byId("hslider");
        var label = dom.byId("decValue");
        // Update label
        label.innerHTML = hSlider.get("value");
        params.defaultBreaks = [ hSlider.value / 60 ];
        if (clickpoint) {
          mapClickHandler(clickpoint);
        }
      }
      
      function mapClickHandler(evt) {
        clickpoint = evt;
        map.graphics.clear(); //clear existing graphics
        //define the symbology used to display the results and input point
        var pointSymbol = new SimpleMarkerSymbol(
          "diamond",
          20,
          new SimpleLineSymbol(
            "solid",
            new Color([88,116,152]), 2
          ),
          new Color([88,116,152,0.45])
        );
        var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);
        var location = new Graphic(inPoint, pointSymbol);

        map.graphics.add(location);
        var features = [];
        features.push(location);
        var facilities = new FeatureSet();
        facilities.features = features;
        params.facilities = facilities;

        //solve 
        serviceAreaTask.solve(params,function(solveResult){
          var polygonSymbol = new SimpleFillSymbol(
            "solid",  
            new SimpleLineSymbol("solid", new Color([232,104,80]), 2),
            new Color([232,104,80,0.25])
          );
          arrayUtils.forEach(solveResult.serviceAreaPolygons, function(serviceArea){
            serviceArea.setSymbol(polygonSymbol);
            map.graphics.add(serviceArea);
          });
          
        }, function(err){
          console.log(err.message);
        });
      }
    });
  </script>
</head>

<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <b>Click to find the service area polygon</b>

      <div style="width: 400px; margin: 10px">
        
        <ol data-dojo-type="dijit/form/HorizontalRuleLabels"
          data-dojo-props="
            container: 'topDecoration',
            style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">
          <li>0</li>
          <li>0:20</li>
          <li>0:40</li>
          <li>1:00</li>
          <li>1:20</li>
          <li>1:40</li>
          <li>2:00</li>
        </ol>
        <div data-dojo-type="dijit/form/HorizontalRule"
          data-dojo-props="
            container: 'topDecoration',
            count: 7,
            style: 'height: 5px; margin: 0 12px;'">
        </div>
        <input id="hslider" value="60" type="range"
          data-dojo-type="dijit/form/HorizontalSlider"
          data-dojo-props="
            minimum: 0,
            maximum: 120,
            showButtons: false,
            discreteValues: 25">
        <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>
      </div>

    </div> 

    <div id="map" dojotype="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>    
  </div>
</body>
</html>