Globe
A canvas dotted globe with token colours that spins slowly, drags with inertia, and draws labelled markers joined by arcs with travelling pulses.
Preview
Markers: Lisbon, New York, Lagos, São Paulo, Reykjavík, Nairobi.
Routes: Lisbon to New York; Lisbon to Lagos; Lagos to São Paulo; New York to São Paulo; Reykjavík to Lisbon; Lagos to Nairobi.
Drag or use the arrow keys to turn the globe. Home resets the view.
Live shipments
1,284
+12% vs last week
- Lisbon → New York2d 4h
- Lagos → São Paulo3d 11h
- Reykjavík → Lisbon1d 2h
- Lagos → Nairobi19h
Drag to turn, or focus and use arrows.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| markers | GlobeMarker[] | [] | Points of interest: { id, label, lat, lng }. |
| arcs | GlobeArc[] | [] | Great-circle routes between marker ids: { from, to }, each with a travelling pulse. |
| autoRotate | number | 8 | Spin speed in degrees per second. 0 holds it still. |
| initialView | { lat: number; lng: number } | { lat: 20, lng: 0 } | The point that faces the viewer at first. |
| draggable | boolean | true | Drag with inertia, arrow keys to turn, Home to reset. |
| showLabels | boolean | true | Draw marker label pills. |
| dotCount | number | 9000 | Points sampling the sphere; land keeps about a third. |
| aria-label | string | "Globe" | Accessible name. Markers and routes are also described as text. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.