Question

I have just started to use jVectorMap. I want to be able to select country with a click and keep the selected country colored until the user selects a new country. Cannot figure out what I am doing wrong here?

$(function () {
    function showSelectedCountry(event, code) {
        viewModel.selectedCountry(code);
        $('#map').vectorMap('set', 'colors', {code: '#f00' });
    }

    $('#map').vectorMap({
        hoverColor: '#f00',
        backgroundColor: '#C8C8C8',
        onRegionClick: showSelectedCountry
    });
});

Answer 1

I ran into what I suspect was the same problem. I was setting the colour as you were, but this colour would not persits. It turns out the regionMouseOut was reseting the ‘selected’ colour back to its original value. Try preventing default action on regionMouseOut for your selected country, or setting the colour again on mouse out (I could only get the later to work for me).

// Prevent selected country colour being changed on mouseOut event 
$('#map').bind('regionMouseOut.jvectormap', function(event, code){
    if( code == selectedCountry ) {
        var data = {};
        data[code] = "#0000ff";
        $("#map").vectorMap("set", "colors", data);
    }
});

Something else I ran into: ‘code’ was being passed as a string instead of the var value. You may need to modify your original slightly:

$(function () {
    function showSelectedCountry(event, code) {
        viewModel.selectedCountry(code);
        var data = {};
        data[code] = "#f00";            
        $('#map').vectorMap('set', 'colors', data);
    }

    $('#map').vectorMap({
        hoverColor: '#f00',
        backgroundColor: '#C8C8C8',
        onRegionClick: showSelectedCountry
    });
});