JSFiddle - React, Tailwind, and code Playground

base para JQVMap

by brasofilo

HTML

<script src="http://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.world.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js"></script>
<script src="http://www.demo.gr/map/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<h3 class="fiddle-header">Testing jQvMap</h3>
<div class="hold_it">
    <div class="holder">
        <div id="vmap"></div>
    </div>
</div>

CSS

body {
    background: #33383b url("http://upload.wikimedia.org/wikipedia/commons/e/e1/Small_wooden_twigs.jpg");
    overflow: hidden;
}
.fiddle-header {
    background-color: #ccc;
    margin:0 0 10px 0;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
}
#vmap {
    z-index: -1000;
    width: 700px;
    height: 350px;
}
.holder {
    width: 700px;
    height: 350px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    border: dashed 3px #829db2;
    background-color:#a4bed9;
    background-image: -webkit-linear-gradient(#9bb3cf 1px, transparent 1px), -webkit-linear-gradient(0, #9bb3cf 1px, transparent 1px);
    -moz-linear-gradient(#9bb3cf 1px, transparent 1px), -moz-linear-gradient(0, #9bb3cf 1px, transparent 1px);
    background-size:44px 44px;
}
.hold_it {
    padding: 6px;
    background: #fff;
    display: inline-block;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    top:50%;
    left:50%;
    margin:-160px -350px;
    border-radius: 4px;
}


.jqvmap-label {
    background: rgba(0, 0, 0, .7);
    position: absolute;
    display: none;
    -webkit-box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    -moz-box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    color: white;
    font: 11px"Helvetica Neue", Helvetica, Sans;
    padding: 5px 10px 5px 8px;
    z-index: 2000;
}
.jqvmap-label:before {
    margin-right: 5px;
    content:'';
    background: transparent;
    display: inline-block;
    border-radius: 14px 14px 14px 0;
    width: 4px;
    height: 4px;
    border: 3px solid #f33;
   ...

JavaScript

// Original in this fork
var obj_1 = {
    map: 'world_en',
    backgroundColor: null,
    borderColor: '#829db2',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegion: null,
    showTooltip: true
};

// Test links
var obj_2 = {
    map: 'africa_en',
    backgroundColor: '#D1EEEE',
    color: '#c9dfaf',
    hoverColor: '#999999',
    showTooltip: true,
    selectedColor: '#9CBA7F',
    multiSelectRegion: true,
    selectedRegions: ['AO', 'ZA', 'MG', 'NA', 'ZW', 'ZM', 'UG', 'TZ', 'KE', 'RW', 'MW', 'MZ', 'BW'],
    onRegionClick: function (event, code, region) {
        console.log(code)
        switch (code) {
            case "mg":
                alert('Brasil!'); //window.location = "http://www.google.com";
                break;
            case "ug":
                alert('Espa!'); //window.location = "http://www.yahoo.com";
                break;
            case "za":
                alert('Cana!'); //window.location = "http://www.bing.com";
                break;
        }
        // tells the click where to go ->   window.location = "http://www.google.com/";
    }
}

var obj_3 = {
    map: 'world_en',
    backgroundColor: '#fff',
    borderColor: '#bbb',
    borderOpacity: 1,
    borderWidth: .2,
    color: '#bbb',
    //colors: colored_regions,
    hoverOpacity: 0.8,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial',
    onLabelShow: function (event, label, code) {
        if (code == 'ca') {
            event.preventDefault();
        } else if (code == 'ru') {
            label.text('Bears, vodka, balalaika');
        }
    },
    onRegionOver: function (element, code, region) {
        //highlightRegionOfCountry(code);
    },
    onRegionOut:...