React Vector Map

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 1.7. It is part of the free and PRO versions of AdminKit for 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 do.

ExampleCopy Anchor Link

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".

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>
  );
}

PropsCopy Anchor Link

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 modeCopy Anchor Link

options gets the colors of the current mode, such as theme.primary, theme.white and theme["gray-200"]. Dark mode 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 mapCopy Anchor Link

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:

<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 mapsCopy Anchor Link

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.

AccessibilityCopy Anchor Link

• 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".

RelatedCopy Anchor Link

• Next.js Vector Map: the same component in AdminKit for Next.js
• Bootstrap 5 vector map: the same plugin in the HTML version
• Bootstrap 5 dark mode: adminkit.vectorMap() in the HTML version
• Charts: the chart components that share the theme function
• Vector maps demo