7

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

Community
  • 1
  • 1
Big Al Ruby Newbie
  • 834
  • 1
  • 10
  • 30
  • That fiddle’s difficult to work with: it complains about the ` – Honore Doktorr Jun 10 '15 at 20:28
  • you can access my page directly @ http://www.transportunl.com 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 Jun 10 '15 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 Jun 10 '15 at 20:37
  • Clear link is working fine for me. whats the problem? – Anthony Jun 11 '15 at 05:02
  • after you click the clear link try to select another state. it will highlight all the other states too... – Big Al Ruby Newbie Jun 11 '15 at 13:53

2 Answers2

4

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.

North
  • 1,434
  • 1
  • 12
  • 21
  • `highlight1` goes with `omap` Origin map and `highlight2` goes with `dmap` Destination map. they are 2 seperate maps on same page. – Big Al Ruby Newbie Jun 11 '15 at 13:52
  • Your jsfiddle is working correctly... and that is what i want – Big Al Ruby Newbie Jun 11 '15 at 13:59
  • I will award the points when it will allow me too. that was a simple fix. now i just need to seperate out a different one for Origin and one for destination that is why i had it as a local variable. but will figure it out. – Big Al Ruby Newbie Jun 11 '15 at 14:12
  • Are you success now? If you still have any problems, ask it. I don't see the website you designed updated. – North Jun 11 '15 at 14:45
  • I have it incorporated locally i will push it live in a few minutes.. i just duplicated the function and seperated the highlights completely... still have an hour before i can award the points – Big Al Ruby Newbie Jun 11 '15 at 15:20
3

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');
Oleksii Kyslytsyn
  • 2,458
  • 2
  • 27
  • 43