fix(bus-map): completely remove route polyline lines from map, focus strictly on clean map & live GPS bus markers

This commit is contained in:
Shanmuga Krishnan S M
2026-08-07 12:06:11 +05:30
committed by Devesh S
parent 0a94f2fc65
commit 5d02cfc7ee

View File

@@ -17,35 +17,6 @@ L.Icon.Default.mergeOptions({
shadowUrl: markerShadow, shadowUrl: markerShadow,
}); });
// Domain Boundary validation (Chennai and surrounding route regions)
const MIN_LAT = 12.65;
const MAX_LAT = 13.35;
const MIN_LNG = 79.25;
const MAX_LNG = 80.45;
const isValidCoordinate = (lat?: number, lng?: number): boolean => {
if (lat === undefined || lng === undefined) return false;
return lat >= MIN_LAT && lat <= MAX_LAT && lng >= MIN_LNG && lng <= MAX_LNG;
};
const isRealStopCoordinate = (stop: { name: string; lat?: number; lng?: number }): boolean => {
if (stop.lat === undefined || stop.lng === undefined) return false;
if (!isValidCoordinate(stop.lat, stop.lng)) return false;
const isRITCoord = Math.abs(stop.lat - 13.0118) < 0.001 && Math.abs(stop.lng - 80.0214) < 0.001;
const isRITName =
stop.name.toLowerCase().includes('rit') ||
stop.name.toLowerCase().includes('campus') ||
stop.name.toLowerCase().includes('college') ||
stop.name.toLowerCase().includes('rajalakshmi');
if (isRITCoord && !isRITName) {
return false;
}
return true;
};
const liveBusIcon = L.divIcon({ const liveBusIcon = L.divIcon({
html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/50 animate-ping"></span>🚌</div>`, html: `<div class="relative flex items-center justify-center w-10 h-10 rounded-full bg-emerald-500 border-2 border-white shadow-xl text-white text-base font-bold cursor-pointer"><span class="absolute inset-0 rounded-full bg-emerald-500/50 animate-ping"></span>🚌</div>`,
className: '', className: '',
@@ -60,14 +31,14 @@ const stoppedBusIcon = L.divIcon({
iconAnchor: [20, 20], iconAnchor: [20, 20],
}); });
// Helper component to auto-pan and fit the map bounds to the active route // Helper component to pan map to active bus marker when selected
function MapUpdater({ bounds }: { bounds: L.LatLngBoundsExpression | null }) { function MapPanFocus({ center }: { center: [number, number] | null }) {
const map = useMap(); const map = useMap();
useEffect(() => { useEffect(() => {
if (bounds && (bounds as any).length > 0) { if (center) {
map.fitBounds(bounds, { padding: [60, 60], maxZoom: 14, animate: true }); map.setView(center, 13, { animate: true });
} }
}, [bounds, map]); }, [center, map]);
return null; return null;
} }
@@ -76,7 +47,7 @@ interface BusRouteMapProps {
allRoutes: BusRoute[]; allRoutes: BusRoute[];
} }
const DEFAULT_CENTER = [13.0118, 80.0214]; // RIT Campus default const DEFAULT_CENTER: [number, number] = [13.0118, 80.0214]; // RIT Campus default
export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) { export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
const [allLiveLocations, setAllLiveLocations] = useState< const [allLiveLocations, setAllLiveLocations] = useState<
@@ -129,37 +100,26 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
return () => clearInterval(interval); return () => clearInterval(interval);
}, []); }, []);
// Collect coordinates for polyline path // Determine center focus point if a bus is live or selected
const pathCoordinates = useMemo(() => { const activeFocusCenter = useMemo<[number, number] | null>(() => {
if (!selectedRoute) return []; if (!selectedRoute) return null;
if (selectedRoute.polyline && selectedRoute.polyline.length > 0) { const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
return selectedRoute.polyline; const matchLocKey = Object.keys(allLiveLocations).find(
(k) => normalizeRouteNum(k) === normalizeRouteNum(selectedRoute.number)
);
if (matchLocKey && allLiveLocations[matchLocKey]) {
const loc = allLiveLocations[matchLocKey];
return [loc.latitude, loc.longitude];
} }
const coords: [number, number][] = []; if (selectedRoute.from_lat && selectedRoute.from_lng) {
return [selectedRoute.from_lat, selectedRoute.from_lng];
if (isValidCoordinate(selectedRoute.from_lat, selectedRoute.from_lng)) {
coords.push([selectedRoute.from_lat!, selectedRoute.from_lng!]);
} }
selectedRoute.stops.forEach((stop) => { return DEFAULT_CENTER;
if (isRealStopCoordinate(stop)) { }, [selectedRoute, allLiveLocations]);
coords.push([stop.lat!, stop.lng!]);
}
});
if (isValidCoordinate(selectedRoute.to_lat, selectedRoute.to_lng)) {
coords.push([selectedRoute.to_lat!, selectedRoute.to_lng!]);
}
return coords;
}, [selectedRoute]);
const mapBounds = useMemo(() => {
if (pathCoordinates.length === 0) return null;
return pathCoordinates as L.LatLngBoundsExpression;
}, [pathCoordinates]);
return ( return (
<div className="relative h-full w-full bg-slate-950 overflow-hidden"> <div className="relative h-full w-full bg-slate-950 overflow-hidden">
@@ -178,9 +138,7 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/> />
{/* Live GPS Bus Markers ONLY - No polyline routes */}
{/* Live GPS Bus Markers */}
{Object.entries(allLiveLocations).map(([rNum, loc]) => { {Object.entries(allLiveLocations).map(([rNum, loc]) => {
const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase(); const normalizeRouteNum = (str: string) => (str || '').replace(/^[Rr]0*/, '').trim().toUpperCase();
if (selectedRoute && normalizeRouteNum(selectedRoute.number) !== normalizeRouteNum(rNum)) return null; if (selectedRoute && normalizeRouteNum(selectedRoute.number) !== normalizeRouteNum(rNum)) return null;
@@ -216,7 +174,7 @@ export default function BusRouteMap({ selectedRoute }: BusRouteMapProps) {
); );
})} })}
<MapUpdater bounds={mapBounds} /> <MapPanFocus center={activeFocusCenter} />
</MapContainer> </MapContainer>
{/* Floating Info Card on Selected Route */} {/* Floating Info Card on Selected Route */}