Catch Directions widget stops changes (v4.32)

MarcStationsGPL · ‎04-14-2025

Hi gents,
I am (unsuccessfully) trying to detect when start and end position are set into the Direction Widget.
Even if I add positions on map through the widget, I never get the expected message in the console.

It drives me mad ! Could you help please ?

Here is the code (need an API Key to run) :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte de France - Widget Directions avec Route Layer</title>
<script src="https://js.arcgis.com/4.32/"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css">
<style>
html, body, #viewDiv {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="viewDiv"></div>

// Initialisation de la carte
const routeLayer = new RouteLayer(); // Création d'une couche pour l'itinéraire

const map = new Map({
basemap: "streets-vector",
layers: [routeLayer] // Ajout de la couche d'itinéraire à la carte
});

const view = new MapView({
container: "viewDiv",
map: map,
center: [2.21, 46.5], // Centré sur la France
zoom: 6
});

// Widget Directions avec RouteLayer attribué
const directionsWidget = new Directions({
view: view,
apiKey: apiKey,
layer: routeLayer, // Attribution de la couche d'itinéraire
visibleElements: {
directions: true, // Afficher les directions
layerDetailsLink: false
}
});

view.ui.add(directionsWidget, "top-right");

// Surveiller les arrêts pour afficher un message dans la console
reactiveUtils.watch(
() => directionsWidget.viewModel.stops.length,
(length) => {
if (length > 0) {
const stops = directionsWidget.viewModel.stops.toArray();
stops.forEach((stop, index) => {
if (stop.name) {
console.log(`Adresse ${index === 0 ? "de départ" : "d'arrivée"} confirmée : ${stop.name}`);
}
});
}
}
);
});
</script>
</body>
</html>

Edvinas_S · ‎04-15-2025

directionsWidget.viewModel does not have "stops" property. You should watch directionsWidget.lastRoute.

lastRoute also contains a lot of other information, like route lines, travel times, distance, barriers, etc.

Docs: Directions | API Reference | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer

reactiveUtils.watch(
  () => directionsWidget.lastRoute,
  (lastRoute) => {
    const stops = lastRoute.stops;
    stops.forEach((stop, index) => {
      if (stop.name) {
        console.log(`Adresse ${index === 0 ? "de départ" : "d'arrivée"} confirmée : ${stop.name}`);
      }
    });
  }
);

View solution in original post

Edvinas_S · ‎04-15-2025

directionsWidget.viewModel does not have "stops" property. You should watch directionsWidget.lastRoute.

lastRoute also contains a lot of other information, like route lines, travel times, distance, barriers, etc.

Docs: Directions | API Reference | ArcGIS Maps SDK for JavaScript 4.32 | Esri Developer

reactiveUtils.watch(
  () => directionsWidget.lastRoute,
  (lastRoute) => {
    const stops = lastRoute.stops;
    stops.forEach((stop, index) => {
      if (stop.name) {
        console.log(`Adresse ${index === 0 ? "de départ" : "d'arrivée"} confirmée : ${stop.name}`);
      }
    });
  }
);

RichieCarmichael · ‎04-15-2025

Hi @MarcStationsGPL ,

@Edvinas_S is correct. DirectionsViewModel no longer has a `stops` property. Current stops are accessible from either the underlying route layer or via lastRoute which contains a reference to the solved route.

In the snippet below, the collection of stops in the route layer are "watched" for additions. Additionally, the code watches for changes in stop geometry (e.g. when a stop is "located" or moved).

As noted here, when if an empty route layer is assigned to the Directions widget, two stops without a name or geometry are added to the layer. This is why `monitorStopLocationChanges` is called immediately after the widget is created below.

Hope this helps.

const directions = new Directions({ apiKey, view, layer });
view.ui.add(directions, "top-right");

for (const stop of directions.layer.stops) {
  monitorStopLocationChanges(stop);
}

reactiveUtils.on(
  () => directions.layer.stops,
  "change",
  (e) => {
    console.log("Stops added", e.added);
    for (const stop of e.added) {
      monitorStopLocationChanges(stop);
    }
  }
)

function monitorStopLocationChanges(stop) {
  reactiveUtils.watch(
    () => stop.geometry,
    (geometry) => {
      console.log("Stop location changed", geometry);
    }
  );
}