Components
Loading preview...
Renders multiple orbital overlays on the same globe with shared animation and marker styling, while keeping per-orbit path configuration configurable in the orbit dataset.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-satellite-orbits"use client";
import { SatelliteOrbits, Map } from "@/components/ui/flightcn-satellite-orbits";
export default function DefaultSatelliteOrbitsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[520px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map projection={{ type: "globe" }} center={[8, 16]} zoom={1.05}>
<SatelliteOrbits
orbits={[
{
inclination: 51.6,
ascendingNode: -28,
name: "ISS",
orbitColor: "#213448",
groundTrackColor: "#213448",
},
{
inclination: 97.4,
ascendingNode: 38,
name: "NOAA-20",
orbitColor: "#547792",
groundTrackColor: "#547792",
},
{
inclination: 53,
ascendingNode: -120,
name: "Starlink",
orbitColor: "#94B4C1",
groundTrackColor: "#94B4C1",
},
]}
duration={12000}
altitudePx={28}
showGlow={true}
showConnector={true}
connectorLineStyle="dash"
animate={{ duration: 12000 }}
showLabel={true}
labelPosition="right"
satelliteIconRotationOffset={0}
/>
</Map>
</div>
</div>
);
}
export { DefaultSatelliteOrbitsDemo };