Vector map

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

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, 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:

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.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/jsvectormap/dist/jsvectormap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/jsvectormap/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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.

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

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:

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:

<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:

<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:

<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:

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

Related