Run a geoprocessing task

Run a geoprocessing task to calculate routes to hospitals using the Esri Leaflet GP plugin. To learn more about routing, go to the Find a route and directions tutorial.
Use dark colors for code blocksCopy
<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.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.5/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <!-- Load Esri Leaflet GP from CDN -->
    <script src="https://unpkg.com/esri-leaflet-gp@3.0.0/dist/esri-leaflet-gp.js"></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
      #info-pane {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        padding: 1em;
        background: white;
      }
    </style>
  </head>
  <body>

<div id="map"></div>
<div id="info-pane" class="leaflet-bar">
  <label>
  Click on the map to calculate the best route to the nearest hospital.
  </label>
</div>

<script>
    let map = L.map('map').setView([33.780021258266224, -118.18885803222658], 12);
    const accessToken = "YOUR_ACCESS_TOKEN";

    const basemapEnum = "arcgis/light-gray";

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      token: accessToken
    }).addTo(map);

    // layers to organize graphics
    let routesLayer = L.featureGroup();
    let ambulanceLayer = L.featureGroup();

    map.addLayer(routesLayer);
    map.addLayer(ambulanceLayer);

    let ambulanceIcon = L.icon({
      iconUrl: 'https://cdn1.iconfinder.com/data/icons/covid-19-74/32/ambulance_car_covid-19-512.png',
      iconSize: [40, 40],
      iconAnchor: [20, 20]
    });
    let hospitalIcon = L.icon({
      iconUrl:"https://cdn3.iconfinder.com/data/icons/clinical-3/96/medical-kit-512.png",
      iconSize: [40, 40],
      iconAnchor: [20, 20]
    })

    // use a service proxy to authenticate automagically
    // https://developers.arcgis.com/authentication/working-with-proxies/
    let closestFacilityService = L.esri.GP.service({
        url: "https://utility.arcgis.com/usrsvcs/appservices/FnVYYTap8ykTDC1m/rest/services/World/ClosestFacility/NAServer/ClosestFacility_World",
        path: 'solveClosestFacility'
    });
    let closestFacilityTask = closestFacilityService.createTask();

    // tell the solver we'll be driving an ambulance
    closestFacilityTask.setParam("restrictionAttributeNames", "Driving an Emergency Vehicle");
    closestFacilityTask.setParam("returnCFRoutes", true);

    // fetch nearby hospitals from LA open data
    L.esri.query({
      url: "https://public.gis.lacounty.gov/public/rest/services/LACounty_Dynamic/LMS_Data_Public/MapServer/81"
    })
      .within(map.getBounds())
      .run(function (err, response, raw) {
        // draw the hospitals on the map
        map.addLayer(L.geoJSON(response, {
          pointToLayer: function (geoJsonPoint, latlng) {
            return L.marker(latlng, {icon:hospitalIcon})
          }
        }));
        // supply the same hospitals as an input parameter to the closest facility service
        closestFacilityTask.setParam("facilities", response);
    });

    // when someone clicks on the map, find the route to the nearest hospital
    map.on("click", function (evt) {
        // clear any existing
        routesLayer.clearLayers();
        ambulanceLayer.clearLayers();

        // add an ambulance icon to the map
        ambulanceLayer.addLayer(L.marker(evt.latlng, {
          icon: ambulanceIcon
        }));

        // supply the location of the map click as a service parameter
        closestFacilityTask.setParam("incidents", evt.latlng);

        // run the GP task
        closestFacilityTask.run(function (err, res, raw) {
            // draw the GeoJSON feature that was returned
            routesLayer.addLayer(L.geoJson(res.routes.features[0], {
              style: function (feature) {
                return {
                  weight:7
                }
              }
            }));
        })
    });
</script>

</body>
</html>