JQVMAP selected regions deselect with JSFIDDLE Demo

Ok I have a JQVMAP that I have on my site to select states for a search box. Everything worked great until I added my Clear function.

I also had to incorporate the patch from member HardCode Link to the patch

Found the solution, change line 466 in jqvmap.js file to:

regionClickEvent = $.Event('regionClick.jqvmap');

jQuery(params.container).trigger(regionClickEvent, [code, mapData.pathes[code].name]);

This is how I initialize it:

// with this Code it will select states and change the color of selected states plus save the codes of selected states into a hidden field

$('#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);
        }
    });

I use to have to click each state to clear it. But I wrote a script to clear all in one click.

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("");
}

This will change all colors back to the original color, but apparently it does not clear the selectedRegions because after clearing if I select any other state all the states that I changed back to original color show back up.

My Question is:

How can I clear the selected states so were I can select different ones without clicking on every state that was selected prior

UPDATE

I have been able to run this command from the console and I can select and deselect states... But it will not deselect a state that was clicked on to select.

$('#omap').vectorMap('select', 'ar');

$('#omap').vectorMap('deselect', 'ar');

I need to clear out the states that have been clicked on...

Here is my jsFiddle that will show you what is happening:

JSFIDDLE DEMO

Solution

You store information in the variable highlight, and you clean the map with highlight2. It will not change the information in highlight so that when you trigger onRegionClick() it will change back to what you select.

Use global variable to let the scope of highlight to cross two script, then replace highlight2 by highlight and remove highlight2 declation.

See jsfiddle here, I think this is what you want.