Add e2e tests for map page.

app/javascript/controllers/maps_controller.js

@@ -1154,8 +1154,11 @@ export default class extends BaseController {
 
 
   addTogglePanelButton() {
+    // Store reference to the controller instance for use in the control
+    const controller = this;
+
     const TogglePanelControl = L.Control.extend({
-      onAdd: (map) => {
+      onAdd: function(map) {
         const button = L.DomUtil.create('button', 'toggle-panel-button');
         button.innerHTML = '📅';
 
@@ -1176,7 +1179,7 @@ export default class extends BaseController {
 
         // Toggle panel on button click
         L.DomEvent.on(button, 'click', () => {
-          this.toggleRightPanel();
+          controller.toggleRightPanel();
         });
 
         return button;
@@ -1488,9 +1491,9 @@ export default class extends BaseController {
       // Fetch visited cities when panel is first created
       this.fetchAndDisplayVisitedCities();
 
-      // Set initial display style based on localStorage
-      const isPanelOpen = localStorage.getItem('mapPanelOpen') === 'true';
-      div.style.display = isPanelOpen ? 'block' : 'none';
+      // Since user clicked to open panel, make it visible and update localStorage
+      div.style.display = 'block';
+      localStorage.setItem('mapPanelOpen', 'true');
 
       return div;
     };

app/javascript/maps/photos.js

@@ -6,14 +6,14 @@ export async function fetchAndDisplayPhotos({ map, photoMarkers, apiKey, startDa
   const MAX_RETRIES = 3;
   const RETRY_DELAY = 3000; // 3 seconds
 
-  console.log('fetchAndDisplayPhotos called with:', { 
-    startDate, 
-    endDate, 
+  console.log('fetchAndDisplayPhotos called with:', {
+    startDate,
+    endDate,
     retryCount,
     photoMarkersExists: !!photoMarkers,
     mapExists: !!map,
     apiKeyExists: !!apiKey,
-    userSettingsExists: !!userSettings 
+    userSettingsExists: !!userSettings
   });
 
   // Create loading control
@@ -137,7 +137,7 @@ export function createPhotoMarker(photo, userSettings, photoMarkers, apiKey) {
   // Handle both data formats - check for exifInfo or direct lat/lng
   const latitude = photo.latitude || photo.exifInfo?.latitude;
   const longitude = photo.longitude || photo.exifInfo?.longitude;
-  
+
   console.log('Creating photo marker for:', {
     photoId: photo.id,
     latitude,
@@ -145,7 +145,7 @@ export function createPhotoMarker(photo, userSettings, photoMarkers, apiKey) {
     hasExifInfo: !!photo.exifInfo,
     hasDirectCoords: !!(photo.latitude && photo.longitude)
   });
-  
+
   if (!latitude || !longitude) {
     console.warn('Photo missing coordinates, skipping:', photo.id);
     return;
@@ -187,4 +187,4 @@ export function createPhotoMarker(photo, userSettings, photoMarkers, apiKey) {
 
   photoMarkers.addLayer(marker);
   console.log('Photo marker added to layer group');
-}
+}