JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://shakeuplab.it/QuadernoCampagna/css/jquery-jvectormap-2.0.1.css">
<script src="http://shakeuplab.it/QuadernoCampagna/js/jquery-jvectormap-2.0.1.min.js"></script>
<script src="http://shakeuplab.it/QuadernoCampagna/js/mappa/mappa_completa.js"></script>
<div id="world-map" style="height: 500px; width: 100%;"></div>
JavaScript
$('#world-map').vectorMap({
map: 'completa',
zoomMax: 20,
hoverColor: false,
hoverOpacity: 0,
regionsSelectable: true,
regionSelectableOne: false,
regionStyle: {
initial: {
stroke: 'black',
"stroke-width": 1
},
selected: {
fill: 'grey'
},
hover: {
fill: "grey"
}
},
series: {
regions: [{
attribute: 'fill'
}]
},
onRegionLabelShow: function(e, label, code){
if (label.html() === '') {
e.preventDefault();
} else {
if(code === 'id0'){
return false ; // if mouse over on 'US' region it will stop further events. like disable
} else {
}
}
},
onRegionSelected: function(e, code, selected, currentSel){
},
onViewportChange: function (e, scale) {
}
});
$(document).ready(function(){
var map = $('#world-map').vectorMap('get', 'mapObject');
var coords = map.getRegionCentroid("C1902");
var svg = document.getElementsByTagName('g')[0]; //Get svg element
var newText = document.createElementNS("http://www.w3.org/2000/svg","text");
newText.setAttribute("x", coords[0]);
newText.setAttribute("y", coords[1]);
newText.setAttribute("font-size","4");
...