Update js files to support miles

app/javascript/controllers/maps_controller.js

@@ -25,6 +25,7 @@ export default class extends Controller {
     this.userSettings = JSON.parse(this.element.dataset.user_settings);
     this.clearFogRadius = parseInt(this.userSettings.fog_of_war_meters) || 50;
     this.routeOpacity = parseFloat(this.userSettings.route_opacity) || 0.6;
+    this.distanceUnit = this.userSettings.distance_unit || "km";
 
     this.center = this.markers[this.markers.length - 1] || [52.514568, 13.350111];
 
@@ -134,6 +135,13 @@ export default class extends Controller {
 
   createPopupContent(marker) {
     const timezone = this.element.dataset.timezone;
+    if (this.distanceUnit === "mi") {
+      // convert marker[5] from km/h to mph
+      marker[5] = marker[5] * 0.621371;
+      // convert marker[3] from meters to feet
+      marker[3] = marker[3] * 3.28084;
+    }
+
     return `
       <b>Timestamp:</b> ${formatDate(marker[4], timezone)}<br>
       <b>Latitude:</b> ${marker[0]}<br>
@@ -268,7 +276,7 @@ export default class extends Controller {
       <b>Start:</b> ${firstTimestamp}<br>
       <b>End:</b> ${lastTimestamp}<br>
       <b>Duration:</b> ${timeOnRoute}<br>
-      <b>Total Distance:</b> ${formatDistance(totalDistance)}<br>
+      <b>Total Distance:</b> ${formatDistance(totalDistance, this.distanceUnit)}<br>
     `;
 
     if (isDebugMode) {

app/javascript/maps/helpers.js

@@ -1,9 +1,28 @@
 // javascript/maps/helpers.js
-export function formatDistance(distance) {
+export function formatDistance(distance, unit = 'km') {
-  if (distance < 1000) {
+  if (unit === 'mi') {
-    return `${distance.toFixed(2)} meters`;
+    distance *= 0.621371; // Convert to miles
+    var smallUnit = 'ft';
+    var bigUnit = 'mi';
+
+    // If the distance is less than 1 mi, return it in feet
+    // else return it in miles
+    if (distance < 621) {
+      distance *= 5280;
+
+      return `${distance.toFixed(2)} ${smallUnit}`;
+    }
   } else {
-    return `${(distance / 1000).toFixed(2)} km`;
+    var smallUnit = 'm';
+    var bigUnit = 'km';
+  }
+
+  // If the distance is less than 1 km/mi, return it in meters/feet
+
+  if (distance < 1000) {
+    return `${distance.toFixed(2)} ${smallUnit}`;
+  } else {
+    return `${(distance / 1000).toFixed(2)} ${bigUnit}`;
   }
 }
 
@@ -37,9 +56,10 @@ export function formatDate(timestamp, timezone) {
   return date.toLocaleString("en-GB", { timeZone: timezone });
 }
 
-export function haversineDistance(lat1, lon1, lat2, lon2) {
+export function haversineDistance(lat1, lon1, lat2, lon2, unit = 'km') {
   const toRad = (x) => (x * Math.PI) / 180;
-  const R = 6371; // Radius of the Earth in kilometers
+  const R_km = 6371; // Radius of the Earth in kilometers
+  const R_miles = 3959; // Radius of the Earth in miles
   const dLat = toRad(lat2 - lat1);
   const dLon = toRad(lon2 - lon1);
   const a =
@@ -47,5 +67,10 @@ export function haversineDistance(lat1, lon1, lat2, lon2) {
     Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
     Math.sin(dLon / 2) * Math.sin(dLon / 2);
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-  return R * c * 1000; // Distance in meters
+
+  if (unit === 'miles') {
+    return R_miles * c; // Distance in miles
+  } else {
+    return R_km * c; // Distance in kilometers
+  }
 }

docker-compose.yml

@@ -49,6 +49,7 @@ services:
       APPLICATION_HOSTS: localhost
       TIME_ZONE: Europe/London
       APPLICATION_PROTOCOL: http
+      DISTANCE_UNIT: km
     logging:
       driver: "json-file"
       options:
@@ -81,6 +82,7 @@ services:
       APPLICATION_HOSTS: localhost
       BACKGROUND_PROCESSING_CONCURRENCY: 10
       APPLICATION_PROTOCOL: http
+      DISTANCE_UNIT: km
     logging:
       driver: "json-file"
       options: