diff --git a/CHANGELOG.md b/CHANGELOG.md index e6013a65..6f4cfd8f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - `GET /api/v1/stats` endpoint now returns correct 0 instead of null if no points were tracked in the requested period. - User import data now being streamed instead of loaded into memory all at once. This should prevent large imports from exhausting memory or hitting IO limits while reading export archives. - Popup for manual visit creation now looks better in both light and dark modes. #1835 +- Fixed a bug where visit circles were not interactive on the map page. #1833 # [0.33.0] - 2025-09-29 diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 473825f6..8e623b95 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -167,25 +167,28 @@ export default class extends BaseController { // Create a proper Leaflet layer for fog this.fogOverlay = new (createFogOverlay())(); - // Create custom pane for areas + // Create custom panes with proper z-index ordering + // Leaflet default panes: tilePane=200, overlayPane=400, shadowPane=500, markerPane=600, tooltipPane=650, popupPane=700 + + // Areas pane - below visits so they don't block interaction this.map.createPane('areasPane'); - this.map.getPane('areasPane').style.zIndex = 650; - this.map.getPane('areasPane').style.pointerEvents = 'all'; + this.map.getPane('areasPane').style.zIndex = 605; // Above markerPane but below visits + this.map.getPane('areasPane').style.pointerEvents = 'none'; // Don't block clicks, let them pass through - // Create custom panes for visits - // Note: We'll still create visitsPane for backward compatibility + // Legacy visits pane for backward compatibility this.map.createPane('visitsPane'); - this.map.getPane('visitsPane').style.zIndex = 600; - this.map.getPane('visitsPane').style.pointerEvents = 'all'; - - // Create separate panes for confirmed and suggested visits - this.map.createPane('confirmedVisitsPane'); - this.map.getPane('confirmedVisitsPane').style.zIndex = 450; - this.map.getPane('confirmedVisitsPane').style.pointerEvents = 'all'; + this.map.getPane('visitsPane').style.zIndex = 615; + this.map.getPane('visitsPane').style.pointerEvents = 'auto'; + // Suggested visits pane - interactive layer this.map.createPane('suggestedVisitsPane'); - this.map.getPane('suggestedVisitsPane').style.zIndex = 460; - this.map.getPane('suggestedVisitsPane').style.pointerEvents = 'all'; + this.map.getPane('suggestedVisitsPane').style.zIndex = 610; + this.map.getPane('suggestedVisitsPane').style.pointerEvents = 'auto'; + + // Confirmed visits pane - on top of suggested, interactive + this.map.createPane('confirmedVisitsPane'); + this.map.getPane('confirmedVisitsPane').style.zIndex = 620; + this.map.getPane('confirmedVisitsPane').style.pointerEvents = 'auto'; // Initialize areasLayer as a feature group and add it to the map immediately this.areasLayer = new L.FeatureGroup(); diff --git a/app/javascript/maps/visits.js b/app/javascript/maps/visits.js index f8c6e6af..4a1bdf35 100644 --- a/app/javascript/maps/visits.js +++ b/app/javascript/maps/visits.js @@ -12,14 +12,17 @@ export class VisitsManager { this.userTheme = userTheme; // Create custom panes for different visit types - if (!map.getPane('confirmedVisitsPane')) { - map.createPane('confirmedVisitsPane'); - map.getPane('confirmedVisitsPane').style.zIndex = 450; // Above default overlay pane (400) - } - + // Leaflet default panes: tilePane=200, overlayPane=400, shadowPane=500, markerPane=600, tooltipPane=650, popupPane=700 if (!map.getPane('suggestedVisitsPane')) { map.createPane('suggestedVisitsPane'); - map.getPane('suggestedVisitsPane').style.zIndex = 460; // Below confirmed visits but above base layers + map.getPane('suggestedVisitsPane').style.zIndex = 610; // Above markerPane (600), below tooltipPane (650) + map.getPane('suggestedVisitsPane').style.pointerEvents = 'auto'; // Ensure interactions work + } + + if (!map.getPane('confirmedVisitsPane')) { + map.createPane('confirmedVisitsPane'); + map.getPane('confirmedVisitsPane').style.zIndex = 620; // Above suggested visits + map.getPane('confirmedVisitsPane').style.pointerEvents = 'auto'; // Ensure interactions work } this.visitCircles = L.layerGroup(); @@ -1324,38 +1327,31 @@ export class VisitsManager { // Create popup content with form and dropdown const defaultName = visit.name; const popupContent = ` -
-
-
- ${dateTimeDisplay.trim()} -
-
-
- Duration: ${durationText} -
-
- Status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)} -
-
- ${visit.place.latitude}, ${visit.place.longitude} -
-
+
+

${dateTimeDisplay.trim()}

+ +
+
Duration: ${durationText}
+
Status: ${visit.status.charAt(0).toUpperCase() + visit.status.slice(1)}
+
${visit.place.latitude}, ${visit.place.longitude}
+
+
- ${possiblePlaces.length > 0 ? possiblePlaces.map(place => `
-
- ${visit.status !== 'confirmed' ? ` - - - ` : ''} -
-
- + ` : '
'}
+ +
`;