mirror of
https://github.com/tabler/tabler.git
synced 2026-08-31 22:31:28 +04:00
55 lines
1.7 KiB
Plaintext
55 lines
1.7 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'
|
|
|
|
## 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>
|