mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
100 lines
3.1 KiB
Plaintext
100 lines
3.1 KiB
Plaintext
---
|
|
title: Vector map
|
|
docs-libs: [jsvectormap]
|
|
description: Interactive SVG maps with jsVectorMap, with a world map, markers and lines.
|
|
summary: A vector map draws countries as SVG paths that can be styled and clicked. Tabler themes jsVectorMap to match the interface.
|
|
related: [/ui/components/map]
|
|
---
|
|
|
|
import Example from '@components/Example.astro'
|
|
import MapVector from '@shared/components/demo/MapVector.astro'
|
|
import { Code } from 'astro:components'
|
|
import { site } from '@shared/lib/site.ts'
|
|
import TabsPackage from '@components/TabsPackage.astro'
|
|
|
|
## 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:
|
|
|
|
<TabsPackage name="jsvectormap" />
|
|
|
|
Or include it from a CDN. You need three files: the stylesheet, the library, and the map data.
|
|
|
|
<Code
|
|
lang="html"
|
|
code={`<link rel="stylesheet" href="${site.cdnUrl}/dist/libs/jsvectormap/dist/jsvectormap.min.css" />
|
|
<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/jsvectormap.min.js"></script>
|
|
<script src="${site.cdnUrl}/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:
|
|
|
|
<Example codeOnly>
|
|
<MapVector mapId="empty" />
|
|
</Example>
|
|
|
|
## Sample demo
|
|
|
|
The same map rendered on the page:
|
|
|
|
<Example>
|
|
<MapVector mapId="world" />
|
|
</Example>
|
|
|
|
## Markers
|
|
|
|
Markers point out single locations, such as offices or customers:
|
|
|
|
<Example>
|
|
<MapVector mapId="world-markers" />
|
|
</Example>
|
|
|
|
## Lines
|
|
|
|
Lines connect locations, for a route or a link between two points:
|
|
|
|
<Example>
|
|
<MapVector mapId="world-lines" />
|
|
</Example>
|
|
|
|
## 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.
|