shadcn.io is not affiliated with official shadcn/ui
Space Launch Sites Map Block for React Aria
A turnable globe with eight invented launch sites at real latitudes and an orbit inclination slider from 0 to 98 degrees that lights the sites able to reach it, with a latitude list and upcoming launches.
Installation
Overview
Find the sites that can reach an orbit, with this space launch sites map for React with React Aria. Perihelion Space Agency draws an orthographic globe, a disc with meridians and parallels every 30 degrees and the land as round dots, carrying eight invented launch sites at real latitudes. A Slider sets the orbit inclination from 0 to 98 degrees and lights every site whose latitude is at or below it, because a direct launch can only reach inclinations from its own latitude upward; the rule is simplified, not an engineering model. Two buttons turn the globe 15 degrees, and choosing a site turns it to face that site. The list gives each site's latitude and whether it reaches the orbit, and the card at the end lists its upcoming launches with fixed dates. The list is the keyboard route and the pins are a pointer shortcut. It's built from Slider, Button, Badge and Guides, with a CSS entrance only. For space agencies, mission planners and educational sites.
FAQ
What is the rule for reaching an orbit?
A site lights when its latitude is at or below the chosen inclination, because launching straight into an orbit cannot give an inclination lower than the latitude of the site. Real missions can dog-leg or launch retrograde; the block says it is simplified and is not an engineering model.
How is the globe drawn?
screenOf projects a latitude and longitude to the disc for a centre longitude, and a place on the far side is not drawn. The meridians, parallels and the land dots are recomputed for the centre when the globe turns, in a 100 by 100 box with the pins laid over it as percentages.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and speaks the count of sites, the two turn buttons are named, and each site in the list is a button with aria-pressed. The pins are decoration for the pointer, and a polite message speaks the result once the slider rests.
How do I use my own sites and launches?
Edit SITE_LINES (an id, a name, a latitude and a longitude) and LAUNCH_LINES (a site, an ISO date, a mission and a target inclination). The pins, the list, the counts and the card are computed from them; dates are shown from the ISO text without any locale formatting.