Построить пешеходный маршрут на карте

fragments/route.php

@@ -32,9 +32,20 @@
   ];
   const routeMap = L.map(mapElement,{scrollWheelZoom:false,zoomControl:false});
   L.control.zoom({position:'bottomright'}).addTo(routeMap);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors'}).addTo(routeMap);
+  L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap contributors, Tiles style by HOT'}).addTo(routeMap);
   const coordinates = stops.map(([,lat,lng]) => [lat,lng]);
-  L.polyline(coordinates,{color:'#d8a653',weight:5,opacity:.9,lineCap:'round',lineJoin:'round'}).addTo(routeMap);
+  const routeStyle = {color:'#d8a653',weight:5,opacity:.95,lineCap:'round',lineJoin:'round'};
+  const directRoute = L.polyline(coordinates,{...routeStyle,dashArray:'8 8',opacity:.55}).addTo(routeMap);
+  const walkingCoordinates = coordinates.map(([lat,lng]) => `${lng},${lat}`).join(';');
+  fetch(`https://routing.openstreetmap.de/routed-foot/route/v1/driving/${walkingCoordinates}?overview=full&geometries=geojson&steps=false`)
+    .then(response => response.ok ? response.json() : Promise.reject(new Error('Walking route unavailable')))
+    .then(data => {
+      const route = data.routes?.[0]?.geometry;
+      if (!route) return;
+      routeMap.removeLayer(directRoute);
+      L.geoJSON(route,{style:routeStyle}).addTo(routeMap);
+    })
+    .catch(() => {});
   const bounds = L.latLngBounds(coordinates);
   stops.forEach(([title,lat,lng],index) => {
     const marker = L.marker([lat,lng],{icon:L.divIcon({className:'route-marker-wrap',html:`<span class="route-marker">${index+1}</span>`,iconSize:[36,36],iconAnchor:[18,18]})}).addTo(routeMap);