JSFiddle - React, Tailwind, and code Playground

by ham sheib

HTML

<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.world.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.europe.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.germany.js?v=1.0"></script>
<div id="vmap" style="width: 600px; height: 400px;"></div>

JavaScript

$(document).ready(function() {
    jQuery('#vmap').vectorMap({
      map: 'usa_en',
      enableZoom: true,
      showTooltip: true,
      selectedColor: null,
      hoverColor: null,
      backgroundColor: '#fffff',
      colors: {
        fl: '#016ea1',
        ma: '#016ea1',
        md: '#016ea1',  
        wa: '#016ea1',
        mn: '#016ea1',
        ny: '#016ea1',
        wi: '#016ea1',
        hi: '#016ea1',
        vt: '#016ea1',
        nv: '#016ea1',
        ia: '#016ea1',
        ca: '#016ea1',
        or: '#016ea1',
        nj: '#016ea1',
      },
onRegionClick: function(element, code, region)
{
        window.location = 'http://google.com/' + region;

},
            onLabelShow: function(event, label, code) {
            states =["fl",
        "ma",
        "md",  
        "wa",
        "mn",
        "ny",
        "wi",
        "hi",
        "vt",
        "nv",
        "ia",
        "ca",
        "or",
        "nj"]
                if (states.indexOf(code) <= -1) {
                    event.preventDefault();
                } else if (label[0].innerHTML == "Florida") {
                    label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
                }
            },
    });
});