distance calculation

index.js

@@ -252,9 +252,35 @@ function calculateBearing(lon1, lat1, lon2, lat2) {
     let bearing = Math.atan2(y, x) * (180 / Math.PI);
     bearing = (bearing + 360) % 360; // Ensuring the bearing is positive
     return bearing;
+} function calculateDistance(lat1, lon1, lat2, lon2) {
+    const R = 6371; // Earth's radius in meters
+    const φ1 = lat1 * Math.PI / 180;
+    const φ2 = lat2 * Math.PI / 180;
+    const Δφ = (lat2 - lat1) * Math.PI / 180;
+    const Δλ = (lon2 - lon1) * Math.PI / 180;
+
+    const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+        Math.cos(φ1) * Math.cos(φ2) *
+        Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+    const distance = R * c;
+    return distance;
 }
 
-const ex = { map, clear, route, select, selectBigger, calculateBearing, fitBounds, maplibregl, geolocate };
+function calculateTotalDistance(coordinates, index = 0) {
+    let totalDistance = 0;
+    for (let i = index; i < coordinates.length - 1; i++) {
+        totalDistance += calculateDistance(
+            coordinates[i][1], coordinates[i][0],
+            coordinates[i + 1][1], coordinates[i + 1][0]
+        );
+    }
+    return totalDistance;
+}
+
+
+const ex = { map, clear, route, select, selectBigger, calculateBearing, fitBounds, maplibregl, geolocate, calculateTotalDistance };
 Object.assign(window, ex);
 
 export default ex;

templates/follow_panel.html

@@ -1,16 +1,42 @@
 <div class="absolute w-full max-h-[50%] overflow-auto md:w-[500px] bg-white z-20 bottom-0 rounded-lg">
-    <div id="follow" class="flex">
-        <div>
-            Suivre le trajet
+    <div id="follow" style="display: flex; flex-direction: column; justify-content: center;">
+        <div style="display: flex;justify-content: center;">
+            <div>
+                disance à faire :
+            </div>
+            <div id="total_distance" style="margin-left: 2em; font-weight: bold;">
+
+            </div>
         </div>
         <div>
             {{ error }}
         </div>
-        <md-filled-button hx-on:click="clear()" hx-target="#info">annuler</md-filled-button>
+        <div style="display: flex;justify-content: center;">
+            <md-filled-button hx-on:click="clear()" hx-target="#info">annuler</md-filled-button>
+        </div>
     </div>
 
 </div>
 <script type="module">
+    function findClosestCoordinate(longitude, latitude, coordinates) {
+        let closestCoordinate = 0;
+        let closestDistance = Infinity;
+        for (let i = 0; i < coordinates.length; i++) {
+            let distance = Math.sqrt(
+                Math.pow(longitude - coordinates[i][0], 2) +
+                Math.pow(latitude - coordinates[i][1], 2));
+            if (distance < closestDistance) {
+                closestCoordinate = i;
+                closestDistance = distance;
+            }
+        }
+        return closestCoordinate;
+    }
+
+
+    let totalDistance = window.calculateTotalDistance(window.coordinates, 0);
+    document.getElementById('total_distance').innerText = `${totalDistance.toFixed(2)} kms`;
+
     map.easeTo({
         pitch: 60,
         duration: 800,
@@ -26,6 +52,15 @@
             return;
         }
         navigator.geolocation.getCurrentPosition((position) => {
+            let closestCoordinate = findClosestCoordinate(
+                position.coords.longitude,
+                position.coords.latitude,
+                window.coordinates);
+            let totalDistance = window.calculateTotalDistance(window.coordinates, closestCoordinate);
+            document.getElementById('total_distance').innerText = `${totalDistance.toFixed(2)} kms`;
+
+
+            // bearing between current position and last coordinate
             let { latitude, longitude } = position.coords;
             var bearing = calculateBearing(
                 longitude,