Feat/founders map city clustering

[Sarthakv007]

🗺️ Founders Map Upgrade - City Clustering & Interactive Markers

Overview

Upgraded the Founders map from individual founder markers to a city-based clustering system with interactive tooltips and popups, similar to the NS website map implementation.

✨ New Features

1. City-Level Markers

• Replaced individual founder markers with city-based markers
• Each city shows ONE marker with a count badge
• Founder count displayed prominently on each marker

2. Smart Clustering

Zoom-based clustering algorithm:

• Zoom < 5: 300km radius clustering
• Zoom 5-6: 150km radius clustering
• Zoom 6-8: 50km radius clustering
• Zoom ≥ 8: No clustering (individual cities)

Nearby cities automatically merge into clusters at lower zoom levels and expand when zoomed in.

3. Hover Tooltips

Hovering over any marker shows:
Mumbai 15 builders

Clean, informative tooltips with city name and founder count.

4. Interactive City Popup

Clicking a city marker opens a modal displaying:

• City name
• Grid of all founders in that city
• Founder profile images
• Project names
• Direct links to founder profiles
• Click any founder to select them

5. Smooth Map Animations

• map.flyTo() instead of abrupt zoom
• 1.5 second smooth animation
• Automatically zooms to level 8 when clicking a marker

6. Custom Marker Design

• Circular blue badges (Base brand colors)
• White borders with shadow
• Count number in center
• Larger markers for clusters (48px vs 40px)
• Selected state highlighting (#0052FF)
• Pulse animation for cluster markers

🏗️ Technical Implementation

New Files Created:

1. components/city-marker.tsx (85 lines)

   • Custom Leaflet DivIcon component
   • SVG-based circular markers with count badges
   • Cluster vs city styling
   • CSS animations

2. components/city-popup.tsx (87 lines)

   • Modal overlay component
   • Responsive grid layout
   • Founder cards with images
   • Profile navigation

Modified Files:

3. components/founders-pals-map.tsx (226 lines, +144/-82)

   • Complete rewrite with clustering logic
   • City grouping algorithm
   • Zoom tracking hooks
   • Smooth animation controller
   • Custom marker rendering

4. lib/india-cities.ts (98 lines, +45)

   • getDistance() - Haversine formula for coordinate distance
   • getClusterRadiusByZoom() - Dynamic cluster radius calculation

🔒 Backward Compatibility

All existing features preserved:

• ✅ Founder search functionality
• ✅ Sidebar founder cards
• ✅ Selected founder state management
• ✅ Profile navigation links
• ✅ Similar profiles algorithm
• ✅ "See all" button
• ✅ Map filtering based on search

📊 Build Status

✓ Compiled successfully in 6.7s ✓ Finished TypeScript in 10.6s ✓ Generating static pages (992/992) in 17.9s

No TypeScript errors
No breaking changes

🎯 User Experience Improvements

Before:

• Individual markers for each founder (cluttered at low zoom)
• Jittered positions for same-city founders
• Click popup showed only one founder
• No clustering
• Default blue pin icons

After:

• Clean city-based markers with counts
• Smart clustering at different zoom levels
• Click opens modal with ALL founders in that city
• Hover tooltips for quick info
• Custom branded markers with animations
• Smooth zoom transitions

🧪 Testing

Tested scenarios:

• City markers display correct founder counts
• Hover tooltips appear with city name + count
• Clicking multi-founder cities opens popup
• Clicking single-founder cities selects founder directly
• Popup displays all founders correctly
• Clustering works at different zoom levels
• Smooth flyTo animation on marker click
• All existing sidebar/search functionality intact

📸 Visual Changes

Marker Design:

• Base blue circular badges (#3B82F6)
• White 3px borders
• Drop shadow for depth
• Bold count numbers
• Pulse animation on clusters

Popup Design:

• Full-screen overlay with backdrop blur
• Clean white modal with rounded corners
• 2-column responsive grid
• Scrollable for cities with many founders
• Professional card-based layout

🚀 Performance

• Clustering algorithm: O(n²) but optimized with early exits
• Recalculation only on zoom change
• Memoized city grouping
• No performance impact on existing features
• Fast render times (<100ms for clustering)

📦 Dependencies

No new dependencies added!

• Uses existing leaflet and react-leaflet
• Custom clustering implementation
• Lightweight bundle impact

---

🎉 Result

A modern, interactive map experience that makes it easy to:

• Discover founders by location
• See founder density across India
• Navigate between cities smoothly
• Access founder profiles quickly
• Understand geographic distribution at a glance

[vercel]

@Sarthakv007 is attempting to deploy a commit to the Maaz's projects Team on Vercel.

A member of the Team first needs to authorize it.