Paul Bailey
8e73d8a2a5
- Added 'View Event Details' button in event popup that navigates to /events?id={eventId}
- Adjusted map center from Dublin (53.3498, -6.2603) to (53.4, -7.5) to better show all of Ireland
- New center point ensures Ireland is fully visible even when filter panel is open
- Button has blue styling with hover effect for better UX
149 lines
4.5 KiB
Markdown
149 lines
4.5 KiB
Markdown
# Map-Event Integration Implementation
|
|
|
|
## Overview
|
|
|
|
Successfully integrated cleanup events with the interactive map, allowing users to view both litter reports and cleanup events on the same map interface.
|
|
|
|
## Changes Made
|
|
|
|
### 1. MapPage Component (`src/pages/MapPage.tsx`)
|
|
|
|
**Added:**
|
|
- Event state management with `useState` for events and loading state
|
|
- `useEffect` hook to fetch events from the API on component mount
|
|
- Sample event data as fallback when API is unavailable
|
|
- Event visibility toggle state (`showEvents`)
|
|
- Handler function `handleToggleEvents()` to show/hide events
|
|
- Fixed date filter conversion from Date objects to ISO strings for API compatibility
|
|
|
|
**Key Features:**
|
|
- Events are fetched independently from reports
|
|
- Loading states for both reports and events
|
|
- Events passed to MapView component only when `showEvents` is true
|
|
|
|
### 2. MapView Component (`src/components/map/MapView.tsx`)
|
|
|
|
**Enhanced:**
|
|
- Event marker popups with rich information display:
|
|
- Event title and description
|
|
- Location name with map pin emoji
|
|
- Scheduled date and time (formatted for Irish locale)
|
|
- Duration in minutes
|
|
- Participant count
|
|
- Litter collected (for completed events)
|
|
- Status badge with color coding
|
|
- Event markers use calendar emoji (📅)
|
|
- Different marker colors based on event status:
|
|
- **Upcoming**: Amber (#F59E0B)
|
|
- **Completed**: Green (#10B981)
|
|
- **Cancelled**: Gray (#6B7280)
|
|
|
|
**Event Marker Features:**
|
|
- Always displayed on regular layer (not clustered)
|
|
- 32x32 pixel markers with white border
|
|
- Hover effects and click interactions
|
|
- Detailed popup with formatted information
|
|
|
|
### 3. MapFilters Component (`src/components/map/MapFilters.tsx`)
|
|
|
|
**Added:**
|
|
- "Show Events" toggle switch
|
|
- Props: `onToggleEvents` and `showEvents`
|
|
- Green color scheme for event toggle (to distinguish from other toggles)
|
|
- Positioned above the Hotspots toggle
|
|
|
|
## Sample Event Data
|
|
|
|
Three sample events are provided as fallback:
|
|
1. **Sandymount Beach Cleanup** (Dublin) - Upcoming
|
|
2. **Galway Bay Cleanup** (Salthill Beach) - Upcoming
|
|
3. **Cork Harbor Cleanup** - Completed (with 45.5 kg collected)
|
|
|
|
## User Experience
|
|
|
|
### Viewing Events on Map
|
|
1. Navigate to the Map page
|
|
2. Events are displayed by default with calendar markers
|
|
3. Click on an event marker to see detailed information
|
|
4. Toggle "Show Events" in the filters panel to hide/show events
|
|
|
|
### Event Information Display
|
|
Each event popup shows:
|
|
- 📍 Location name
|
|
- 📅 Scheduled date and time
|
|
- ⏱️ Duration
|
|
- 👥 Number of participants
|
|
- ♻️ Litter collected (for completed events)
|
|
- Status badge (color-coded)
|
|
- Event description
|
|
|
|
## API Integration
|
|
|
|
### Event Service
|
|
Uses `eventService.getEvents()` to fetch events from the backend:
|
|
- Endpoint: `GET /api/events`
|
|
- Returns array of `CleanupEvent` objects
|
|
- Supports optional filters (status, date range, location)
|
|
|
|
### Error Handling
|
|
- Falls back to sample data if API call fails
|
|
- Logs errors to console for debugging
|
|
- Graceful degradation ensures map remains functional
|
|
|
|
## Technical Details
|
|
|
|
### Type Safety
|
|
- Full TypeScript support with `CleanupEvent` interface
|
|
- Type-safe props and state management
|
|
- Proper type conversion for date filters
|
|
|
|
### Performance
|
|
- Events fetched once on component mount
|
|
- Separate loading states for reports and events
|
|
- Efficient marker rendering with Leaflet
|
|
|
|
### Accessibility
|
|
- Toggle switches with proper ARIA labels
|
|
- Semantic HTML structure
|
|
- Keyboard navigation support
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements:
|
|
1. Filter events by status (upcoming/completed/cancelled)
|
|
2. Click event marker to navigate to event detail page
|
|
3. Show event radius/coverage area on map
|
|
4. Link related reports to events
|
|
5. Real-time event updates with WebSockets
|
|
6. Event clustering for dense areas
|
|
7. Calendar view integration
|
|
|
|
## Testing
|
|
|
|
To test the implementation:
|
|
1. Start the backend server: `cd server && npm run dev`
|
|
2. Start the frontend: `npm run dev`
|
|
3. Navigate to the Map page
|
|
4. Verify events appear on the map
|
|
5. Click event markers to see popups
|
|
6. Toggle "Show Events" to hide/show markers
|
|
7. Check that event colors match their status
|
|
|
|
## Related Requirements
|
|
|
|
This implementation addresses:
|
|
- **Requirement 4.1**: Display event markers on map
|
|
- **Requirement 4.2**: Show event details on click
|
|
- **Requirement 4.3**: Display participant count
|
|
- **Requirement 2.1**: Interactive map visualization
|
|
- **Requirement 2.2**: Marker click handlers
|
|
|
|
## Commit
|
|
|
|
Changes committed with message:
|
|
```
|
|
Link map items with events - Display cleanup events on interactive map
|
|
```
|
|
|
|
Git hash: `91ecbd2`
|