Dotted Map
A dot-matrix world map rendered as a single inline SVG from static land data — no runtime dependency. Drop in markers by latitude/longitude with optional pulsing glow, all colored from your theme tokens.
Pro features
What the Pro version adds to this component.
Dot-Matrix World
1,657 land dots drawn into a single inline SVG — a crisp, stylized world at any size.
Zero Runtime Deps
Map geometry is static and embedded, so no mapping library is bundled or fetched.
Lat/Lng Markers
Place points by latitude and longitude with an accurate equirectangular projection.
Pulsing Glow
Markers animate a soft halo that automatically stops for reduced-motion users.
Token-Colored
Dots and markers read muted-foreground and primary tokens — light/dark ready out of the box.
Fully Responsive
A w-full, h-auto SVG scales to any container while preserving its aspect ratio.
Accessible & SSR-Safe
Marker labels become <title> tooltips and first render is deterministic for safe hydration.
Installation
Install via CLI
npx @moontra/moonui-cli add dotted-mapUsage
Examples
Blank World Map
Rendered from 1,657 static land dots in a single inline SVG — no runtime map dependency. Dots use the neutral muted-foreground token so the map inherits your theme.
Marked Cities
Pass markers with lat/lng to place points on the map. Each marker's label is rendered as an SVG <title>, so it appears as a native tooltip on hover.
Interactive Markers with Popover
Give a marker content and it becomes clickable: tapping it opens a detail popover above the point (label + your rich content). Handle onMarkerClick to drive your own state — here the selected city is shown below. Escape, an outside click, or tapping the marker again closes the popover.
Custom Colors
Adapt the palette to your brand: dotColor recolors the land dots and markerColor recolors every marker (a marker's own color field can still override per-point). Pass any CSS color — hex, rgb, or an hsl(var(--token)).
Static Markers (No Glow)
Markers pulse by default. Set glow={false} for a calm, static presentation — useful in dense dashboards or when motion would distract.
Global Reach Composition
Compose the map inside real MoonUI components to build a marketing panel — here a Card with a heading, badge, and the dotted map as the hero visual.