Spark UI
Dotted Location Globe

Customize

Locations5 items
Focused Pin
5
Globe Color
Pin Color
Accent Color
Dot Spacing
0.9
Tilt
18
Idle Spin
4
Click to Add Pins
Figures3 items
Hint
Background
Text Color
Font
Text Scale
100%
Auto Play

Dotted Location Globe

Animations
87 views•72 uses

Props

16 properties
locationsstring[]5 images
One pin each: “City | details” for a major city, or “Name | lat, lng | details” for anywhere. The first detail is shown in bold.
focusPinnumber5
Which pin is highlighted first.
globeColorcolor#ff6f2e
Colour of the land dots and rim light.
pinColorcolor#ffffff
Colour of the pins.
accentColorcolor#f2826a
Colour of the focused pin and the orbit dot.
dotSpacingnumber0.9
Degrees between land dots. Smaller is denser.
tiltnumber18
How far the north pole leans toward you at rest.
spinnumber4
Degrees per second the globe turns when left alone.
clickToPinbooleantrue
Clicking the globe drops a new pin there.
statsstring[]3 images
Each is a number followed by a label.
hintstringDrag to rotate
Caption under the rotation indicator.
backgroundcolor#141414
Backdrop colour.
textColorcolor#ffffff
Colour of the card, lines and figures.
fontFamilystringvar(--font-inter)…
Typeface for the text.
textScalenumber100
Relative size of the text.
autoPlaybooleanfalse
Moves the focus from pin to pin until the globe is touched.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add dotted-location-globe

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A dotted globe of the world's land that turns under the pointer, with pins anyone can add, by city name, by coordinates or by clicking the globe. The focused pin is ringed in the accent colour and tied by a leader line to a bracketed card with its details.

KEY FEATURES

  • ·Land is sampled from a half-degree mask of Natural Earth's coastlines, and dots are spaced evenly by latitude so they don't bunch toward the poles
  • ·Dots are shaded by a light from the upper right and drawn in a few brightness batches, so thousands of them stay cheap to redraw every frame
  • ·Pins take a known city name or any latitude and longitude; clicking open land or sea drops a new pin there and focuses it
  • ·Focusing a pin turns the globe to bring it just right of centre, and the card glides to follow it with a leader line and bracket
  • ·Drag to spin with inertia; the dashed orbit below tracks the rotation, and the figures along the bottom count up on load