CODEWITHSUNDEEP
javascriptjvectormap
Jenny Pettersson
Jenny Pettersson

Reputation: 261

jVectorMap change color at onRegionClick

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

Upvotes: 1

Views: 5341

Answers (2)

Alex Odenthal
Alex Odenthal

Reputation: 211

Bit late, but for those still searching (like I did) the event is called 

onRegionOver: function(e,code){e.preventDefault();}

It's not (no longer?) regionMouseOut

Upvotes: 0

Andy Place
Andy Place

Reputation: 388

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

Upvotes: 2

Related Questions