Map View Screen
Component Detail
Description
Main interactive map screen displaying peer mentor locations as clickable markers. Renders the full-screen map canvas with overlay controls for filtering, toggling to list view, and accessing mentor details. Implements keyboard navigation and ARIA labels to ensure screen reader compatibility.
map-view-screen
Summaries
The Map View Screen gives coordinators and programme managers an instant geographic overview of where peer mentors are located, dramatically reducing the time needed to match mentors with students by proximity. By replacing a text list with a visual map interface, the platform reduces friction in the mentor discovery process, increases the likelihood of successful mentor-student pairings, and differentiates the product from competitors using list-only interfaces. Accessibility compliance via ARIA labels also broadens the user base and meets public-sector accessibility requirements.
High-complexity mobile UI component with four direct dependencies — map-marker-widget, map-filter-panel, view-toggle-button, and mentor-location-service — all of which must be ready before full integration testing can begin. Plan a dedicated accessibility testing sprint for ARIA labels and keyboard navigation compliance, as this is a public-sector product where WCAG conformance may be contractually required. Map SDK licensing and offline tile caching decisions should be made in the architecture phase to avoid late-stage platform constraints. Performance testing on devices with limited GPS or slow networks is essential before release.
Flutter mobile screen wrapping a map SDK canvas (e.g., flutter_map or Google Maps Flutter). Implements onMapReady to receive the MapController for programmatic pan/zoom. onBoundsChanged triggers re-fetching of mentor-location-service for visible-area queries, so debounce this callback to prevent excessive API calls during pan. onMarkerTapped delegates to map-marker-widget tap handling and opens a detail sheet.
onFilterChanged propagates MentorFilterCriteria to mentor-location-service and re-renders markers. Implement Semantics widgets wrapping each marker for screen reader traversal. State management should separate map UI state from filter/location data state to avoid unnecessary full rebuilds on pan.
Responsibilities
- Render interactive map with mentor location markers
- Display filter overlay and view-toggle controls
- Handle map pan, zoom, and marker tap interactions
- Ensure accessible keyboard navigation throughout
Interfaces
build(BuildContext context)
onMarkerTapped(String mentorId)
onFilterChanged(MentorFilterCriteria criteria)
onToggleListView()
onMapReady(MapController controller)
onBoundsChanged(LatLngBounds bounds)
Relationships
Dependencies (4)
Components this component depends on
Used Integrations (1)
External integrations and APIs this component relies on