Vector Map
An SVG-based world map widget with interactive location pins, hover tooltips with flag icons, and light/dark mode support. Use it in dashboards to visualize geographic data like active users, office locations, or regional metrics.
Default
Interactive map with location pins. Hover over a pin to see the tooltip with flag, city name, and address.
Minimal
A clean map without any pins or interactivity. Useful as a decorative background or when pin data is loaded asynchronously.
Heatmap
Pins rendered as translucent heat circles instead of dots with tooltips. Best for visualizing density or regional activity.
Few pins — no flags
Pins without flag images or detail text show a simplified tooltip with just the label.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pins | VectorMapPin[] | [] | Array of location pins to display on the map. |
| variant | "default" | "minimal" | "heatmap" | "default" | Visual variant controlling pin rendering style. |
| lightMapSrc | string | Built-in world map | Custom SVG path for light mode. |
| darkMapSrc | string | Built-in world map | Custom SVG path for dark mode. |
| height | number | 483 | SVG viewBox height. |
| className | string | — | Additional class name on the wrapper. |
VectorMapPin
| Property | Type | Description |
|---|---|---|
| id | string | Unique identifier for the pin. |
| label | string | Display label (e.g. "Seattle, USA"). |
| detail | string? | Optional detail text in tooltip (e.g. address). |
| flag | string? | Path to a flag image shown in the tooltip. |
| x | number | Horizontal position within the SVG viewBox (0–1025). |
| y | number | Vertical position within the SVG viewBox (0–483). |