JSFiddle - React, Tailwind, and code Playground

by Alfred Mey

HTML

<script src="http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0"></script>
<script 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.js?v=1.0"></script>
	<script type="text/javascript" src="http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0"></script>

<script>
    function search_map_clear(field, map) {
    var states = $('#search_' + field + '_states');
    var sel_states = states.val();
    var highlight2 = [];
    $.each(sel_states.split(','), function (i, code) {
        highlight2[code] = '#f4f3f0';
        $('#' + map).vectorMap('set', 'colors', highlight2);
    });
    states.val("");
    }
</script>


<a id="ClearOriginStates" href="#" onclick="search_map_clear('origin', 'omap'); return false;">Clear</a>
<div id="omap" style="width: 175px; height: 116px;"></div>
<input type="text" id="search_origin_states" name="search[origin_states]">

JavaScript

$(document).ready(function() {

    var highlight = [];
    jQuery('#omap').vectorMap(
        {
            map: 'usa_en',
            backgroundColor: '#fff',
            borderColor: '#000',
            borderWidth: 4,
            color: '#f4f3f0',
            enableZoom: false,
            hoverColor: '#fece2f',
            hoverOpacity: null,
            normalizeFunction: 'linear',
            scaleColors: ['#b6d6ff', '#005ace'],
            selectedColor: '#db9b15',
            selectedRegion: null,
            showTooltip: true,
            multiSelectRegion: true,
            onRegionClick: function(element, code, region) {
                if(highlight[code]!=='#db9b15'){
                    highlight[code]='#db9b15';
                    origin = $('#search_origin_states');
                    states = origin.val();
                    if (states == ""){
                        origin.val(code);
                    } else {
                        origin.val(states + "," + code);
                    }
                } else {
                    highlight[code]='#f4f3f0';
                    states = origin.val();
                    if (states.indexOf(","+code) >= 0) {
                        states = states.replace(","+code,"");
                        origin.val(states);
                    } else if (states.indexOf(code+",") >= 0){
                        states = states.replace(code+",","");
                        origin.val(states);
                    } else {
                        states = states.replace(code,"");
                        origin.val(states);
                    }
                }
                $('#omap').vectorMap('set', 'colors', highlight);
            }
        });
});