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 mand 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

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 mand 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

• javascript
• jquery
• jqvmap

• That fiddle’s difficult to work with: it plains about the <script> tags on any edits to the HTML area, the external jqvmap resources are loaded in the wrong order (I see TypeError: jQuery.fn.vectorMap is not a function on page load), and is @HardCode’s patch included in the scripts you’re linking from jqvmap.? Fixing those things up would probably yield more help… – Honore Doktorr Commented Jun 10, 2015 at 20:28
• you can access my page directly @ transportunl. just create a username and password... anything and it will take you to my search... it is on the left either origin or destination... I would give demo creditials but not sure how many people would wanna try... – Big Al Ruby Newbie Commented Jun 10, 2015 at 20:33
• everything is incorporated on my website it is still being developed... so database will be cleared when finished. if you need to see the text box with the selected states... change the hidden field to text. it is right below the map. – Big Al Ruby Newbie Commented Jun 10, 2015 at 20:37
• Clear link is working fine for me. whats the problem? – Anthony Commented Jun 11, 2015 at 5:02
• after you click the clear link try to select another state. it will highlight all the other states too... – Big Al Ruby Newbie Commented Jun 11, 2015 at 13:53

2 Answers 2

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.

I just added this function to library

setSelectedRegions: function(keys){
    for (var key in this.countries) {
        this.deselect(key, undefined);
    }
    var array = keys.split(",");

    for (i=0;i<array.length;i++) {
        //alert(array[i])
        this.select(array[i], undefined);
    }
},

and used it later as

jQuery('#vmap').vectorMap('set', 'selectedRegions', 'gb,us');