Use path instead of coordinates on trips#index

app/javascript/controllers/trip_map_controller.js

@@ -1,10 +1,13 @@
+// This controller is being used on:
+// - trips/index
+
 import { Controller } from "@hotwired/stimulus"
 import L from "leaflet"
 
 export default class extends Controller {
   static values = {
     tripId: Number,
-    coordinates: Array,
+    path: String,
     apiKey: String,
     userSettings: Object,
     timezone: String,
@@ -12,6 +15,8 @@ export default class extends Controller {
   }
 
   connect() {
+    console.log("TripMap controller connected")
+
     setTimeout(() => {
       this.initializeMap()
     }, 100)
@@ -23,7 +28,7 @@ export default class extends Controller {
       zoomControl: false,
       dragging: false,
       scrollWheelZoom: false,
-      attributionControl: true  // Disable default attribution control
+      attributionControl: true
     })
 
     // Add the tile layer
@@ -33,24 +38,69 @@ export default class extends Controller {
     }).addTo(this.map)
 
     // If we have coordinates, show the route
-    if (this.hasCoordinatesValue && this.coordinatesValue.length > 0) {
+    if (this.hasPathValue && this.pathValue) {
       this.showRoute()
+    } else {
+      console.log("No path value available")
     }
   }
 
   showRoute() {
-    const points = this.coordinatesValue.map(coord => [coord[0], coord[1]])
+    const points = this.parseLineString(this.pathValue)
 
-    const polyline = L.polyline(points, {
-      color: 'blue',
-      opacity: 0.8,
-      weight: 3,
-      zIndexOffset: 400
-    }).addTo(this.map)
+    // Only create polyline if we have points
+    if (points.length > 0) {
+      const polyline = L.polyline(points, {
+        color: 'blue',
+        opacity: 0.8,
+        weight: 3,
+        zIndexOffset: 400
+      })
 
-    this.map.fitBounds(polyline.getBounds(), {
-      padding: [20, 20]
-    })
+      // Add the polyline to the map
+      polyline.addTo(this.map)
+
+      // Fit the map bounds
+      this.map.fitBounds(polyline.getBounds(), {
+        padding: [20, 20]
+      })
+    } else {
+      console.error("No valid points to create polyline")
+    }
+  }
+
+  parseLineString(linestring) {
+    try {
+      // Remove 'LINESTRING (' from start and ')' from end
+      const coordsString = linestring
+        .replace(/LINESTRING\s*\(/, '')  // Remove LINESTRING and opening parenthesis
+        .replace(/\)$/, '')              // Remove closing parenthesis
+        .trim()                          // Remove any leading/trailing whitespace
+
+      // Split into coordinate pairs and parse
+      const points = coordsString.split(',').map(pair => {
+        // Clean up any extra whitespace and remove any special characters
+        const cleanPair = pair.trim().replace(/[()"\s]+/g, ' ')
+        const [lng, lat] = cleanPair.split(' ').filter(Boolean).map(Number)
+
+        // Validate the coordinates
+        if (isNaN(lat) || isNaN(lng) || !lat || !lng) {
+          console.error("Invalid coordinates:", cleanPair)
+          return null
+        }
+
+        return [lat, lng] // Leaflet uses [lat, lng] order
+      }).filter(point => point !== null) // Remove any invalid points
+
+      // Validate we have points before returning
+      if (points.length === 0) {
+        return []
+      }
+
+      return points
+    } catch (error) {
+      return []
+    }
   }
 
   disconnect() {

app/views/trips/_trip.html.erb

@@ -13,7 +13,7 @@
             class="rounded-lg z-0"
             data-controller="trip-map"
             data-trip-map-trip-id-value="<%= trip.id %>"
-            data-trip-map-coordinates-value="<%= trip.points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id, :country).to_json %>"
+            data-trip-map-path-value="<%= trip.path.to_json %>"
             data-trip-map-api-key-value="<%= current_user.api_key %>"
             data-trip-map-user-settings-value="<%= current_user.settings.to_json %>"
             data-trip-map-timezone-value="<%= Rails.configuration.time_zone %>"