Run a geoprocessing task

Run a geoprocessing task to find one and two minute drive time polygons using the Esri Leaflet GP plugin. For more explanation about service areas, visit the tutorial.

Use dark colors for code blocksCopy
                                                                                    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
  <head>
    <meta charset="utf-8" />
    <title>Run a geoprocessing task</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@3.1.3/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <!-- load the latest release from the cdn automatically -->
    <script src="https://unpkg.com/esri-leaflet-gp"></script>
    <style>
      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        padding: 1em;
        background: white;
      }
    </style>
    <div id="map"></div>
    <div id="info-pane" class="leaflet-bar">
      <label> Click on the map to calculate<br />1 and 2 minute drivetime polygons </label>
    </div>
    <script type="text/javascript">
      const apiKey = "YOUR_API_KEY";

      const map = L.map("map").setView([37.78, -122.42], 12);

      L.esri.Vector.vectorBasemapLayer("ArcGIS:ModernAntique", {
        apikey: apiKey
      }).addTo(map);

      const gpService = L.esri.GP.service({
        url: "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer/CreateDriveTimePolygons",
        useCors: false
      });

      const gpTask = gpService.createTask();

      gpTask.setParam("Drive_Times", "1 2");

      const driveTimes = L.featureGroup();
      map.addLayer(driveTimes);

      const infoPane = document.getElementById("info-pane");

      map.on("click", function (evt) {
        infoPane.innerHTML = "working...";
        driveTimes.clearLayers();
        gpTask.setParam("Input_Location", evt.latlng);
        gpTask.run(driveTimeCallback);
      });

      function driveTimeCallback(error, response, raw) {
        infoPane.innerHTML = "click on the map to calculate<br>1 and 2 minute drivetimes";

        if (error) {
          return;
        }

        driveTimes.addLayer(L.geoJSON(response.Output_Drive_Time_Polygons));
      }
    </script>
  </body>
</html>

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