WorldDotMap
ChartsDot-matrix world map — terrain as a Neo-Green lattice with hotspot overlays.
Stylised dot-matrix world map — every landmass is rendered as a grid of small Neo-Green dots, producing a calm HUD-style backdrop. Add hotspots to pin labelled, pulsing points of interest on top.
Import
import { WorldDotMap } from "nosible-ux"Examples
Empty base map
Hotspots — data-centre footprint
Custom dot grid size
Accessibility
aria-label on the wrapper is mandatory — the dot layer is a single role="img" without per-country semantics. Hotspot pulses respect prefers-reduced-motion and each hotspot becomes focusable with a label derived from hotspots[].label.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Defines a string value that labels the current element. |
dotColor | string | undefined | — | Background dot colour. Default: Neo Green. |
dotOpacity | number | undefined | — | Opacity of background land dots. Default: `0.35`. |
dotRadius | number | undefined | — | Base dot radius in px. Default: `1.2`. |
gridSize | number | undefined | — | Grid spacing in px. Default: `8`. |
height | number | undefined | — | |
hotspots | DotMapHotspot[] | undefined | — | Hotspots (optional) — rendered on top of the dot grid. |
projection | WorldProjectionKind | undefined | — | |
width | number | undefined | — | |
withPulse | boolean | undefined | — | Animate hotspot halo pulse. Default: `true`. |