diff --git a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx index 777977b0..f12e4e07 100644 --- a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx +++ b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx @@ -25,6 +25,7 @@ const MAX_POINT_MOVE_DURATION_MS = 120_000; const MIN_POINT_MOVE_FRAME_MS = 100; const MAX_POINT_MOVE_FRAME_MS = 220; const POINT_MOVE_EPSILON = 0.000003; +const MAP_FOLLOW_FRAME_MS = 500; const MAP_INTERACTION_PAN_DURATION_MS = 650; const clusterVisualCache = new Map(); @@ -516,6 +517,8 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect let startedAt: number | undefined; const longestMoveDuration = Math.max(...[...movingIDs].map((id) => moveDurationByID.get(id) ?? DEFAULT_POINT_MOVE_DURATION_MS)); const frameMs = pointMoveFrameMs(data.length, motions.length); + let lastFollowAt = 0; + let selectedFollowComplete = false; const paint = (elapsed: number) => { advancePointMotions(motions, elapsed); mass.setData(data); @@ -526,7 +529,12 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect if (label) label.position = motion.point.lnglat; if (selectedVinRef.current === motion.point.id) { selectionRef.current?.setPosition?.(motion.point.lnglat); - if (followSelectedRef.current) mapRef.current?.setCenter?.(motion.point.lnglat); + const motionComplete = elapsed >= motion.durationMs; + if (followSelectedRef.current && !selectedFollowComplete && (elapsed - lastFollowAt >= MAP_FOLLOW_FRAME_MS || motionComplete)) { + mapRef.current?.setCenter?.(motion.point.lnglat); + lastFollowAt = elapsed; + selectedFollowComplete = motionComplete; + } } } };