jVectorMap: How do I add a class to the selected region?

Question

I have the below code:

onRegionClick: function (event, code) {
    // search for the state based on the code of the region clicked.
    for (var r = 0; r < mapData.stateList.length; r++) {
        if (mapData.stateList[r].state == code) {
            if (mapData.stateList[r].markets.length == 1) {
                // state only has one region - navigate to it.
                window.location = mapData.stateList[r].markets[0].url;
                break;
            } else {
                // state has multiple regions - zoom into it on the map and show the markets.
                $("#map-reset").show();
                $('.map-label').text('Click a city below to view communities in that area.');
                $('body').addClass('map-zoomed');
                showState(code);
                break;
            }
        }
    }
}

How would I add a class to the selected region? I have tried several routes based on similar questions found through Google and Stack Overflow to no avail. Any help is greatly appreciated.

Answer 1

Check my way to fix it:

http://pastebin.com/s5GwcEMy

i add this method "setSelectedRegionStyle"

You need get reference to the map:

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

After you can set your custom color:

map.setSelectedRegionStyle('IT', '#b2c9cb'); 

In my case only need change the color, but you can use the firebug to check the another options.

This is the added method (Check in the pastbin)

setSelectedRegionStyle : function (r,c) {
return this.regions[r].element.style.selected.fill = c;
},