Maps (JSVectorMap)
A lightweight JavaScript library for creating interactive maps and pretty data visualization.
JSVectorMap documentationHow to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./node_modules/jsvectormap/dist/css/jsvectormap.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="@@autopath/node_modules/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="@@autopath/node_modules/jsvectormap/dist/maps/world.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="./assets/js/hs.jsvector-map.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF VECTOR MAP
// =======================================================
HSCore.components.HSJsVectorMap.init('.js-jsvectormap')
})();
</script>
Basic example
<!-- JSVector Map -->
<div style="height: 20.5rem;">
<div class="js-jsvectormap jsvectormap-custom"
data-hs-js-vector-map-options='{
"regionStyle": {
"initial": {
"fill": "#bdc5d1"
},
"hover": {
"fill": "#77838f"
}
},
"backgroundColor": "#fff",
"markerStyle": {
"initial": {
"stroke-width": 2,
"fill": "@@themeAppearance.styles.colors.primary",
"stroke": "#fff",
"stroke-opacity": 1,
"r": 6
},
"hover": {
"fill": "@@themeAppearance.styles.colors.primary",
"stroke": "@@themeAppearance.styles.colors.primary"
}
}
}'>
</div>
</div>
<!-- End JSVector Map -->
Custom with tags
<!-- Vector Map -->
<div style="height: 30rem;">
<div class="js-jsvectormap jsvectormap-custom"
data-hs-js-vector-map-options='{
"focusOn": {
"coords": [25, 12],
"scale": 1.5,
"animate": true
},
"regionStyle": {
"initial": {
"fill": "rgba(55, 125, 255, .3)"
},
"hover": {
"fill": "@@themeAppearance.styles.colors.primary"
}
},
"backgroundColor": "#132144",
"markerStyle": {
"initial": {
"stroke-width": 2,
"fill": "rgba(255,255,255,.5)",
"stroke": "rgba(255,255,255,.5)",
"r": 6
},
"hover": {
"fill": "#fff",
"stroke": "#fff"
}
}
}'>
</div>
</div>
<!-- End Vector Map -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF VECTOR MAP
// =======================================================
const markers = [
{
"coords": [38, -97],
"name": "United States",
"active": 200,
"new": 40,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg",
"code": "US"
},
{
"coords": [20, 77],
"name": "India",
"active": 300,
"new": 100,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/in.svg",
"code": "IN"
},
{
"coords": [60, -105],
"name": "Canada",
"active": 400,
"new": 500,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/ca.svg",
"code": "CA"
},
{
"coords": [51, 9],
"name": "Germany",
"active": 120,
"new": 600,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg",
"code": "DE"
},
{
"coords": [54, -2],
"name": "United Kingdom",
"active": 140,
"new": 100,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg",
"code": "GB"
},
{
"coords": [1.3, 103.8],
"name": "Singapore",
"active": 56,
"new": 0,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/sg.svg",
"code": "SG"
},
{
"coords": [9.0, 8.6],
"name": "Nigeria",
"active": 34,
"new": 2,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/ng.svg",
"code": "NG"
},
{
"coords": [61.5, 105.3],
"name": "Russia",
"active": 135,
"new": 46,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/ru.svg",
"code": "RU"
},
{
"coords": [35.8, 104.1],
"name": "China",
"active": 325,
"new": 75,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg",
"code": "CN"
},
{
"coords": [-10, -51],
"name": "Brazil",
"active": 242,
"new": 17,
"flag": "@@autopath/node_modules/flag-icon-css/flags/1x1/br.svg",
"code": "BR"
}
];
const tooltipTemplate = function(marker) {
return `
<span class="d-flex align-items-center mb-2">
<img class="avatar avatar-xss avatar-circle" src="${marker.flag}" alt="Flag">
<span class="h5 ms-2 mb-0">${marker.name}</span>
</span>
<div class="d-flex justify-content-between" style="max-width: 10rem;">
<strong>Active:</strong>
<span class="ms-2">${marker.active}</span>
</div>
<div class="d-flex justify-content-between" style="max-width: 10rem;">
<strong>New:</strong>
<span class="ms-2">${marker.new}</span>
</div>
`;
};
HSCore.components.HSJsVectorMap.init('.js-jsvectormap', {
markers,
onRegionTooltipShow(map, tooltip, code) {
let marker = markers.find(function (marker) {
return marker.code === code;
});
if (marker) {
tooltip._tooltip.style.display = null;
tooltip._tooltip.innerHTML = tooltipTemplate(marker);
} else {
tooltip._tooltip.style.display = 'none';
}
},
onMarkerTooltipShow: function (map, tooltip, code) {
tooltip._tooltip.style.display = null;
tooltip._tooltip.innerHTML = tooltipTemplate(markers[code]);
},
backgroundColor: HSThemeAppearance.getAppearance() === 'dark' ? '#25282a' : '#132144'
})
})()
</script>