Add pilot feature animation to map

Author: sebastiankrll

apps/api/package.json

@@ -27,4 +27,4 @@
 		"helmet": "^8.1.0",
 		"xml2js": "^0.6.2"
 	}
-}
+}

apps/web/components/Map/Map.tsx

@@ -5,6 +5,7 @@ import "./Map.css";
 import { useRouter } from "next/navigation";
 import { onClick, onMoveEnd, onPointerMove, setNavigator } from "./utils/events";
 import { initMap } from "./utils/init";
+import { animatePilotFeatures } from "./utils/pilotFeatures";
 
 export default function OMap() {
 	const router = useRouter();
@@ -17,11 +18,19 @@ export default function OMap() {
 		map.on("pointermove", onPointerMove);
 		map.on("click", onClick);
 
+		let animationFrameId = 0;
+		const animate = () => {
+			animatePilotFeatures(map);
+			animationFrameId = window.requestAnimationFrame(animate);
+		};
+		animationFrameId = window.requestAnimationFrame(animate);
+
 		return () => {
 			map.un(["moveend"], onMoveEnd);
 			map.un("pointermove", onPointerMove);
 			map.un("click", onClick);
 			map.setTarget(undefined);
+			window.cancelAnimationFrame(animationFrameId);
 		};
 	}, [router]);
 

apps/web/components/Map/utils/events.tsx

@@ -287,6 +287,23 @@ async function updateOverlay(feature: Feature<Point>, overlay: Overlay): Promise
 	}
 }
 
+export function animateOverlays(): void {
+	if (clickedOverlay) {
+		if (clickedFeature) {
+			const geom = clickedFeature.getGeometry();
+			const coords = geom?.getCoordinates();
+			clickedOverlay.setPosition(coords);
+		}
+	}
+	if (hoveredOverlay) {
+		if (hoveredFeature) {
+			const geom = hoveredFeature.getGeometry();
+			const coords = geom?.getCoordinates();
+			hoveredOverlay.setPosition(coords);
+		}
+	}
+}
+
 function toggleControllerSectorHover(feature: Feature<Point> | undefined | null, hovered: boolean, event: "hovered" | "clicked"): void {
 	if (feature?.get("type") === "tracon") {
 		const id = feature.getId()?.toString();

apps/web/components/Map/utils/pilotFeatures.ts

@@ -1,14 +1,14 @@
 import type { PilotDelta, WsAll } from "@sr24/types/vatsim";
-import { Feature } from "ol";
+import { Feature, type Map as OlMap } from "ol";
 import type { Extent } from "ol/extent";
 import { Point } from "ol/geom";
 import { fromLonLat, transformExtent } from "ol/proj";
 import RBush from "rbush";
 import type { PilotProperties } from "@/types/ol";
 import { pilotMainSource } from "./dataLayers";
-import { resetMap } from "./events";
+import { animateOverlays, resetMap } from "./events";
 import { getMapView } from "./init";
-import { initTrackFeatures } from "./trackFeatures";
+import { animateTrackFeatures, initTrackFeatures } from "./trackFeatures";
 
 interface RBushPilotFeature {
 	minX: number;
@@ -169,11 +169,59 @@ export function moveToPilotFeature(id: string): Feature<Point> | null {
 	view?.animate({
 		center: coords,
 		duration: 200,
-		zoom: 8,
+		zoom: 10,
 	});
 
 	initTrackFeatures(`pilot_${id}`);
 	addHighlightedPilot(id);
 
 	return feature;
 }
+
+let timestamp = Date.now();
+let animating = false;
+
+export function animatePilotFeatures(map: OlMap) {
+	if (animating) return;
+	animating = true;
+
+	const resolution = map.getView().getResolution() || 0;
+	let interval = 1000;
+	if (resolution > 1) {
+		interval = Math.max(resolution * 10, 50);
+	}
+
+	const now = Date.now();
+	const elapsed = now - timestamp;
+
+	if (elapsed > interval) {
+		const features = pilotMainSource.getFeatures() as Feature<Point>[];
+
+		features.forEach((feature) => {
+			const groundspeed = (feature.get("groundspeed") as number) || 0;
+			const heading = (feature.get("heading") as number) || 0;
+			const latitude = (feature.get("latitude") as number) || 0;
+			const longitude = (feature.get("longitude") as number) || 0;
+
+			const distKm = (groundspeed * 0.514444 * elapsed) / 1000 / 1000;
+			const headingRad = (heading * Math.PI) / 180;
+			const dx = distKm * Math.sin(headingRad);
+			const dy = distKm * Math.cos(headingRad);
+
+			const newLat = latitude + (dy / 6378) * (180 / Math.PI);
+			const newLon = longitude + ((dx / 6378) * (180 / Math.PI)) / Math.cos((latitude * Math.PI) / 180);
+
+			feature.getGeometry()?.setCoordinates(fromLonLat([newLon, newLat]));
+
+			feature.set("latitude", newLat, true);
+			feature.set("longitude", newLon, true);
+		});
+		map.render();
+		animateOverlays();
+		animateTrackFeatures();
+
+		timestamp = now;
+	}
+
+	animating = false;
+}

apps/web/components/Map/utils/trackFeatures.ts

@@ -1,35 +1,31 @@
 import type { PilotDelta } from "@sr24/types/vatsim";
 import { Feature } from "ol";
-import { LineString } from "ol/geom";
+import type { Coordinate } from "ol/coordinate";
+import { LineString, type Point } from "ol/geom";
 import { fromLonLat } from "ol/proj";
 import Stroke from "ol/style/Stroke";
 import Style from "ol/style/Style";
 import { fetchTrackPoints } from "@/storage/cache";
-import { trackSource } from "./dataLayers";
-
-interface Cached {
-	id: string | null;
-	coords: [number, number];
-	index: number;
-	stroke?: Stroke;
-	timestamp?: number;
-}
+import { pilotMainSource, trackSource } from "./dataLayers";
 
 const STALE_MS = 60 * 1000;
-const cached: Cached = {
-	id: null,
-	coords: [0, 0],
-	index: -1,
-};
+
+let pilotId: string | null = null;
+let lastIndex = 0;
+let lastCoords: Coordinate = [0, 0];
+let lastStroke: Stroke | undefined;
+let lastTimestamp = 0;
+let animatedTrackFeature: Feature<LineString> | null = null;
+let pilotFeature: Feature<Point> | null = null;
 
 export async function initTrackFeatures(id: string | null): Promise<void> {
 	if (!id) return;
 	const trackPoints = await fetchTrackPoints(id.replace("pilot_", ""));
 	const trackFeatures: Feature<LineString>[] = [];
 
-	for (cached.index = 0; cached.index < trackPoints.length - 1; cached.index++) {
-		const start = trackPoints[cached.index];
-		const end = trackPoints[cached.index + 1];
+	for (lastIndex = 0; lastIndex < trackPoints.length - 1; lastIndex++) {
+		const start = trackPoints[lastIndex];
+		const end = trackPoints[lastIndex + 1];
 
 		const trackFeature = new Feature({
 			geometry: new LineString(
@@ -44,48 +40,63 @@ export async function initTrackFeatures(id: string | null): Promise<void> {
 		const style = new Style({ stroke: stroke });
 
 		trackFeature.setStyle(style);
-		trackFeature.setId(`track_${id}_${cached.index}`);
+		trackFeature.setId(`track_${id}_${lastIndex}`);
 		trackFeatures.push(trackFeature);
 
-		if (cached.index === trackPoints.length - 2) {
-			cached.coords = [end.longitude, end.latitude];
-			cached.stroke = stroke;
+		if (lastIndex === trackPoints.length - 2) {
+			lastCoords = fromLonLat([end.longitude, end.latitude]);
+			lastStroke = stroke;
+			animatedTrackFeature = trackFeature;
 		}
 	}
 
 	trackSource.clear();
 	trackSource.addFeatures(trackFeatures);
-	cached.id = id;
-	cached.timestamp = Date.now();
+
+	pilotId = id;
+	pilotFeature = pilotMainSource.getFeatureById(id) as Feature<Point>;
+	lastTimestamp = Date.now();
 }
 
 export async function updateTrackFeatures(delta: PilotDelta): Promise<void> {
 	if (trackSource.getFeatures().length === 0) return;
 
-	const pilot = delta.updated.find((p) => `pilot_${p.id}` === cached.id);
-	if (!cached.id || !pilot) return;
+	const pilot = delta.updated.find((p) => `pilot_${p.id}` === pilotId);
+	if (!pilotId || !pilot) return;
 	if (pilot.latitude === undefined || pilot.longitude === undefined) return;
 
-	if (Date.now() - (cached.timestamp || 0) > STALE_MS) {
-		await initTrackFeatures(cached.id);
+	if (Date.now() - (lastTimestamp || 0) > STALE_MS) {
+		await initTrackFeatures(pilotId);
 		return;
 	}
 
+	if (animatedTrackFeature) {
+		const geom = animatedTrackFeature.getGeometry() as LineString;
+		const coords = geom.getCoordinates();
+		coords[1] = lastCoords;
+		geom.setCoordinates(coords);
+		animatedTrackFeature.setGeometry(geom);
+	}
+
 	const trackFeature = new Feature({
-		geometry: new LineString([cached.coords, [pilot.longitude, pilot.latitude]].map((coord) => fromLonLat(coord))),
+		geometry: new LineString([lastCoords, fromLonLat([pilot.longitude, pilot.latitude])]),
 		type: "track",
 	});
 
 	const stroke =
-		pilot.altitude_agl !== undefined && pilot.altitude_ms !== undefined ? getTrackSegmentColor(pilot.altitude_agl, pilot.altitude_ms) : cached.stroke;
+		pilot.altitude_agl !== undefined && pilot.altitude_ms !== undefined ? getTrackSegmentColor(pilot.altitude_agl, pilot.altitude_ms) : lastStroke;
 	const style = new Style({ stroke: stroke });
 
 	trackFeature.setStyle(style);
-	trackFeature.setId(`track_${pilot.id}_${++cached.index}`);
+	trackFeature.setId(`track_${pilot.id}_${++lastIndex}`);
 
 	trackSource.addFeature(trackFeature);
 
-	cached.coords = [pilot.longitude, pilot.latitude];
+	lastCoords = fromLonLat([pilot.longitude, pilot.latitude]);
+	lastStroke = stroke;
+	pilotFeature = pilotMainSource.getFeatureById(`pilot_${pilot.id}`) as Feature<Point>;
+	lastTimestamp = Date.now();
+	animatedTrackFeature = trackFeature;
 }
 
 function getTrackSegmentColor(altitude_agl: number, altitude_ms: number): Stroke {
@@ -129,3 +140,16 @@ function getTrackSegmentColor(altitude_agl: number, altitude_ms: number): Stroke
 		width: 3,
 	});
 }
+
+export function animateTrackFeatures(): void {
+	if (!animatedTrackFeature || !pilotFeature || trackSource.getFeatures().length === 0) return;
+
+	const pilotCoords = pilotFeature.getGeometry()?.getCoordinates();
+	if (!pilotCoords) return;
+
+	const geom = animatedTrackFeature.getGeometry() as LineString;
+	const coords = geom.getCoordinates();
+	coords[1] = pilotCoords;
+	geom.setCoordinates(coords);
+	animatedTrackFeature.setGeometry(geom);
+}