Globe Diagram
Illustrate geographic connections on a globe.
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 }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | — | Sets the component's size. |
cities | GlobeCity[] | — | Cities configuration. |
dotColor | string | — | Dot Color configuration. |
arcColor | string | — | Arc Color configuration. |
rotation | number | — | Rotation configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-primary | Primary |
--s-border-muted | Border muted |
--s-font-mono | Font mono |