Dotted Map
A world map made of dots, with markers placed by latitude and longitude. The grid is generated once ahead of time, so the map renders without any work in the browser and without a mapping package.
Examples
Offices with labels
Markers with a label and a slow pulse, staggered so they do not beat together.
Illustrative: the offices of a fictional company
Inside a card
A smaller map with lighter dots. Only two markers pulse, the ones that set pulse themselves.
Open sessions
IllustrativeSix cities, two of them active in the last minute
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-dotted-map.jsonComponent API
DottedMap
Renders an SVG that fills the width of its container, with labels laid over it in HTML so they keep their size.
| Prop | Type | Default | Description |
|---|---|---|---|
| markers | DottedMapMarker[] | [] | Points in the primary colour. { lat, lng, label?, pulse? }. |
| pulse | boolean | false | Whether markers pulse. A marker's own pulse wins over this one. |
| dotSize | number | 0.5 | The diameter of a land dot, in grid units. Dots sit one unit apart. |
| markerSize | number | 1.1 | The diameter of a marker, in grid units. |
| label | string | 'World map' | The accessible name of the map. |
| className | string | Classes for the wrapper. | |
| dotClassName | string | Classes for the land dots, which take text-foreground/20. |
The dot grid
components/core/dotted-map-points.ts is generated by scripts/generate-dotted-map.ts with the dotted-map package, which stays a development dependency. The script keeps 40 rows of an equirectangular projection from latitude -56 to 80, and stores each row as runs of dots in one SVG path of about 3 KB. Change GRID_ROWS or the region and run it again with node --import tsx scripts/generate-dotted-map.ts.
Accessibility and motion
- The map is an image with a name. Labels are plain text, so screen readers read them after the map.
- The pulse is a ring that grows and fades every 2.4 seconds. With reduced motion the ring is not drawn and the markers stay still.
Credits
Inspired by the dotted map of Magic UI. The grid comes from dotted-map by NTag (MIT).