Merge pull request #57 from Woosmap/fix/transit-direction-duration-di…

…stance fix transit and directions advanced samples
Woosmap · Jul 2, 2024 · 6ad20d7 · 6ad20d7
2 parents fd74557 + 48d3f7b
commit 6ad20d7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/samples/directions-advanced/index.ts b/samples/directions-advanced/index.ts
@@ -156,6 +156,14 @@ function createRoutesTable(response: woosmap.map.DirectionResult) {
   const directionTripElements = response.routes.map(
     (route: woosmap.map.DirectionRoute, index: number) => {
       const leg = route.legs[0];
+      const distanceTotal = route.legs.reduce(
+        (total, leg) => total + leg.distance.value,
+        0,
+      );
+      const durationTotal = route.legs.reduce(
+        (total, leg) => total + leg.duration.value,
+        0,
+      );
       const directionTrip = document.createElement("div");
       directionTrip.className = "directionTrip";
       if (index === 0) {
@@ -169,11 +177,11 @@ function createRoutesTable(response: woosmap.map.DirectionResult) {
             <img class="directionTrip__travelModeIcon" src="${travelModeIconSrc}">
             <div class="directionTrip__description">
                 <div class="directionTrip__numbers">
-                    <div class="directionTrip__duration">${leg.duration.text}</div>
-                    <div class="directionTrip__distance">${leg.distance.text}</div>
+                    <div class="directionTrip__duration">${formatTime(durationTotal)}</div>
+                    <div class="directionTrip__distance">${formatDistance(distanceTotal)}</div>
                 </div>
                 <div class="directionTrip__title">through ${leg.start_address ? leg.start_address : JSON.stringify(leg.start_location)}</div>
-                <div class="directionTrip__summary">${leg.duration.text} ${(directionsRequest.departure_time || directionsRequest.arrival_time) ? "with" : "without"} traffic</div>
+                <div class="directionTrip__summary">${formatTime(durationTotal)} ${directionsRequest.departure_time || directionsRequest.arrival_time ? "with" : "without"} traffic</div>
                 <div class="directionTrip__detailsMsg"></div>
             </div>
         `;
@@ -187,6 +195,24 @@ function createRoutesTable(response: woosmap.map.DirectionResult) {
     },
   );
 
+  function formatDistance(meters: number): string {
+    if (meters < 1000) {
+      return `${meters} m`;
+    } else {
+      return `${(meters / 1000).toFixed(2)} km`;
+    }
+  }
+
+  function formatTime(seconds: number): string {
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60) {
+      return `${minutes}m`;
+    } else {
+      const hours = Math.floor(minutes / 60);
+      const remainingMinutes = minutes % 60;
+      return `${hours}h${remainingMinutes}m`;
+    }
+  }
   function selectCorrectRoute(index: number) {
     document
       .querySelectorAll(".directionTrip__selected")

diff --git a/samples/transit-advanced/index.ts b/samples/transit-advanced/index.ts
@@ -89,7 +89,10 @@ function setLatLngToContainer(
 function createRoutesTable(response: woosmap.map.transit.TransitRouteResponse) {
   const directionTripElements = response.routes.map(
     (route: woosmap.map.transit.TransitRoute, index: number) => {
-      const leg = route.legs[0];
+      const distanceTotal = route.legs.reduce(
+        (total, leg) => total + leg.distance,
+        0,
+      );
       const directionTrip = document.createElement("div");
       directionTrip.className = "directionTrip";
       if (index === 0) {
@@ -111,11 +114,11 @@ function createRoutesTable(response: woosmap.map.transit.TransitRouteResponse) {
             <img class="directionTrip__travelModeIcon" src="${travelModeIconSrc}">
             <div class="directionTrip__description">
                 <div class="directionTrip__numbers">
-                    <div class="directionTrip__duration">${formatTime(leg.duration)}</div>
-                    <div class="directionTrip__distance">${formatDistance(leg.distance)}</div>
+                    <div class="directionTrip__duration">${formatTime(route.duration)}</div>
+                    <div class="directionTrip__distance">${formatDistance(distanceTotal)}</div>
                 </div>
                 <div class="directionTrip__title">through ${startName}</div>
-                <div class="directionTrip__summary">${formatTime(leg.duration)}</div>
+                <div class="directionTrip__summary">${formatTime(route.duration)}</div>
                 <div class="directionTrip__detailsMsg"></div>
             </div>
         `;
@@ -138,7 +141,7 @@ function createRoutesTable(response: woosmap.map.transit.TransitRouteResponse) {
   }
 
   function formatTime(seconds: number): string {
-    const minutes = Math.round(seconds/60);
+    const minutes = Math.round(seconds / 60);
     if (minutes < 60) {
       return `${minutes}m`;
     } else {