WorldMap
world-mapPlots geographic points and animated routes on an interactive world map.
Usage
Single connection
Input the starting point/end point longitude and latitude, and the arc will be automatically drawn and looped.
<WorldMap
dots={[{ start: { lat: 39.9, lng: 116.4 }, end: { lat: 40.7, lng: -74 } }]}
/>Multi-point radiation
The same starting point connects to multiple cities, forming a radiation network.
<WorldMap
dots={[
{ start: shanghai, end: london },
{ start: shanghai, end: singapore },
{ start: shanghai, end: sydney },
{ start: shanghai, end: sanFrancisco },
]}
/>Color matching one by one
Each connection uses dot.color to cover the global color, and multiple colors coexist in the same picture.
<WorldMap
dots={[
{ start: shanghai, end: london, color: "var(--color-chart-1)" },
{ start: shanghai, end: singapore, color: "var(--color-chart-2)" },
]}
/>Node distribution
points is independent of fly lines, value drives node size, and showLabels displays labels.
<WorldMap
points={[
{ id: "sh", lat: 31.2, lng: 121.5, label: "Shanghai", value: 92 },
{ id: "sg", lat: 1.35, lng: 103.8, label: "Singapore", value: 64 },
]}
showLabels
/>Flying line mark
flyingMarker Let the mark move circularly along the arc and fit the direction (plane / comet / arrow).
<WorldMap dots={radial} flyingMarker="plane" />When to use
Use WorldMap for decorative geographic connections and node distributions such as global points of presence, routing, or traffic dashboards. It is not a precise choropleth; use a GeoJSON mapping library for administrative-area statistics. Use NumberTicker for numeric motion or Chart for standard charts.
Import
import { WorldMap } from "@hulianui/ui"Props
WorldMapDot is { start: WorldMapPoint; end: WorldMapPoint; color?: string }; WorldMapPoint is { lat; lng; label? }; and WorldMapNode is WorldMapPoint & { id?; value?; color? }.
| Name | Type | Default | Description |
|---|---|---|---|
| dots | WorldMapDot[] | — | Geographic connection pairs; omission renders only the dotted base map. |
| flyingMarker | "plane" | "comet" | "arrow" | — | Repeating marker along every arc; planes and arrows rotate with direction. |
| points | WorldMapNode[] | — | Independent nodes whose values map to radius within the current point range. |
| showLabels | boolean | false | Shows node labels. |
| lineColor | string | "var(--color-chart-1)" | Chart-token arc color, overridable per dot. |
| dotColor | string | "var(--color-border)" | Border-token base-map dot color. |
| duration | number | 1 | Arc entrance duration in seconds. |
| className | string | — | Container class name. |
Events
| Event | Type | Description |
|---|---|---|
| onPointClick | (node: WorldMapNode, index: number) => void | Makes nodes focusable and exposes them to assistive technology for drill-down. |
Pitfalls
- SVG colors must use full
--color-tokens such asvar(--color-chart-1); barevar(--chart-1)may resolve black or transparent in Tailwind v4. See [[hulian-token-color-var-needs-color-prefix]]. - Arc and endpoint animations can be at their initial frame in headless screenshots. Use a real browser or reduced motion; see [[verify-sub-second-web-animation-via-headless-screenshot]] and [[recharts-headless-screenshot-blank-clippath-animation-starved]].
- Without
onPointClick, the SVG is decorative andaria-hidden. Supplying it makes nodes keyboard reachable. Unlabeled interactive nodes use the runtime fallback `