mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
100 lines
3.4 KiB
Plaintext
100 lines
3.4 KiB
Plaintext
---
|
|
title: Vector map
|
|
docs-libs: [jsvectormap]
|
|
description: Interactive guide to creating a vector map with jsVectorMap.
|
|
summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
|
|
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
|
|
|
|
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
|
|
|
|
<Example codeOnly>
|
|
<MapVector mapId="empty" />
|
|
</Example>
|
|
|
|
## Sample demo
|
|
|
|
Look at the example below to see how the vector map works with a world map.
|
|
|
|
<Example>
|
|
<MapVector mapId="world" />
|
|
</Example>
|
|
|
|
## Markers
|
|
|
|
You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
|
|
|
|
<Example>
|
|
<MapVector mapId="world-markers" />
|
|
</Example>
|
|
|
|
## Lines
|
|
|
|
You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
|
|
|
|
<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 colour alone.
|
|
- Do not make every region focusable. A world map would be hundreds of tab stops.
|