shadcn.io is not affiliated with official shadcn/ui
Flight Routes Map Block for Solid
Twelve routes of three invented airlines drawn as arcs on a dot world, with a checkbox per airline and a table of distance and flying time; choosing a row rings its arc and names its two cities.
Installation
Overview
Show who flies where, with this flight routes map for Solid with Ark UI. Flightmoor, an airline route planner, draws the land as a coarse bitmap of round dots and twelve routes between twelve cities as curved arcs: Ploverair solid, Heronline dashed and Quillwing dotted, with the three hub airports as squares. A Checkbox per airline shows or hides its arcs, and the table under the map lists the routes still shown with the great-circle distance and a flying time at 800 km an hour plus 30 minutes. Pressing a row rings its arc, fades the others and names the two cities on the map; an empty state replaces the table when every airline is off, in a box of the same height. The table is the keyboard route and the map is decoration, so everything on it is also in text. It's built from Checkbox, Empty and Guides, with a CSS entrance only. For airline route planners, travel sites and network maps.
FAQ
How are the distance and the time worked out?
From the cities' latitude and longitude with the haversine formula in haversine, in kilometres, rounded. The time is the distance over 800 km an hour plus 30 minutes for taxi and climb (CRUISE_KMH, TAXI_MINUTES). It is a straight great-circle figure, not a routed flight plan, and the caption says the airlines are invented.
How are the arcs drawn?
Each route is a quadratic curve between the two cities in the dot world's 480 by 200 units, bowed towards the top of the page by a fifth of its length (BOW) so that two routes between nearby cities do not overlap. The strokes use a non-scaling width so they stay thin when the map stretches. Airlines differ by line style as well as by name, so the map never relies on colour.
Can I use it without a mouse?
Yes. Each airline is a labelled checkbox and each row of the table is a button that toggles its route, with aria-pressed. The cities and arcs are hidden from assistive technology because the table says the same things in words, and a polite message speaks what changed.
How do I use my own cities and airlines?
Edit CITIES (an id, a name, a latitude, a longitude and whether it is a hub), AIRLINES (a name and a dash style) and FLIGHTS (an airline and two city ids). The arcs, distances, times, counts and the table are computed from them. Keep routes off the 180th meridian, which the bitmap does not wrap.
What stays local in the demo, and how do I wire it up?
All of it. The airlines and routes are invented, the cities are real places named in text only, and nothing is booked or priced. In your app load the routes from your schedule service, keep routeOf for the derived figures and open a row into your fare or timetable page.
How does it look on a phone?
The airline checkboxes wrap above the map, the map keeps a fixed height and the table keeps the route and the distance, with the airline and the time under the route name. The table scrolls inside a box of fixed height, so switching an airline never changes the length of the page.