Vector Maps

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="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/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.

Markers

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