Route Optimization Using ESRI Georoutes for a WebGIS App

Paritosh Gupta
Jun 15
2 min read

Updated: Jun 16

Esri GeoRoutes is part of Esri's Network Analyst tools and provides advanced routing, directions, and logistics optimization capabilities using network datasets. It’s ideal for applications such as delivery planning, field workforce routing, and public service dispatching.

⚙️ Requirements

ArcGIS Online or ArcGIS Enterprise (with Network Analyst enabled)
ArcGIS REST API access
A web application built with JavaScript (ArcGIS API for JavaScript)
Optional: Your own network dataset (or use Esri's online services)

📦 Key Components

Route Layer: Represents a set of stops and barriers to generate the optimal path.
Network Dataset: Contains the road network and attributes used for travel cost modeling.
Routing Services:
- https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World (ArcGIS Online)
- Your own service URL in ArcGIS Enterprise.

👨‍💻 Step-by-Step Implementation

1. Add ArcGIS JavaScript API

<script src="https://js.arcgis.com/4.29/"></script>

2. Basic Web Map with Routing

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/rest/route",
  "esri/rest/support/RouteParameters",
  "esri/rest/support/FeatureSet",
  "esri/Graphic",
  "esri/layers/GraphicsLayer"
], function(Map, MapView, route, RouteParameters, FeatureSet, Graphic, GraphicsLayer) {

  const routeUrl = "https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";

  const map = new Map({ basemap: "streets" });
  const view = new MapView({ container: "viewDiv", map: map, center: [-122.4, 37.78], zoom: 13 });

  const graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  const stops = [];

  view.on("click", function(event) {
    const stop = new Graphic({
      geometry: event.mapPoint,
      symbol: { type: "simple-marker", color: "blue", size: "8px" }
    });
    graphicsLayer.add(stop);
    stops.push(stop);

    if (stops.length >= 2) {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({ features: stops }),
        returnDirections: true
      });

      route.solve(routeUrl, routeParams).then(function(data) {
        if (data.routeResults.length > 0) {
          graphicsLayer.add(new Graphic({
            geometry: data.routeResults[0].route.geometry,
            symbol: { type: "simple-line", color: [5, 150, 255], width: 4 }
          }));
        }
      });
    }
  });
});