feat: add marker list ordering in sidebar with clickable zoom

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

js/map.js

@@ -51,10 +51,41 @@ window.createMarker = function(lngLat, content = {}) {
     }
     markersContainer.appendChild(markerElement);
     
+    updateMarkersList(); // Call the new function to update the list
+    
     return marker;
 };
 
 // Update the updateJourneyPath function to handle cases where markers array is empty
+function updateMarkersList() {
+    const markersContainer = document.getElementById('markers-container');
+    markersContainer.innerHTML = '';
+    
+    if (currentJourney.markers.length === 0) {
+        markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
+        return;
+    }
+
+    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);
+    });
+}
+
 function updateJourneyPath() {
     if (!map.hasLayer(journeyPath)) {
         journeyPath = L.polyline([], {color: '#3887be', weight: 4});

map.html

@@ -104,6 +104,8 @@
             attribution: '© OpenStreetMap contributors'
         }).addTo(map);
 
+        updateMarkersList(); // Call the new function to update the list
+
         // Add controls
         const controls = document.createElement('div');
         controls.className = 'map-controls';