WorldMap
ChartsBase world-map primitive — country polygons + fitted d3-geo projection.
The shared base primitive for every World* component. Paints 177 country polygons, optional graticule and sphere, and exposes a fitted d3-geo projection + path via a render-prop so higher-level components layer data on top. Use it directly when you need a bespoke map overlay.
Import
import { WorldMap } from "nosible-ux"Examples
Countries only
With graticule and sphere
Custom overlay via render-prop
Accessibility
Pass aria-label describing what the map represents — the wrapper renders with role="img" so screen readers announce it as a single image rather than a pile of SVG paths. For interactive overlays, add focusable markers with their own labels.
Props
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Accessible label forwarded to the `role="img"` wrapper. |
background | string | undefined | — | Wrapper background. Default: `WORLD_MAP_COLORS.obsidian`. |
children | ((ctx: WorldMapRenderContext) => ReactNode) | undefined | — | Overlay render-prop. Receives projection + path + countries. |
countryFill | string | undefined | — | Country polygon fill. Default: `WORLD_MAP_COLORS.slateCore`. |
countryStroke | string | undefined | — | Country polygon stroke. Default: `WORLD_MAP_COLORS.slate3`. |
height | number | undefined | — | Viewport height in px. Default: `450`. |
projection | WorldProjectionKind | undefined | — | Projection family. Default: `"equalEarth"`. |
width | number | undefined | — | Viewport width in px. Default: `800`. |
withCountries | boolean | undefined | — | Render the 177 country polygons as the base layer. Default: `true`. |
withGraticule | boolean | undefined | — | Render the 20° graticule grid. Default: `false`. |
withSphere | boolean | undefined | — | Render the projection sphere outline. Default: `false`. |