# React Vector Map

A React vector map with jsVectorMap: the VectorMap component draws a world map with markers in theme colors and restyles it when the color mode changes.

Use a vector map to show where things happen: your offices, your customers or where your visitors come from. `VectorMap` draws an interactive SVG map with markers, which people can zoom and hover. It uses the colors of your theme and follows dark mode.

The component is built on [jsVectorMap](https://github.com/themustafaomar/jsvectormap) 1.7. It is part of the free and PRO versions of [AdminKit for React](/react/). The free version has the world map, and AdminKit PRO adds a map of the United States.

jsVectorMap and the map data load with dynamic imports when the first map appears on a page, so Vite keeps them out of the main bundle. A skeleton shows until the map has drawn. Instead of fixed options, the component takes a function of the theme colors, as the [chart components](/react/docs/charts/overview/#vector-maps) do.

## Example

jsVectorMap fills its element, so the map needs a height. Put it in a `position-relative` element with a height, which also sizes the skeleton. Then give the map `className="h-100"`.

```html
<div id="vector-map-world" style="height:350px"></div>

<script>
adminkit.vectorMap(function (theme) {
  return {
    selector: "#vector-map-world",
    map: "world",
    zoomButtons: true,
    zoomOnScroll: false,
    markers: [
      { coords: [51.507351, -0.127758], name: "London" },
      { coords: [40.7127837, -74.0059413], name: "New York" },
      { coords: [35.689487, 139.691711], name: "Tokyo" },
      { coords: [6.524379, 3.379206], name: "Lagos" },
      { coords: [19.075983, 72.877655], name: "Mumbai" }
    ],
    markerStyle: {
      initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
      hover: { fill: theme.primary, stroke: theme.primary }
    },
    regionStyle: {
      initial: { fill: theme["gray-200"] }
    }
  };
});
</script>
```
```tsx code
import { VectorMap } from "@/components/plugins/vector-map";

const markers: { coords: [number, number]; name: string }[] = [
  { coords: [51.507351, -0.127758], name: "London" },
  { coords: [40.7127837, -74.0059413], name: "New York" },
  { coords: [35.689487, 139.691711], name: "Tokyo" },
  { coords: [6.524379, 3.379206], name: "Lagos" },
  { coords: [19.075983, 72.877655], name: "Mumbai" },
];

export function VisitorsMap() {
  return (
    <div className="position-relative" style={{ height: 350 }}>
      <VectorMap
        map="world"
        className="h-100"
        options={(theme) => ({
          zoomButtons: true,
          zoomOnScroll: false,
          markers,
          markerStyle: {
            initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
            hover: { fill: theme.primary, stroke: theme.primary },
          },
          regionStyle: {
            initial: { fill: theme["gray-200"] },
          },
        })}
      />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `map` | `"world" \| "us_aea_en"` | | The map to draw; `"us_aea_en"` is PRO only |
| `options` | `(theme: Theme) => VectorMapOptions` | | [jsVectorMap's options](https://jvm-docs.vercel.app/) without `selector` and `map` |

Other props, such as `id`, `className` and `aria-*`, go to the map's `<div>`. The component is in `src/components/plugins/vector-map.tsx`.

## Colors and dark mode

`options` gets the colors of the current mode, such as `theme.primary`, `theme.white` and `theme["gray-200"]`. [Dark mode](/react/docs/customization/dark-mode/#theme-colors) lists them. When the mode changes, the component calls `options` again. It applies the new `regionStyle.initial` and `markerStyle.initial` to the regions and markers. It does not rebuild the map, so other options, such as `markers`, are read once, when the map is created.

The map resizes with the window. When the component leaves the page, the map is destroyed.

## United States map

> This map is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

When your data is about the US, show the states instead of the world. `map="us_aea_en"` draws them in an Albers equal-area projection, as on the e-commerce dashboard:

```html
<div id="vector-map-usa" style="height:300px"></div>

<script>
adminkit.vectorMap(function (theme) {
  return {
    selector: "#vector-map-usa",
    map: "us_aea_en",
    zoomButtons: true,
    zoomOnScroll: false,
    markers: [
      { coords: [37.77, -122.41], name: "San Francisco: 375" },
      { coords: [40.71, -74.0], name: "New York: 350" },
      { coords: [32.77, -96.79], name: "Dallas: 225" }
    ],
    markerStyle: {
      initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
      hover: { fill: theme.primary, stroke: theme.primary }
    },
    regionStyle: {
      initial: { fill: theme["gray-200"] }
    }
  };
});
</script>
```
```tsx code
<div className="position-relative" style={{ height: 300 }}>
  <VectorMap
    map="us_aea_en"
    className="h-100"
    options={(theme) => ({
      zoomButtons: true,
      zoomOnScroll: false,
      markers: [
        { coords: [37.77, -122.41], name: "San Francisco: 375" },
        { coords: [40.71, -74.0], name: "New York: 350" },
        { coords: [32.77, -96.79], name: "Dallas: 225" },
      ],
      markerStyle: {
        initial: { r: 9, stroke: theme.white, strokeWidth: 7, fill: theme.primary },
        hover: { fill: theme.primary, stroke: theme.primary },
      },
      regionStyle: {
        initial: { fill: theme["gray-200"] },
      },
    })}
  />
</div>
```

## Other maps

jsVectorMap has a collection of other maps you can add. The map data are files in `src/components/plugins/vector-maps/` that register themselves with jsVectorMap. Copy the file of the map you want there, with a `.d.ts` file like the others. Then add it to the `maps` object at the top of `vector-map.tsx`. The key is the name the file registers with `jsVectorMap.addMap()`, and it is also the name you pass to `map`.

## Accessibility

- The map is an SVG drawing without a text alternative. Give the same information in text as well, such as a list or table of the markers.
- Keep `zoomOnScroll: false`, as the demos do, so the page scrolls when the pointer is over the map.
- The skeleton has `aria-hidden="true"`.

## Related

- [Next.js Vector Map](/nextjs/docs/plugins/vector-map/): the same component in AdminKit for Next.js
- [Bootstrap 5 vector map](/bootstrap/docs/plugins/vector-map/): the same plugin in the HTML version
- [Bootstrap 5 dark mode](/bootstrap/docs/getting-started/dark-mode/): `adminkit.vectorMap()` in the HTML version
- [Charts](/react/docs/charts/overview/#vector-maps): the chart components that share the theme function
- [Vector maps demo](https://react-demo.adminkit.io/maps-vector)

---

Canonical HTML page: https://adminkit.io/react/docs/plugins/vector-map/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io