Skip to content

feat: integrate interactive event map with React Leaflet (Closes #1139) - #1207

Open
waterWang wants to merge 1 commit into
Agora-Events:mainfrom
waterWang:feat/1139-interactive-event-map
Open

feat: integrate interactive event map with React Leaflet (Closes #1139)#1207
waterWang wants to merge 1 commit into
Agora-Events:mainfrom
waterWang:feat/1139-interactive-event-map

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Summary

This PR integrates an interactive event map into the Map Discovery page using React Leaflet (already a project dependency). Events with WGS84 coordinates render as markers with detailed popups.

Changes

  • EventMap component (components/events/event-map.tsx): React Leaflet map with:
    • Event markers with custom map-pin icon and popups (image, title, date, location, price)
    • FitBounds — viewport auto-adjusts to all event markers
    • Loading state with spinner (role="status")
    • Error state with retry button (role="alert")
    • Empty state when no events exist
    • Optional initialEvents prop for server-side pre-fetching
  • EventMapClient: dynamic SSR-off wrapper (Next.js leaflet compatibility)
  • Discover API (app/api/events/discover/route.ts): now returns latitude/longitude for each event
  • DiscoverEvent type: adds latitude/longitude fields
  • Map Discovery page (map-discovery-page.tsx): placeholder replaced with live EventMapClient
  • Tests: 11 tests covering loading, markers, popups, error, empty, retry, and pre-fetched states

Acceptance Criteria

  • Interactive map renders successfully (React Leaflet)
  • Event markers load from the backend (discover API returns lat/lon)
  • Loading and error states are handled correctly (spinner + retry)
  • Map performs well on supported devices (responsive height, scrollWheelZoom, zoom controls)

Dependencies

…a-Events#1139)

- Adds EventMap component with React Leaflet MapContainer, markers, popups
- Adds EventMapClient (dynamic SSR-off wrapper for Next.js)
- Updates discover API route to return lat/lon for events
- Updates DiscoverEvent type with latitude/longitude fields
- Integrates EventMap into Map Discovery page (replaces placeholder)
- Loading/error/empty states with retry mechanism
- fitBounds to auto-adjust map viewport to event markers
- Vitest config fix: NODE_ENV=test to avoid React.act production build issue
- 11 tests covering all states
@vercel

vercel Bot commented Aug 24, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the oseh-svg's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

## FRONTEND: Integrate Interactive Event Map

1 participant