World Map

A dotted world map with labelled markers and routes that draw themselves. No map library or tiles.

pnpm dlx shadcn@latest add @latheui/world-map

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

World Map is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native figure attributes. The map scales to its container's width.

Prop	Type	Default	Description
label* (required)	string	—	Accessible name of the map.
markers	{ lat: number; lng: number; label: string }[]	[]	Places to mark, in degrees.
arcs	{ from: number; to: number }[]	[]	Routes between markers, by index.
color	string	"var(--chart-1)"	Color of markers and routes.
dotSize	number	0.55	Dot diameter as a share of the grid spacing, 0 to 1.
showLabels	boolean	true	Prints marker names on the map.
dotClassName	string	—	Text color utilities for the land dots.

The map is an image with a name, followed by a visually hidden list of every place and route, so nothing is conveyed by position alone.
Labels are real SVG text with a background-colored outline, so they stay readable over the dots.
The land is a 2.5 degree grid. It shows where things are in the world, not borders or coastlines, and small islands are missing.
It is an equirectangular projection cropped to between 84°N and 58°S.

Markers pop in one after another, then each route draws from its first marker to its second. Markers pulse slowly.
With reduced motion everything is drawn at once and nothing pulses.

Markers and arcs take color; the land takes any text color utility.

<WorldMap label="Offices" markers={offices} color="var(--chart-2)" dotClassName="text-chart-2/30" dotSize={0.8} />

API reference

Also accepts native figure attributes. The map scales to its container's width.

Prop	Type	Default	Description
label* (required)	string	—	Accessible name of the map.
markers	{ lat: number; lng: number; label: string }[]	[]	Places to mark, in degrees.
arcs	{ from: number; to: number }[]	[]	Routes between markers, by index.
color	string	"var(--chart-1)"	Color of markers and routes.
dotSize	number	0.55	Dot diameter as a share of the grid spacing, 0 to 1.
showLabels	boolean	true	Prints marker names on the map.
dotClassName	string	—	Text color utilities for the land dots.

Accessibility

The map is an image with a name, followed by a visually hidden list of every place and route, so nothing is conveyed by position alone.
Labels are real SVG text with a background-colored outline, so they stay readable over the dots.
The land is a 2.5 degree grid. It shows where things are in the world, not borders or coastlines, and small islands are missing.
It is an equirectangular projection cropped to between 84°N and 58°S.