Render trips using precalculated paths instead of list of coordinates

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 
 - Enabled Postgis extension for PostgreSQL.
+- Trips are now store their paths in the database independently of the points.
+- Trips are now being rendered on the map using their precalculated paths instead of list of coordinates.
 
 # 0.23.5 - 2025-01-22
 

app/controllers/trips_controller.rb

@@ -10,11 +10,6 @@ class TripsController < ApplicationController
   end
 
   def show
-    @coordinates = @trip.points.pluck(
-      :latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id,
-      :country
-    ).map { [_1.to_f, _2.to_f, _3.to_s, _4.to_s, _5.to_s, _6.to_s, _7.to_s, _8.to_s] }
-
     @photo_previews = Rails.cache.fetch("trip_photos_#{@trip.id}", expires_in: 1.day) do
       @trip.photo_previews
     end

app/javascript/controllers/trips_controller.js

@@ -27,9 +27,9 @@ export default class extends Controller {
     }
 
     console.log("Trips controller connected")
-    this.coordinates = JSON.parse(this.containerTarget.dataset.coordinates)
+
     this.apiKey = this.containerTarget.dataset.api_key
-    this.userSettings = JSON.parse(this.containerTarget.dataset.user_settings)
+    this.userSettings = JSON.parse(this.containerTarget.dataset.user_settings || '{}')
     this.timezone = this.containerTarget.dataset.timezone
     this.distanceUnit = this.containerTarget.dataset.distance_unit
 
@@ -46,16 +46,12 @@ export default class extends Controller {
   // Move map initialization to separate method
   initializeMap() {
     // Initialize layer groups
-    this.markersLayer = L.layerGroup()
     this.polylinesLayer = L.layerGroup()
     this.photoMarkers = L.layerGroup()
 
     // Set default center and zoom for world view
-    const hasValidCoordinates = this.coordinates && Array.isArray(this.coordinates) && this.coordinates.length > 0
-    const center = hasValidCoordinates
-      ? [this.coordinates[0][0], this.coordinates[0][1]]
-      : [20, 0]  // Roughly centers the world map
-    const zoom = hasValidCoordinates ? 14 : 2
+    const center = [20, 0]  // Roughly centers the world map
+    const zoom = 2
 
     // Initialize map
     this.map = L.map(this.containerTarget).setView(center, zoom)
@@ -72,7 +68,6 @@ export default class extends Controller {
     }).addTo(this.map)
 
     const overlayMaps = {
-      "Points": this.markersLayer,
       "Route": this.polylinesLayer,
       "Photos": this.photoMarkers
     }
@@ -116,6 +111,27 @@ export default class extends Controller {
       this.addPolyline()
       this.fitMapToBounds()
     }
+
+    // After map initialization, add the path if it exists
+    if (this.containerTarget.dataset.path) {
+      const pathData = this.containerTarget.dataset.path.replace(/^"|"$/g, ''); // Remove surrounding quotes
+      const coordinates = this.parseLineString(pathData);
+
+      const polyline = L.polyline(coordinates, {
+        color: 'blue',
+        opacity: 0.8,
+        weight: 3,
+        zIndexOffset: 400
+      });
+
+      polyline.addTo(this.polylinesLayer);
+      this.polylinesLayer.addTo(this.map);
+
+      // Fit the map to the polyline bounds
+      if (coordinates.length > 0) {
+        this.map.fitBounds(polyline.getBounds(), { padding: [50, 50] });
+      }
+    }
   }
 
   disconnect() {
@@ -153,9 +169,6 @@ export default class extends Controller {
 
       const popupContent = createPopupContent(coord, this.timezone, this.distanceUnit)
       marker.bindPopup(popupContent)
-
-      // Add to markers layer instead of directly to map
-      marker.addTo(this.markersLayer)
     })
   }
 
@@ -191,7 +204,6 @@ export default class extends Controller {
     ]).sort((a, b) => a[4] - b[4]);
 
     // Clear existing layers
-    this.markersLayer.clearLayers()
     this.polylinesLayer.clearLayers()
     this.photoMarkers.clearLayers()
 
@@ -202,4 +214,17 @@ export default class extends Controller {
       this.fitMapToBounds()
     }
   }
+
+  // Add this method to parse the LineString format
+  parseLineString(lineString) {
+    // Remove LINESTRING and parentheses, then split into coordinate pairs
+    const coordsString = lineString.replace('LINESTRING (', '').replace(')', '');
+    const coords = coordsString.split(', ');
+
+    // Convert each coordinate pair to [lat, lng] format
+    return coords.map(coord => {
+      const [lng, lat] = coord.split(' ').map(Number);
+      return [lat, lng]; // Swap to lat, lng for Leaflet
+    });
+  }
 }

app/views/trips/show.html.erb

@@ -24,7 +24,6 @@
           data-distance_unit="<%= DISTANCE_UNIT %>"
           data-api_key="<%= current_user.api_key %>"
           data-user_settings="<%= current_user.settings.to_json %>"
-          data-coordinates="<%= @coordinates.to_json %>"
           data-path="<%= @trip.path.to_json %>"
           data-timezone="<%= Rails.configuration.time_zone %>">
           <div data-trips-target="container" class="h-[25rem] w-full min-h-screen">