Render geographic data as a dot-matrix style map. Add pins to highlight locations, filter by country or region, and customize dot appearance. Ideal for showing global presence, office locations, or geographic distributions.
<script lang="ts" setup>
const pins = [
{ lat: 40.7128, lng: -74.006, svgOptions: { color: '#3b82f6', radius: 0.75 } },
{ lat: 51.5074, lng: -0.1278, svgOptions: { color: '#22c55e', radius: 0.75 } },
{ lat: 35.6762, lng: 139.6503, svgOptions: { color: '#f59e0b', radius: 0.75 } },
{ lat: 48.8566, lng: 2.3522, svgOptions: { color: '#8b5cf6', radius: 0.75 } },
{ lat: -33.8688, lng: 151.2093, svgOptions: { color: '#ef4444', radius: 0.75 } },
{ lat: 55.7558, lng: 37.6173, svgOptions: { color: '#06b6d4', radius: 0.75 } }
]
</script>
<template>
<div class="flex items-center justify-center">
<DottedMap
:map-width="120"
:map-height="50"
:pins="pins"
color="var(--ui-bg-accented)"
:dot-size="0.5"
/>
</div>
</template>
The grid prop defines how dots are aligned in the matrix. By default, dots are aligned in a regular vertical grid. Setting it to diagonal creates a staggered, honeycomb-like arrangement.
<script lang="ts" setup>
const pins = [
{ lat: 40.7128, lng: -74.006, svgOptions: { color: '#3b82f6', radius: 0.75 } },
{ lat: 51.5074, lng: -0.1278, svgOptions: { color: '#22c55e', radius: 0.75 } },
{ lat: 35.6762, lng: 139.6503, svgOptions: { color: '#f59e0b', radius: 0.75 } },
{ lat: 48.8566, lng: 2.3522, svgOptions: { color: '#8b5cf6', radius: 0.75 } },
{ lat: -33.8688, lng: 151.2093, svgOptions: { color: '#ef4444', radius: 0.75 } },
{ lat: 55.7558, lng: 37.6173, svgOptions: { color: '#06b6d4', radius: 0.75 } }
]
</script>
<template>
<div class="flex items-center justify-center">
<DottedMap
:map-height="75"
:pins="pins"
color="var(--ui-bg-accented)"
:dot-size="0.3"
grid="diagonal"
/>
</div>
</template>
The map uses a grid of dots to represent geographic data. You can control the density and appearance of the grid using mapWidth, mapHeight, and dotSize.
mapHeight or mapWidth to define the number of dots in the grid. The other dimension is calculated automatically to preserve the map's aspect ratio.dotSize to control the radius of individual dots. A value of 0.5 creates a grid where dots are perfectly adjacent without overlapping.By adjusting these values together, you can achieve the exact grid layout you want. For example, a larger mapWidth with a smaller dotSize will result in a more detailed, high-resolution map.
<!-- Big dots touching each other -->
<DottedMap
:map-height="50"
:dot-size="0.3"
/>
<!-- Small dots with more spacing -->
<DottedMap
:map-height="75"
:dot-size="0.3"
/>
| Prop | Type | Default | Description |
|---|---|---|---|
mapHeight | number | undefined | Height of the map in dots. Width is calculated automatically to preserve aspect ratio. |
mapWidth | number | undefined | Width of the map in dots. Height is calculated automatically to preserve aspect ratio. |
countries | string[] | undefined | Array of ISO 3166-1 alpha-3 country codes to include. If omitted, shows the whole world. |
region | MapRegion | undefined | Specific region to display (lat/lng bounds). |
grid | 'vertical' | 'diagonal' | 'vertical' | How dots should be aligned. |
avoidOuterPins | boolean | false | If true, prevents adding pins outside of region/countries. |
pins | MapPin[] | undefined | Array of pins to place on the map. |
precomputedMap | string | object | undefined | Precomputed map data (JSON) to skip map computation. |
color | string | '#ffffff' | Default color of the dots. |
dotSize | number | 0.5 | Default size (radius) of the dots. |
strokeColor | string | undefined | Stroke color of the dots. |
strokeWidth | number | undefined | Stroke width of the dots. |
strokeOpacity | number | undefined | Stroke opacity of the dots. |
shape | 'circle' | 'hexagon' | 'circle' | Shape of the dots. |
countryColors | Record<string, string> | undefined | Custom colors for specific countries (keyed by ISO code). |
backgroundColor | string | undefined | Background color of the map container. |