The changes involve restructuring the code to use an object for markers and adding new functionalities.

refactor: replace markers array with currentJourney object

Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>

map.html

@@ -104,6 +104,10 @@
             attribution: '© OpenStreetMap contributors'
         }).addTo(map);
 
+        let currentJourney = {
+            markers: []
+        };
+
         updateMarkersList(); // Call the new function to update the list
 
         // Add controls
@@ -137,17 +141,19 @@
         controls.appendChild(locateBtn);
 
         // Marker functionality
-        let markers = [];
+        let currentJourney = {
+            markers: []
+        };
         
         document.getElementById('add-marker').addEventListener('click', () => {
             map.on('click', function(e) {
                 const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
-                
+        
                 marker.bindPopup('<input type="text" placeholder="Enter title">');
-                
+        
-                markers.push(marker);
+                currentJourney.markers.push(marker);
-                
+        
-                updateMarkerList();
+                updateMarkersList(); // Call the new function to update the list
             });
         });
 
@@ -161,14 +167,32 @@
             updateMarkerList();
         });
 
-        function updateMarkerList() {
+        function updateMarkersList() {
-            const list = document.getElementById('marker-list');
+            const markersContainer = document.getElementById('markers-container');
-            list.innerHTML = '';
+            markersContainer.innerHTML = '';
-            
+    
-            markers.forEach((marker, index) => {
+            if (currentJourney.markers.length === 0) {
-                const li = document.createElement('div');
+                markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
-                li.textContent = `Marker ${index + 1}: ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}`;
+                return;
-                list.appendChild(li);
+            }
+
+            currentJourney.markers.forEach((marker, index) => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'marker-item';
+                markerElement.innerHTML = `
+                    <strong>${index + 1}</strong>
+                    ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}
+                `;
+        
+                // Add click handler to zoom to marker
+                markerElement.addEventListener('click', () => {
+                    map.flyTo({
+                        center: [marker.getLatLng().lat, marker.getLatLng().lng],
+                        zoom: 10
+                    });
+                });
+        
+                markersContainer.appendChild(markerElement);
             });
         }