Fix some nitpicks

app/javascript/controllers/maps_controller.js

@@ -81,7 +81,7 @@ export default class extends BaseController {
       this.userSettings = {};
     }
     this.clearFogRadius = parseInt(this.userSettings.fog_of_war_meters) || 50;
-    this.fogLinethreshold = parseInt(this.userSettings.fog_of_war_threshold) || 90;
+    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.maps?.distance_unit || "km";
@@ -119,9 +119,6 @@ export default class extends BaseController {
         const div = L.DomUtil.create('div', 'leaflet-control-stats');
         let distance = parseInt(this.element.dataset.distance) || 0;
         const pointsNumber = this.element.dataset.points_number || '0';
-        // Original stats data loading disabled:
-        // let distance = parseInt(this.element.dataset.distance) || 0;
-        // const pointsNumber = this.element.dataset.points_number || '0';
 
         // Convert distance to miles if user prefers miles (assuming backend sends km)
         if (this.distanceUnit === 'mi') {
@@ -330,7 +327,7 @@ export default class extends BaseController {
       distanceUnit: this.distanceUnit,
       userSettings: this.userSettings,
       clearFogRadius: this.clearFogRadius,
-      fogLinethreshold: this.fogLinethreshold,
+      fogLineThreshold: this.fogLineThreshold,
       // Pass existing data to LiveMapHandler
       existingMarkers: this.markers || [],
       existingMarkersArray: this.markersArray || [],
@@ -601,7 +598,7 @@ export default class extends BaseController {
         // Enable fog of war when layer is added
         this.fogOverlay = event.layer;
         if (this.markers && this.markers.length > 0) {
-          this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold);
+          this.updateFog(this.markers, this.clearFogRadius, this.fogLineThreshold);
         }
       }
 
@@ -718,7 +715,7 @@ export default class extends BaseController {
 
       // Update fog if enabled
       if (this.map.hasLayer(this.fogOverlay)) {
-        this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold);
+        this.updateFog(this.markers, this.clearFogRadius, this.fogLineThreshold);
       }
     })
     .catch(error => {
@@ -756,12 +753,12 @@ export default class extends BaseController {
     return null;
   }
 
-  updateFog(markers, clearFogRadius, fogLinethreshold) {
+  updateFog(markers, clearFogRadius, fogLineThreshold) {
     const fog = document.getElementById('fog');
     if (!fog) {
       initializeFogCanvas(this.map);
     }
-    requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius, fogLinethreshold));
+    requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius, fogLineThreshold));
   }
 
   initializeDrawControl() {
@@ -1388,7 +1385,7 @@ export default class extends BaseController {
 
     // Initialize fog of war if enabled in settings
     if (this.userSettings.fog_of_war_enabled) {
-      this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold);
+      this.updateFog(this.markers, this.clearFogRadius, this.fogLineThreshold);
     }
 
     // Initialize visits manager functionality

app/javascript/controllers/trips_controller.js

@@ -7,8 +7,8 @@ import BaseController from "./base_controller"
 import L from "leaflet"
 import { createAllMapLayers } from "../maps/layers"
 import { createPopupContent } from "../maps/popups"
-import { showFlashMessage } from '../maps/helpers';
+import { showFlashMessage } from "../maps/helpers"
-import { fetchAndDisplayPhotos } from '../maps/photos';
+import { fetchAndDisplayPhotos } from "../maps/photos"
 
 export default class extends BaseController {
   static targets = ["container", "startedAt", "endedAt"]

app/javascript/maps/fog_of_war.js

@@ -23,7 +23,7 @@ export function initializeFogCanvas(map) {
   return fog;
 }
 
-export function drawFogCanvas(map, markers, clearFogRadius, fogLinethreshold) {
+export function drawFogCanvas(map, markers, clearFogRadius, fogLineThreshold) {
   const fog = document.getElementById('fog');
   // Return early if fog element doesn't exist or isn't a canvas
   if (!fog || !(fog instanceof HTMLCanvasElement)) return;
@@ -55,7 +55,7 @@ export function drawFogCanvas(map, markers, clearFogRadius, fogLinethreshold) {
   // 4) Mark which pts are part of a line
   const connected = new Array(pts.length).fill(false);
   for (let i = 0; i < pts.length - 1; i++) {
-    if (pts[i + 1].time - pts[i].time <= fogLinethreshold) {
+    if (pts[i + 1].time - pts[i].time <= fogLineThreshold) {
       connected[i]     = true;
       connected[i + 1] = true;
     }
@@ -78,7 +78,7 @@ export function drawFogCanvas(map, markers, clearFogRadius, fogLinethreshold) {
   ctx.strokeStyle = 'rgba(255,255,255,1)';
 
   for (let i = 0; i < pts.length - 1; i++) {
-    if (pts[i + 1].time - pts[i].time <= fogLinethreshold) {
+    if (pts[i + 1].time - pts[i].time <= fogLineThreshold) {
       ctx.beginPath();
       ctx.moveTo(pts[i].pixel.x, pts[i].pixel.y);
       ctx.lineTo(pts[i + 1].pixel.x, pts[i + 1].pixel.y);
@@ -119,7 +119,7 @@ export function createFogOverlay() {
 
           // Draw initial fog if we have markers
           if (controller.markers && controller.markers.length > 0) {
-            drawFogCanvas(map, controller.markers, controller.clearFogRadius, controller.fogLinethreshold);
+            drawFogCanvas(map, controller.markers, controller.clearFogRadius, controller.fogLineThreshold);
           }
         }
       }
@@ -134,7 +134,7 @@ export function createFogOverlay() {
 
           // Redraw fog after resize
           if (this._controller && this._controller.markers) {
-            drawFogCanvas(map, this._controller.markers, this._controller.clearFogRadius, this._controller.fogLinethreshold);
+            drawFogCanvas(map, this._controller.markers, this._controller.clearFogRadius, this._controller.fogLineThreshold);
           }
         }
       };
@@ -155,9 +155,9 @@ export function createFogOverlay() {
     },
 
     // Method to update fog when markers change
-    updateFog: function(markers, clearFogRadius, fogLinethreshold) {
+    updateFog: function(markers, clearFogRadius, fogLineThreshold) {
       if (this._map) {
-        drawFogCanvas(this._map, markers, clearFogRadius, fogLinethreshold);
+        drawFogCanvas(this._map, markers, clearFogRadius, fogLineThreshold);
       }
     }
   });

app/javascript/maps/live_map_handler.js

@@ -33,7 +33,7 @@ export class LiveMapHandler {
     this.distanceUnit = options.distanceUnit || 'km';
     this.userSettings = options.userSettings || {};
     this.clearFogRadius = options.clearFogRadius || 100;
-    this.fogLinethreshold = options.fogLinethreshold || 10;
+    this.fogLineThreshold = options.fogLineThreshold || 10;
 
     // State tracking
     this.isEnabled = false;

app/javascript/maps/marker_factory.js

@@ -1,5 +1,16 @@
 import { createPopupContent } from "./popups";
 
+const MARKER_DATA_INDICES = {
+  LATITUDE: 0,
+  LONGITUDE: 1,
+  BATTERY: 2,
+  ALTITUDE: 3,
+  TIMESTAMP: 4,
+  VELOCITY: 5,
+  ID: 6,
+  COUNTRY: 7
+};
+
 /**
  * MarkerFactory - Centralized marker creation with consistent styling
  *
@@ -231,12 +242,12 @@ function addDragHandlers(marker, apiKey, userSettings) {
       const updatedMarkerData = [
         parseFloat(data.latitude),
         parseFloat(data.longitude),
-        originalMarkerData[2],  // battery
+        originalMarkerData[MARKER_DATA_INDICES.BATTERY],
-        originalMarkerData[3],  // altitude
+        originalMarkerData[MARKER_DATA_INDICES.ALTITUDE],
-        originalMarkerData[4],  // timestamp
+        originalMarkerData[MARKER_DATA_INDICES.TIMESTAMP],
-        originalMarkerData[5],  // velocity
+        originalMarkerData[MARKER_DATA_INDICES.VELOCITY],
-        data.id,                // id
+        data.id,
-        originalMarkerData[7]   // country
+        originalMarkerData[MARKER_DATA_INDICES.COUNTRY]
       ];
 
       // Update the marker's stored data

app/javascript/maps/markers.js

@@ -1,4 +1,5 @@
 import { createInteractiveMarker, createSimplifiedMarker } from "./marker_factory";
+import { haversineDistance } from "./helpers";
 
 export function createMarkersArray(markersData, userSettings, apiKey) {
   // Create a canvas renderer
@@ -29,11 +30,8 @@ export function createSimplifiedMarkers(markersData, renderer, userSettings) {
     const [prevLat, prevLon, , , prevTimestamp] = previousMarker;
 
     const timeDiff = currTimestamp - prevTimestamp;
-    // Note: haversineDistance function would need to be imported or implemented
+    // Use haversineDistance for accurate distance calculation
-    // For now, using simple distance calculation
+    const distance = haversineDistance(prevLat, prevLon, currLat, currLon, 'km') * 1000; // Convert to meters
-    const latDiff = currLat - prevLat;
-    const lngDiff = currLon - prevLon;
-    const distance = Math.sqrt(latDiff * latDiff + lngDiff * lngDiff) * 111000; // Rough conversion to meters
 
     // Keep the marker if it's far enough in distance or time
     if (distance >= distanceThreshold || timeDiff >= timeThreshold) {

app/javascript/maps/visits.js

@@ -491,11 +491,14 @@ export class VisitsManager {
 
     // Update the drawer content if it's being opened - but don't fetch visits automatically
     if (this.drawerOpen) {
-      console.log('Drawer opened - showing placeholder message');
-      // Just show a placeholder message in the drawer, don't fetch visits
       const container = document.getElementById('visits-list');
       if (container) {
-        container.innerHTML = '<p class="text-gray-500">Enable "Suggested Visits" or "Confirmed Visits" layers to see visits data</p>';
+        container.innerHTML = `
+          <div class="text-gray-500 text-center p-4">
+            <p class="mb-2">No visits data loaded</p>
+            <p class="text-sm">Enable "Suggested Visits" or "Confirmed Visits" layers from the map controls to view visits.</p>
+          </div>
+        `;
       }
     }
     // Note: Layer visibility is now controlled by the layer control, not the drawer state