Globe Diagram
An SVG wireframe globe with city markers and arc connections for geographic visualizations.
Preview
Import
import { GlobeDiagram } from "@sigil-ui/components";Usage
<GlobeDiagram size={320} cities={[{ label: "San Francisco", lat: 37.77, lon: -122.42 }, { label: "London", lat: 51.5, lon: -0.12 }, { label: "Singapore", lat: 1.35, lon: 103.82 }, { label: "Tokyo", lat: 35.68, lon: 139.69 }]} />Custom colors and rotation
<GlobeDiagram
size={300}
rotation={30}
dotColor="var(--s-text-muted)"
arcColor="var(--s-success)"
cities={[
{ lat: 35.7, lon: 139.7, label: "Tokyo" },
{ lat: -33.9, lon: 151.2, label: "Sydney" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 200 | Diameter in pixels |
cities | GlobeCity[] | [] | Array of { lat, lon, label? } markers |
dotColor | string | var(--s-text-muted) | Color for wireframe dots |
arcColor | string | var(--s-primary) | Color for arcs and city markers |
rotation | number | 0 | Longitude rotation offset in degrees |
className | string | — | Additional CSS classes |
Plus all standard <svg> HTML attributes.