Add SatelliteMarkers

lib/SatelliteMarkers.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { gstime } from "satellite.js";
+import type { Satellite } from "./Satellite";
+import { SatelliteMarker } from "./SatelliteMarker";
+
+type SatelliteMarkersProps = {
+  satellites: Satellite[];
+};
+
+export function SatelliteMarkers({ satellites }: SatelliteMarkersProps) {
+  const [date, setDate] = useState<Date>(new Date(performance.timeOrigin));
+
+  const updateDate = useCallback((timestamp: DOMHighResTimeStamp) => {
+    setDate(new Date(performance.timeOrigin + timestamp));
+  }, []);
+  useAnimationFrame(updateDate);
+
+  const gmst = gstime(date);
+
+  return (
+    <>
+      {satellites.map((satellite) => (
+        <SatelliteMarker
+          key={satellite.name}
+          satellite={satellite}
+          date={date}
+          gmst={gmst}
+        />
+      ))}
+    </>
+  );
+}
+
+// https://bom-shibuya.hatenablog.com/entry/2020/10/27/182226
+const useAnimationFrame = (
+  callback: (timestamp: DOMHighResTimeStamp) => void,
+) => {
+  const reqIdRef = useRef<number>(null);
+
+  const animate = useCallback(
+    (timestamp: DOMHighResTimeStamp) => {
+      reqIdRef.current = requestAnimationFrame(animate);
+      callback(timestamp);
+    },
+    [callback],
+  );
+
+  useEffect(() => {
+    reqIdRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (reqIdRef.current) {
+        cancelAnimationFrame(reqIdRef.current);
+      }
+    };
+  }, [animate]);
+};

lib/main.ts

@@ -1,2 +1,3 @@
 export type { Satellite } from "./Satellite";
 export { SatelliteMarker } from "./SatelliteMarker";
+export { SatelliteMarkers } from "./SatelliteMarkers";

src/App.tsx

@@ -1,17 +1,28 @@
 import { Map } from "react-map-gl/maplibre";
-import { SatelliteMarker } from "../lib/SatelliteMarker";
+import { SatelliteMarkers } from "../lib/main";
 
 import "maplibre-gl/dist/maplibre-gl.css";
 
-const satellite = {
-  name: "YODAKA",
-  tle: {
-    line1:
-      "1 62295U 98067XB  24356.80692813  .00138458  00000+0  20531-2 0  9992",
-    line2:
-      "2 62295  51.6364 105.6293 0012447   6.1035 354.0105 15.54174727  1956",
+const satellites = [
+  {
+    name: "YODAKA",
+    tle: {
+      line1:
+        "1 62295U 98067XB  24356.80692813  .00138458  00000+0  20531-2 0  9992",
+      line2:
+        "2 62295  51.6364 105.6293 0012447   6.1035 354.0105 15.54174727  1956",
+    },
   },
-};
+  {
+    name: "ONGLAISAT",
+    tle: {
+      line1:
+        "1 62299U 98067XF  24356.80956985  .00137277  00000+0  20793-2 0  9997",
+      line2:
+        "2 62299  51.6370 105.6484 0011002   0.4931 359.6068 15.53614663  1919",
+    },
+  },
+];
 
 export default function App() {
   return (
@@ -24,7 +35,7 @@ export default function App() {
       style={{ height: "100vh" }}
       mapStyle="https://tile.openstreetmap.jp/styles/maptiler-basic-ja/style.json"
     >
-      <SatelliteMarker satellite={satellite} date={new Date()} />
+      <SatelliteMarkers satellites={satellites} />
     </Map>
   );
 }