[Frontend] Implement Map Vendor Pin Clustering

[jpdevhub]

Description

We recently integrated real-world OSM data into our MapPage.tsx. If a user zooms out in a dense area, thousands of pins might render at once, causing severe DOM lag.

Tasks

1. Use react-leaflet-cluster or a similar Supercluster library to group nearby markers into a single cluster bubble.
2. Ensure the clusters expand smoothly when clicked or zoomed in.

[jazzz2502]

Hi @jpdevhub,

I'd like to work on this issue under SSOC'26.

My approach would be to integrate react-leaflet-cluster (or a similar clustering library) into MapPage.tsx, group nearby markers into clusters, and ensure smooth expansion when zooming or clicking.

Please assign this issue to me.

Thanks!

[jpdevhub]

go ahead.