Feat: Added near-me and clustering feature to Map view

[sanvishukla]

Pull Request description

This PR significantly enhances the Map View functionality to improve user experience and visual consistency.
Key Changes:

1. Marker Clustering: Integrated react-leaflet-cluster to group high-density event markers, preventing visual clutter in popular regions.
2. Combined Geolocation Panel: Created "Find Events Near Me" button and the Search Radius slider into a single control panel (bottom-left).
3. Theme-Aware Popups: Leaflet popups are now fully responsive to the current application theme (light/dark) using CSS variables and glassmorphism.
4. Empty State Feedback: Added an animated toast notification when no nearby events are found within the selected radius.
5. Infrastructure: Added react-leaflet-cluster and @testing-library/dom to package.json to ensure a stable environment and healthy tests.

How to test these changes

Run npm install to ensure new dependencies are present.
Run npm run dev and navigate to the Map View

Pull Request checklists

This PR is a:

• bug-fix
• new feature
• maintenance

About this PR:

• it includes tests.
• the tests are executed on CI.
• pre-commit hooks were executed locally.
• this PR requires a project documentation update.

Author's checklist:

• I have reviewed the changes and it contains no misspelling.
• The code is well commented, especially in the parts that contain more
  complexity.
• New and old tests passed locally.

Additional information

Screen.Recording.2026-03-24.at.8.07.19.PM.mov

[netlify]

✅ Deploy Preview for dueventboard ready!

Name	Link
🔨 Latest commit	8acdbad
🔍 Latest deploy log	https://app.netlify.com/projects/dueventboard/deploys/69cab0e1f4c7d9000869b89a
😎 Deploy Preview	https://deploy-preview-63--dueventboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[yuvimittal]

@sanvishukla , theme toggles were already merged, wasnt it?

[yuvimittal]

@sanvishukla , also how are we using our current location?

[sanvishukla]

@yuvimittal

@sanvishukla , also how are we using our current location?

The website fetches the location using the browser’s Geolocation API (navigator.geolocation.getCurrentPosition()). When you click “Find Events Near Me,” your browser asks for permission, and once allowed, it provides your current latitude and longitude, which are then used to filter nearby events. It has a radius filtering feature that converts the radius into coordinate degrees and then checks if an event lies within that radius or not.

@sanvishukla , theme toggles were already merged, wasnt it?

Yes, it was merged, but even in light mode, the map was in dark mode as it was the default setting. So that had to be changed to match the website theme

[yuvimittal]

@sanvishukla , won't this feature be heavy on the webiste?

[sanvishukla]

@yuvimittal, I believe this is not heavy for the website. Mark clustering will actually reduce DOM elements by grouping markers and improve rendering performance. Near Me logic runs entirely on the client and uses simple math, so it’s extremely fast. Also, geolocation runs only on user action, not automatically. So this is also not heavy.
Let me know what you think!

[yuvimittal]

@reshamas , what do you think of this feature?

[sanvishukla]

@yuvimittal @reshamas
Changed the UI a bit

Screen.Recording.2026-03-28.at.10.49.21.PM.mov