tabler.tabler/docs/content/ui/components/vector-maps.md

---

title: Vector Maps docs-libs: [jsvectormap, jsvectormap-world, jsvectormap-world-merc] 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:

<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="{{ cdnUrl }}/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:

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

{% capture html -%}

<div class="ratio ratio-16x9">
  <div>
    <div id="map-world" class="w-100 h-100"></div>
  </div>
</div>

{%- endcapture %} {% include "docs/example.html" html=html %}

Markers

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

{% capture html -%}

<div class="ratio ratio-16x9">
  <div>
    <div id="map-world-markers" class="w-100 h-100"></div>
  </div>
</div>

{%- endcapture %} {% include "docs/example.html" html=html %}