'use client';
import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Polyline, Tooltip, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
interface Stop {
name: string;
lat: number;
lng: number;
}
interface BusLocation {
id: string;
busNumber: string;
lat: number;
lng: number;
speed: number;
heading: number;
isOnline: boolean;
}
interface StandardBusMapProps {
buses: BusLocation[];
stops: Stop[];
center: { lat: number; lng: number };
zoom?: number;
height?: string;
}
// Fix default Leaflet icon paths
const stopIcon = new L.Icon({
iconUrl: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(''),
iconSize: [24, 24],
iconAnchor: [12, 12],
});
const getBusIcon = (isOnline: boolean) => new L.Icon({
iconUrl: isOnline
? 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent('')
: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(''),
iconSize: [40, 40],
iconAnchor: [20, 20],
});
function MapController({ center, buses }: { center: { lat: number, lng: number }, buses: BusLocation[] }) {
const map = useMap();
useEffect(() => {
if (buses.length === 1 && buses[0].isOnline) {
map.flyTo([buses[0].lat, buses[0].lng], map.getZoom());
}
}, [buses, map]);
return null;
}
export default function StandardBusMap({ buses, stops, center, zoom = 14, height = '400px' }: StandardBusMapProps) {
// Fix Next.js hydration issues with react-leaflet
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
Loading Standard Map...
);
}
const polylinePositions = stops.map(s => [s.lat, s.lng] as [number, number]);
return (
Standard Map Mode
{/* Draw Route Polyline */}
{polylinePositions.length > 0 && (
)}
{/* Draw Stops */}
{stops.map((stop, idx) => (
{stop.name}
))}
{/* Draw Buses */}
{buses.map(bus => (
Bus {bus.busNumber} ({Math.round(bus.speed)} km/h)
))}
);
}