JSFiddle - React, Tailwind, and code Playground

by Matt Coubrough

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) {
                    	
                    }
});



/**
 * method to add an orientated label to a map region
 */
function addOrientatedLabel(regionName) {
    var angleInDegrees = getAngleInDegreesFromRegion(regionName);
    var map = $('#world-map').vectorMap('get', 'mapObject');
    var coords = map.getRegionCentroid(regionName);
    var svg = document.getElementsByTagName('g')[0]; 
    var newText = document.createElementNS("http://www.w3.org/2000/svg","text");
   ...