# Vector map

> A vector map draws countries as SVG paths that can be styled and clicked. Tabler themes jsVectorMap to match the interface.

Interactive SVG maps with jsVectorMap, with a world map, markers and lines.

Source: https://docs.tabler.io/ui/plugins/vector-map

---

## Overview

A vector map draws countries and regions as SVG paths, so it stays sharp at any size and every region can be styled or clicked. Tabler uses [jsVectorMap](https://jvm-docs.vercel.app/), and themes it to match the rest of the interface.

The library ships the map data separately from the code. Load the map you need - the world map here - or the build will render an empty box.

## Installation

Install jsVectorMap with npm:

```shell
npm install jsvectormap
yarn add jsvectormap
pnpm install jsvectormap
bun install jsvectormap
```

Or include it from a CDN. You need three files: the stylesheet, the library, and the map data.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/jsvectormap/dist/jsvectormap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/jsvectormap/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.5.0/dist/libs/jsvectormap/dist/maps/world.js"></script>
```

Use `maps/world-merc.js` instead for the Mercator projection.

## Usage

Add an empty element with a height, then point jsVectorMap at it. The `map` option has to match the map file you loaded.

```html
<div id="map-world" style="height: 20rem"></div>
```

```js
new jsVectorMap({
  selector: '#map-world',
  map: 'world',
});
```

The map sizes itself from its container, so the container needs a height before the map is created. Call `updateSize()` on resize to keep it in step:

```js
const map = new jsVectorMap({ selector: '#map-world', map: 'world' });

window.addEventListener('resize', () => map.updateSize());
```

## Default map

The code for a world map with the default options:

```html
<div class="ratio ratio-4x3">
  <div>
    <div id="map-empty" class="w-100 h-100" role="img" aria-label="Empty map"></div>
  </div>
</div>
```

## Sample demo

The same map rendered on the page:

```html
<div class="ratio ratio-4x3">
  <div>
    <div id="map-world" class="w-100 h-100" role="img" aria-label="World map"></div>
  </div>
</div>
```

## Markers

Markers point out single locations, such as offices or customers:

```html
<div class="ratio ratio-4x3">
  <div>
    <div id="map-world-markers" class="w-100 h-100" role="img" aria-label="Map with markers"></div>
  </div>
</div>
```

## Lines

Lines connect locations, for a route or a link between two points:

```html
<div class="ratio ratio-4x3">
  <div>
    <div id="map-world-lines" class="w-100 h-100" role="img" aria-label="Map with markers"></div>
  </div>
</div>
```

## Accessibility

- A map is a picture built from paths, and a screen reader reads them as a list of shapes. Give the container `role="img"` and an `aria-label` that says what it shows.
- The data behind the map has to be reachable another way. A table of the same values, next to or below the map, serves screen reader users and anyone printing the page.
- Hovering a region is mouse-only. Do not put anything there that is not also available in the text version.
- Colour scales are hard to read for many users. Add a legend with the actual numbers rather than color alone.
- Do not make every region focusable. A world map would be hundreds of tab stops.