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.world.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.usa.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js"></script>
<select id="country">
  <option>click to set map...</option>
  <option value="world_en">World</option>
  <option value="usa_en">USA</option>
</select> 
<div id="container"></div>

JavaScript

var vmap = '<div id="vmap" style="width: 600px; height: 400px;"></div>';
$('#country').on('change', function () {
    var _map = $(this).val();
    $('#vmap').remove();
    $('#container').append(vmap);
    $('#vmap').vectorMap({
        map: _map,
        backgroundColor: null,
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial'
    });
});