Calm overview map markers

[nedcut]

What changed

• increases photo clustering at whole-trip zooms
• gives overview markers a calmer visual treatment while preserving 44px touch targets
• exposes selected-day state with aria-pressed
• adds pure presentation tests and URL round-trip end-to-end coverage

Why

The complete trip contains hundreds of media items. At overview zooms, large thumbnail cards competed with the route and geography. This keeps the archive visible while making the map easier to read.

Validation

• npm run lint (0 errors; one pre-existing hook dependency warning)
• npm run typecheck
• npm test (216 tests)
• npm run test:e2e (7 tests)
• git diff --check

Manual smoke test

Open the real Mapbox-backed trip at whole-trip zoom, then zoom past level 12. Confirm overview markers are quieter, detail markers expand, clusters still open, photo popups work, and owner drag behavior is unchanged.

Summary by CodeRabbit

• Accessibility

  • Added screen-reader state indicators to day selection controls, including “All days” and individual days.

• Improvements

  • Photo markers now adapt their appearance based on map zoom level.
  • Refined photo marker and cluster sizing for clearer map presentation.
  • Improved whole-trip overview styling for photo markers.
  • Preserved selected-day state when navigating and reloading the page.

• Tests

  • Added coverage for photo marker behavior across zoom levels and cluster states.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lofoten-map	Ready	Preview, Comment	Jul 11, 2026 8:24pm

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes add shared zoom-based photo marker presentation rules, apply them to map markers and CSS, and expose day selection state through aria-pressed with updated end-to-end coverage.

Changes

Photo marker presentation

Layer / File(s)	Summary
Photo presentation rules and validation lib/map-presentation.ts, lib/map-presentation.test.ts	Defines shared cluster and zoom constants plus presentation logic for cluster and overview marker classes, with tests for thresholds and invalid inputs.
Zoom-aware marker integration and styling components/TripLayers.tsx, components/map-overrides.css	Uses shared clustering values and updates marker classes from the current zoom; marker and cluster dimensions and overview styles are adjusted accordingly.

Day selection accessibility

Layer / File(s)	Summary
Pressed-state accessibility and coverage components/DaySidebar.tsx, e2e/trip.spec.ts	Adds aria-pressed to all-days and per-day buttons, and verifies selection state, URL updates, and reload restoration.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Map
  participant TripLayers
  participant PresentationRules
  participant MarkerDOM
  Map->>TripLayers: Provide current zoom
  TripLayers->>PresentationRules: Evaluate zoom and photo count
  PresentationRules-->>TripLayers: Return marker class presentation
  TripLayers->>MarkerDOM: Create or update marker classes

Loading

Possibly related PRs

• nedcut/lofoten-map#10: Adds the Mapbox photo marker system whose styling is adjusted here.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and accurately reflects the main change to calm overview map marker presentation.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/calm-map-markers

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

components/TripLayers.tsx (1)

344-347: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider simplifying the isOverview check for existing markers.

isOverview depends solely on zoom, not count — the count argument passed to photoMarkerPresentation here has no effect on the returned isOverview value. Calling the full function (which also builds a className string) to read one zoom-only boolean is slightly misleading and wasteful. Importing PHOTO_MARKER_OVERVIEW_ZOOM and comparing directly would be clearer.

♻️ Optional simplification

 } else {
   const marker = markers.get(key);
-  marker?.getElement().classList.toggle("lofoten-photo-marker-overview", photoMarkerPresentation(zoom, isCluster ? Number(feature.properties?.point_count) : 1).isOverview);
+  marker?.getElement().classList.toggle("lofoten-photo-marker-overview", Number.isFinite(zoom) && zoom < PHOTO_MARKER_OVERVIEW_ZOOM);
   if (key !== draggingKey) marker?.setLngLat(coordinates);
 }

This would require adding PHOTO_MARKER_OVERVIEW_ZOOM to the existing import on line 7.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@components/TripLayers.tsx` around lines 344 - 347, In the existing-marker
branch of TripLayers, replace the photoMarkerPresentation call used only for
isOverview with a direct zoom comparison against PHOTO_MARKER_OVERVIEW_ZOOM. Add
that constant to the existing import, and preserve the current class toggle and
marker-position behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@components/TripLayers.tsx`:
- Around line 344-347: In the existing-marker branch of TripLayers, replace the
photoMarkerPresentation call used only for isOverview with a direct zoom
comparison against PHOTO_MARKER_OVERVIEW_ZOOM. Add that constant to the existing
import, and preserve the current class toggle and marker-position behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e202b663-4e85-43e2-9a6e-8a4e6da2c72f

📥 Commits

Reviewing files that changed from the base of the PR and between bd21259 and faf3734.

📒 Files selected for processing (6)

• components/DaySidebar.tsx
• components/TripLayers.tsx
• components/map-overrides.css
• e2e/trip.spec.ts
• lib/map-presentation.test.ts
• lib/map-presentation.ts