Add system tests for map interaction

app/javascript/controllers/maps_controller.js

@@ -48,7 +48,7 @@ export default class extends BaseController {
     this.fogLinethreshold = parseInt(this.userSettings.fog_of_war_threshold) || 90;
     // Store route opacity as decimal (0-1) internally
     this.routeOpacity = parseFloat(this.userSettings.route_opacity) || 0.6;
-    this.distanceUnit = this.userSettings.distance_unit || "km";
+    this.distanceUnit = this.userSettings.maps?.distance_unit || "km";
     this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw";
     this.liveMapEnabled = this.userSettings.live_map_enabled || false;
     this.countryCodesMap = countryCodesMap();

app/javascript/maps/helpers.js

@@ -66,6 +66,15 @@ export function formatDate(timestamp, timezone) {
   return date.toLocaleString(locale, { timeZone: timezone });
 }
 
+export function formatSpeed(speedKmh, unit = 'km') {
+  if (unit === 'mi') {
+    const speedMph = speedKmh * 0.621371; // Convert km/h to mph
+    return `${Math.round(speedMph)} mph`;
+  } else {
+    return `${Math.round(speedKmh)} km/h`;
+  }
+}
+
 export function haversineDistance(lat1, lon1, lat2, lon2, unit = 'km') {
   // Haversine formula to calculate the distance between two points
   const toRad = (x) => (x * Math.PI) / 180;

app/javascript/maps/polylines.js

@@ -1,5 +1,6 @@
 import { formatDate } from "../maps/helpers";
 import { formatDistance } from "../maps/helpers";
+import { formatSpeed } from "../maps/helpers";
 import { minutesToDaysHoursMinutes } from "../maps/helpers";
 import { haversineDistance } from "../maps/helpers";
 
@@ -224,7 +225,7 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use
             <strong>End:</strong> ${lastTimestamp}<br>
             <strong>Duration:</strong> ${timeOnRoute}<br>
             <strong>Total Distance:</strong> ${formatDistance(totalDistance, distanceUnit)}<br>
-            <strong>Current Speed:</strong> ${Math.round(speed)} km/h
+            <strong>Current Speed:</strong> ${formatSpeed(speed, distanceUnit)}
         `;
 
         if (hoverPopup) {
@@ -318,7 +319,7 @@ export function addHighlightOnHover(polylineGroup, map, polylineCoordinates, use
       <strong>End:</strong> ${lastTimestamp}<br>
       <strong>Duration:</strong> ${timeOnRoute}<br>
       <strong>Total Distance:</strong> ${formatDistance(totalDistance, distanceUnit)}<br>
-      <strong>Current Speed:</strong> ${Math.round(clickedLayer.options.speed || 0)} km/h
+      <strong>Current Speed:</strong> ${formatSpeed(clickedLayer.options.speed || 0, distanceUnit)}
     `;
 
     if (hoverPopup) {
@@ -426,7 +427,8 @@ export function createPolylinesLayer(markers, map, timezone, routeOpacity, userS
             speed: speed,
             interactive: true,
             pane: 'polylinesPane',
-            bubblingMouseEvents: false
+            bubblingMouseEvents: false,
+            smoothFactor: 0.1
           }
         );
 

app/javascript/maps/popups.js

@@ -1,22 +1,32 @@
 import { formatDate } from "./helpers";
 
 export function createPopupContent(marker, timezone, distanceUnit) {
+  let speed = marker[5];
+  let altitude = marker[3];
+  let speedUnit = 'km/h';
+  let altitudeUnit = 'm';
+
+  // convert marker[5] from m/s to km/h first
+  speed = speed * 3.6;
+
   if (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;
+    // convert speed from km/h to mph
+    speed = speed * 0.621371;
+    speedUnit = 'mph';
+    // convert altitude from meters to feet
+    altitude = altitude * 3.28084;
+    altitudeUnit = 'ft';
   }
 
-  // convert marker[5] from m/s to km/h and round to nearest integer
-  marker[5] = Math.round(marker[5] * 3.6);
+  speed = Math.round(speed);
+  altitude = Math.round(altitude);
 
   return `
     <strong>Timestamp:</strong> ${formatDate(marker[4], timezone)}<br>
     <strong>Latitude:</strong> ${marker[0]}<br>
     <strong>Longitude:</strong> ${marker[1]}<br>
-    <strong>Altitude:</strong> ${marker[3]}m<br>
-    <strong>Speed:</strong> ${marker[5]}km/h<br>
+    <strong>Altitude:</strong> ${altitude}${altitudeUnit}<br>
+    <strong>Speed:</strong> ${speed}${speedUnit}<br>
     <strong>Battery:</strong> ${marker[2]}%<br>
     <strong>Id:</strong> ${marker[6]}<br>
     <a href="#" data-id="${marker[6]}" class="delete-point">[Delete]</a>