tabler/docs/ui/components/vector-maps.mdx

---
title: Vector Maps
description: Interactive guide to creating vector maps with jsVectorMap.
summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
---

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

```html
<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
```

## Sample demo

Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:

```html
<div id="map-world" class="w-100 h-100"></div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const map = new jsVectorMap({
      selector: "#map-world",
      map: "world",
    });
  });
</script>
```

Look at the example below to see how the vector map works with a world map.

```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" columns={2} centered
<div class="card">
  <div class="card-body">
    <div class="ratio ratio-16x9">
      <div>
        <div id="map-world" class="w-100 h-100"></div>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const map = new jsVectorMap({
      selector: "#map-world",
      map: "world",
      backgroundColor: "transparent",
      regionStyle: {
        initial: {
          fill: tabler.getColor("body-bg"),
          stroke: tabler.getColor("border-color"),
          strokeWidth: 2,
        },
      },
      zoomOnScroll: false,
      zoomButtons: false,
    });
    window.addEventListener("resize", () => {
      map.updateSize();
    });
  });
</script>
```

## Markers

You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:

```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" columns={2} centered
<div class="card">
  <div class="card-body">
    <div class="ratio ratio-16x9">
      <div>
        <div id="map-world-markers" class="w-100 h-100"></div>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const map = new jsVectorMap({
      selector: "#map-world-markers",
      map: "world_merc",
      backgroundColor: "transparent",
      regionStyle: {
        initial: {
          fill: tabler.getColor("body-bg"),
          stroke: tabler.getColor("border-color"),
          strokeWidth: 2,
        },
      },
      zoomOnScroll: false,
      zoomButtons: false,
      markers: [
        {
          coords: [61.524, 105.3188],
          name: "Russia",
        },
        {
          coords: [56.1304, -106.3468],
          name: "Canada",
        },
        {
          coords: [71.7069, -42.6043],
          name: "Greenland",
        },
        {
          coords: [26.8206, 30.8025],
          name: "Egypt",
        },
        {
          coords: [-14.235, -51.9253],
          name: "Brazil",
        },
        {
          coords: [35.8617, 104.1954],
          name: "China",
        },
        {
          coords: [37.0902, -95.7129],
          name: "United States",
        },
        {
          coords: [60.472024, 8.468946],
          name: "Norway",
        },
        {
          coords: [48.379433, 31.16558],
          name: "Ukraine",
        },
      ],
      markerStyle: {
        initial: {
          r: 4,
          stroke: "#fff",
          opacity: 1,
          strokeWidth: 3,
          stokeOpacity: 0.5,
          fill: tabler.getColor("blue"),
        },
        hover: {
          fill: tabler.getColor("blue"),
          stroke: tabler.getColor("blue"),
        },
      },
      markerLabelStyle: {
        initial: {
          fontSize: 10,
        },
      },
      labels: {
        markers: {
          render: function (marker) {
            return marker.name;
          },
        },
      },
    });
    window.addEventListener("resize", () => {
      map.updateSize();
    });
  });
</script>
```