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>Default map
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
<div class="ratio ratio-4x3">
<div>
<div id="map-empty" class="w-100 h-100"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const map = new jsVectorMap({
selector: '#map-empty',
map: 'world',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-border-color)',
strokeWidth: 2,
}
},
zoomOnScroll: false,
zoomButtons: false,
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
</script>Sample demo
Look at the example below to see how the vector map works with a world map.
<div class="ratio ratio-4x3">
<div>
<div id="map-world" class="w-100 h-100"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const map = new jsVectorMap({
selector: '#map-world',
map: 'world',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-border-color)',
strokeWidth: 2,
}
},
zoomOnScroll: false,
zoomButtons: false,
series: {
regions: [{
attribute: "fill",
scale: {
scale1: 'color-mix(in srgb, transparent, var(--tblr-primary) 10%)',
scale2: 'color-mix(in srgb, transparent, var(--tblr-primary) 20%)',
scale3: 'color-mix(in srgb, transparent, var(--tblr-primary) 30%)',
scale4: 'color-mix(in srgb, transparent, var(--tblr-primary) 40%)',
scale5: 'color-mix(in srgb, transparent, var(--tblr-primary) 50%)',
scale6: 'color-mix(in srgb, transparent, var(--tblr-primary) 60%)',
scale7: 'color-mix(in srgb, transparent, var(--tblr-primary) 70%)',
scale8: 'color-mix(in srgb, transparent, var(--tblr-primary) 80%)',
scale9: 'color-mix(in srgb, transparent, var(--tblr-primary) 90%)',
scale10: 'color-mix(in srgb, transparent, var(--tblr-primary) 100%)',
},
values: {
"AF": "scale2",
"AL": "scale2",
"DZ": "scale4",
"AO": "scale3",
"AG": "scale1",
"AR": "scale5",
"AM": "scale1",
"AU": "scale7",
"AT": "scale5",
"AZ": "scale3",
"BS": "scale1",
"BH": "scale2",
"BD": "scale4",
"BB": "scale1",
"BY": "scale3",
"BE": "scale5",
"BZ": "scale1",
"BJ": "scale1",
"BT": "scale1",
"BO": "scale2",
"BA": "scale2",
"BW": "scale2",
"BR": "scale8",
"BN": "scale2",
"BG": "scale2",
"BF": "scale1",
"BI": "scale1",
"KH": "scale2",
"CM": "scale2",
"CA": "scale7",
"CV": "scale1",
"CF": "scale1",
"TD": "scale1",
"CL": "scale4",
"CN": "scale9",
"CO": "scale5",
"KM": "scale1",
"CD": "scale2",
"CG": "scale2",
"CR": "scale2",
"CI": "scale2",
"HR": "scale3",
"CY": "scale2",
"CZ": "scale4",
"DK": "scale5",
"DJ": "scale1",
"DM": "scale1",
"DO": "scale3",
"EC": "scale3",
"EG": "scale5",
"SV": "scale2",
"GQ": "scale2",
"ER": "scale1",
"EE": "scale2",
"ET": "scale2",
"FJ": "scale1",
"FI": "scale5",
"FR": "scale8",
"GA": "scale2",
"GM": "scale1",
"GE": "scale2",
"DE": "scale8",
"GH": "scale2",
"GR": "scale5",
"GD": "scale1",
"GT": "scale2",
"GN": "scale1",
"GW": "scale1",
"GY": "scale1",
"HT": "scale1",
"HN": "scale2",
"HK": "scale5",
"HU": "scale4",
"IS": "scale2",
"IN": "scale7",
"ID": "scale6",
"IR": "scale5",
"IQ": "scale3",
"IE": "scale5",
"IL": "scale5",
"IT": "scale8",
"JM": "scale2",
"JP": "scale9",
"JO": "scale2",
"KZ": "scale4",
"KE": "scale2",
"KI": "scale1",
"KR": "scale6",
"KW": "scale4",
"KG": "scale1",
"LA": "scale1",
"LV": "scale2",
"LB": "scale2",
"LS": "scale1",
"LR": "scale1",
"LY": "scale3",
"LT": "scale2",
"LU": "scale3",
"MK": "scale1",
"MG": "scale1",
"MW": "scale1",
"MY": "scale5",
"MV": "scale1",
"ML": "scale1",
"MT": "scale1",
"MR": "scale1",
"MU": "scale1",
"MX": "scale7",
"MD": "scale1",
"MN": "scale1",
"ME": "scale1",
"MA": "scale3",
"MZ": "scale2",
"MM": "scale2",
"NA": "scale2",
"NP": "scale2",
"NL": "scale6",
"NZ": "scale4",
"NI": "scale1",
"NE": "scale1",
"NG": "scale5",
"NO": "scale5",
"OM": "scale3",
"PK": "scale4",
"PA": "scale2",
"PG": "scale1",
"PY": "scale2",
"PE": "scale4",
"PH": "scale4",
"PL": "scale10",
"PT": "scale5",
"QA": "scale4",
"RO": "scale4",
"RU": "scale7",
"RW": "scale1",
"WS": "scale1",
"ST": "scale1",
"SA": "scale5",
"SN": "scale2",
"RS": "scale2",
"SC": "scale1",
"SL": "scale1",
"SG": "scale5",
"SK": "scale3",
"SI": "scale2",
"SB": "scale1",
"ZA": "scale5",
"ES": "scale7",
"LK": "scale2",
"KN": "scale1",
"LC": "scale1",
"VC": "scale1",
"SD": "scale3",
"SR": "scale1",
"SZ": "scale1",
"SE": "scale5",
"CH": "scale6",
"SY": "scale3",
"TW": "scale5",
"TJ": "scale1",
"TZ": "scale2",
"TH": "scale5",
"TL": "scale1",
"TG": "scale1",
"TO": "scale1",
"TT": "scale2",
"TN": "scale2",
"TR": "scale6",
"TM": "scale1",
"UG": "scale2",
"UA": "scale4",
"AE": "scale5",
"GB": "scale8",
"US": "scale10",
"UY": "scale2",
"UZ": "scale2",
"VU": "scale1",
"VE": "scale5",
"VN": "scale4",
"YE": "scale2",
"ZM": "scale2",
"ZW": "scale1"
},
}]
}
});
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:
<div class="ratio ratio-4x3">
<div>
<div id="map-world-markers" class="w-100 h-100"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const map = new jsVectorMap({
selector: '#map-world-markers',
map: 'world_merc',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-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: .5,
fill: 'var(--tblr-red)'
},
hover: {
fill: 'var(--tblr-red)',
stroke: 'var(--tblr-red)'
}
},
markerLabelStyle: {
initial: {
fontSize: 10
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
},
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
</script>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:
<div class="ratio ratio-4x3">
<div>
<div id="map-world-lines" class="w-100 h-100"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const map = new jsVectorMap({
selector: '#map-world-lines',
map: 'world_merc',
backgroundColor: 'transparent',
regionStyle: {
initial: {
fill: 'var(--tblr-bg-surface-secondary)',
stroke: 'var(--tblr-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: .5,
fill: 'var(--tblr-primary)'
},
hover: {
fill: 'var(--tblr-primary)',
stroke: 'var(--tblr-primary)'
}
},
markerLabelStyle: {
initial: {
fontSize: 10
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
},
lines: [{
from: "Russia",
to: "Greenland"
},
{
from: "Russia",
to: "United States"
},
{
from: "Russia",
to: "Canada"
},
{
from: "Brazil",
to: "Norway"
},
{
from: "Brazil",
to: "Ukraine"
},
{
from: "Brazil",
to: "Egypt"
},
{
from: "Brazil",
to: "China"
},
],
lineStyle: {
strokeDasharray: "4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
</script>Table of Contents
