JSFiddle - React, Tailwind, and code Playground

by piyush saraf

HTML

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

JavaScript

$(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: null,
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        values: sample_data,
        normalizeFunction: 'polynomial',
        onRegionClick: function (event, code, region) {
            alert('You clicked on ' + region);
        }
    });
});