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>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Directions",
"esri/layers/RouteLayer",
"esri/core/reactiveUtils"
], function (Map, MapView, Directions, RouteLayer, reactiveUtils) {
const apiKey = "YOUR_API_KEY";
// 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>
