# Dot world map
URL: /diagrammatic/docs/charts/dot-world-map
The world as a halftone field of dots. Countries color by named group, and flows draw as trails between countries.
> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.
```tsx
"use client";
import { Legend } from "diagrammatic";
import { Root, Tooltip } from "diagrammatic/interactive";
import { DotWorldMap, WORLD } from "diagrammatic/world";
const NAMES = new Map(WORLD.map((country) => [country.iso, country.name]));
const REGIONS = {
"us-east": ["US", "CA", "MX", "BR", "AR", "CO", "CL"],
"eu-west": ["GB", "IE", "FR", "DE", "NL", "ES", "IT", "PL", "SE", "NO"],
"ap-south": ["IN", "SG", "ID", "AU", "JP", "KR", "TH", "VN"],
};
const REGION_OF = new Map(
Object.entries(REGIONS).flatMap(([region, list]) =>
list.map((iso) => [iso, region]),
),
);
export default function InferenceRegionsMap() {
return (
{({ datum }) => {
if (!datum.series) return null;
const text = datum.series2
? `${NAMES.get(datum.series)} to ${NAMES.get(datum.series2)}`
: `${NAMES.get(datum.series) ?? datum.series}, ${REGION_OF.get(datum.series) ?? "not served"}`;
return (
{text}
);
}}
);
}
```
## Usage
```
import { DotWorldMap } from "diagrammatic/world";
;
```
Use it when the question is where, not how much: a footprint, a coverage map, a replication topology. For a value per country, use the [World map](/diagrammatic/docs/charts/world-map).
## Examples
### A footprint
One group lights up a set of countries; every other country stays a faint dot.
```tsx
import { DotWorldMap } from "diagrammatic/world";
export default function FootprintMap() {
return (
);
}
```
### Groups
`groups` maps a name to a list of country codes. Groups take the categorical palette in their key order. The map draws no legend of its own; put the DOM `Legend` above it with the same names, as the figure at the top does.
```tsx
import { DotWorldMap } from "diagrammatic/world";
export default function TimezoneTeamsMap() {
return (
);
}
```
### Flows
`flows` draws a lifted trail from one country to another, blending from the source group's color to the target's.
```tsx
import { DotWorldMap } from "diagrammatic/world";
export default function ReplicationMap() {
return (
({
from: "US",
to,
}))}
/>
);
}
```
### Animated flows
Put `data-dg-motion` on the map or any ancestor and each trail runs from source to target, so the direction reads without arrows. See [Motion](/diagrammatic/docs/motion).
```tsx
import { DotWorldMap } from "diagrammatic/world";
export default function LiveTrafficMap() {
return (
);
}
```
## Interaction
Each country is a mark with `data-series` set to its code, and each flow carries its source in `series` and its target in `series2`, so one tooltip can describe both, as the figure at the top does.
### Zoom
```tsx
"use client";
import { Zoom } from "diagrammatic/interactive";
import { DotWorldMap } from "diagrammatic/world";
export default function ZoomableDotMap() {
return (
{(view) => (
)}
);
}
```
## Props
- `groups?`: `Record` — Named sets of ISO 3166-1 alpha-2 codes, colored in key order.
- `flows?`: `{ from: string; to: string }[]` — Trails between two countries, by code.
- `title?`: `string` — Names the map for assistive technology.
- `summary?`: `string` — A sentence read after the title.
- `width`: `number` (default `640`) — Rendered width in CSS pixels.
- `height?`: `number` — Rendered height in CSS pixels.
- `aspect?`: `number` — Width over height when \`height\` is not given.
- `view?`: `{ x: number; y: number; w: number; h: number }` — A window onto the map, from \`Zoom\`.