docs/pages/ui/components/vector-map.mdx - dev - githubmirror/tabler

docs/pages/ui/components/vector-map.mdx

54 строки2 KB

Paweł Kuna

Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)

03 авг 2026, 01:47

03 авг 2026, 01:478962710

---
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.
layout: '@layouts/DocsMdxLayout.astro'
---

import Example from '@components/Example.astro'
import MapVector from '@ui/MapVector.astro'
import { Code } from 'astro:components'
import { site } from '@shared/lib/site.ts'

## Installation

To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:

<Code
	lang="html"
	code={`<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>`}
/>

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