"use client"; import { useState, useEffect, useMemo } from 'react'; import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'; import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; // Fix for default markers in Next.js const DefaultIcon = L.icon({ iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png', shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41] }); L.Marker.prototype.options.icon = DefaultIcon; // Custom Icons const createCustomIcon = (color: string, number?: string) => { return L.divIcon({ className: 'custom-icon', html: `
${number || ''}
`, iconSize: [36, 36], iconAnchor: [18, 18], }); }; const homeIcon = L.divIcon({ className: 'home-icon', html: `
`, iconSize: [48, 48], iconAnchor: [24, 24], }); // Mock Data type LocationData = { category: string; items: { id: number; name: string; dist: string; time: string; lat: number; lng: number; count: number; }[]; }; const PROPERTY_LOCATION: [number, number] = [12.9385, 77.7297]; // Approximate Varthur const MOCK_DATA: Record = { 'Commute': [ { id: 1, name: "Dommasandra Circle Metro Station", dist: "3.62 Km", time: "7 mins", lat: 12.9250, lng: 77.7450, count: 6 }, { id: 2, name: "Sompura Metro Station", dist: "7.05 Km", time: "15 mins", lat: 12.9100, lng: 77.7600, count: 4 }, { id: 3, name: "Sarjapur Metro Station", dist: "8.28 Km", time: "18 mins", lat: 12.8900, lng: 77.7800, count: 3 }, { id: 4, name: "Ambedkar nagar Metro Station", dist: "8.89 Km", time: "18 mins", lat: 12.9550, lng: 77.7100, count: 5 }, ], 'Education': [ { id: 5, name: "Whitefield Global School", dist: "2.5 Km", time: "6 mins", lat: 12.9550, lng: 77.7350, count: 8 }, { id: 6, name: "Greenwood High", dist: "4.1 Km", time: "10 mins", lat: 12.9150, lng: 77.7550, count: 5 }, ], 'Hospitals': [ { id: 7, name: "Manipal Hospital Varthur", dist: "1.2 Km", time: "4 mins", lat: 12.9420, lng: 77.7320, count: 2 }, ], 'Work': [ { id: 8, name: "RGA Tech Park", dist: "5.5 Km", time: "12 mins", lat: 12.9050, lng: 77.7150, count: 12 }, ], 'Entertainment': [ { id: 9, name: "Nexus Whitefield", dist: "3.2 Km", time: "9 mins", lat: 12.9600, lng: 77.7400, count: 7 }, ], }; function MapController({ center }: { center: [number, number] }) { const map = useMap(); useEffect(() => { map.setView(center, 13); }, [center, map]); return null; } function ZoomHandler({ zoomIn, zoomOut }: { zoomIn: () => void, zoomOut: () => void }) { return (
); } export default function ConnectivityMap() { const [activeTab, setActiveTab] = useState("Commute"); const [searchQuery, setSearchQuery] = useState(""); const [mapZoom, setMapZoom] = useState(13); const [mapRef, setMapRef] = useState(null); const activeData = useMemo(() => { let data = activeTab === "Search" ? Object.values(MOCK_DATA).flat() : MOCK_DATA[activeTab] || []; if (searchQuery) { data = data.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()) ); } return data; }, [activeTab, searchQuery]); const handleZoomIn = () => { if (mapRef) mapRef.zoomIn(); }; const handleZoomOut = () => { if (mapRef) mapRef.zoomOut(); }; return (
{/* Tabs */}
{["Commute", "Education", "Hospitals", "Work", "Entertainment", "Search"].map((tab) => ( ))}
{/* Map Area */}
{/* Property Marker */} {/* POI Markers */} {activeData.map((item) => ( {item.name} ))} {/* Layer Toggle Button (Bottom Left) */}
{/* Floating List Card (Right Side) */}
{/* Search Input for Search Tab */} {activeTab === "Search" && (
setSearchQuery(e.target.value)} className="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500" />
)}
{activeData.length > 0 ? ( activeData.map((item) => (

{item.name}

{item.dist} | {item.time}
)) ) : (
No results found
)}
); }