[mitoperni]

Summary

• Integrate Mapbox GL JS for interactive map visualization
• Implement marker clustering for better performance with many networks
• Add pin markers with hover tooltips for individual networks
• Create shared context for filtered networks between sidebar and map

Changes

New Components

• map-container.tsx - Dynamic import wrapper for Mapbox (SSR-safe)
• mapbox-map.tsx - Main map component with Mapbox GL
• cluster-markers.tsx - GeoJSON clustering with Mapbox Layers
• network-pin.tsx - Pin marker with tooltip for individual networks
• map-error.tsx - Error display component for map failures
• map-placeholder.tsx - Loading placeholder during map initialization

New Hooks and Context

• use-fit-bounds.ts - Auto-fit map bounds to visible networks
• filtered-networks-context.tsx - Share filtered networks between components

Configuration

• constants.ts - Added MAPBOX_CONFIG and CLUSTER_CONFIG

Tests

• Unit tests for map-error, map-markers, map-placeholder
• Unit tests for use-fit-bounds hook

Features

• Clusters show count and use grenadier color scale (lighter to darker = fewer to more)
• Click cluster to zoom and expand
• Hover individual pin to see tooltip with network name and city
• Click individual pin to navigate to /network/{id}
• Map auto-fits bounds when filtered networks change

Test plan

• Verify map loads with Mapbox token configured
• Verify error states display correctly without token
• Verify clusters appear when zoomed out
• Verify cluster click expands to show more detail
• Verify pin hover shows tooltip
• Verify pin click navigates to network detail
• Verify map bounds update when filters change