Skip to content

🔧 Cluster map markers for dense areas #24

@fusion94

Description

@fusion94

Summary

MapView renders one MarkerF per user with no clustering (src/components/LocationMap.jsx). At 100+ members in a single metro the map becomes unreadable. Use MarkerClusterer from @react-google-maps/api (already a dependency) to group nearby pins.

Proposed Approach

  1. Wrap the otherUsers markers in <MarkerClusterer>.
  2. Keep the current user's own marker outside the cluster so it always stays visible.
  3. Style the cluster bubbles to use the brand gold (theme.palette.primary.main).
  4. Test with the existing dev data plus a synthetic 100-user dataset.

Acceptance Criteria

  • Multiple markers in the same area cluster into a single bubble showing the count.
  • Zooming in expands the cluster.
  • The current user's own marker is never clustered.
  • Cluster icon color matches the brand accent.
  • Works in both light and dark themes.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions