The label a point on a map deserves
A place's name in capitals, then its readouts underneath in the code face, tabular, so a coordinate and a reading line up digit for digit. Pure markup with no client JavaScript. Its intended home is renderCallout on Globe or WorldMap, where it annotates the active point.
Anatomy
Full
Santiago, CLCobalt17.73 / 64 arcsCinder Loop
Title only
Reykjavik, IS
Alignment
A callout sitting left of its marker ranges end so the text hangs off the point; one sitting right ranges start. Globe and WorldMap both report which side the overlay chose through data-side.
Santiago, CL-33.45 / -70.66
Sydney, AU-33.86 / 151.20
// From the npm package
import { MapCallout } from 'rift-ds/components/MapCallout/MapCallout';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/map-callout.json