jqVmap select entire regions on hover and click, with class toggle

Question

I'm trying to expand on jqvmaps using a solution on StackOverflow (https://stackoverflow.com/a/21825653/5580153) about selecting entire regions instead of individual countries.

The goal:

1 - I'm trying to make a set of div's grow and shrink as you roll over the regions on the map (i.e. africa, south east asia, etc). The entire region should highlight and the correct div should add/remove a class which changes it's styling.

2 - Additionally, when the region is clicked/selected, the added class should remain until it's unclicked.

3 - The inverse should also happen, when you roll over the div, the associated region should highlight. I've removed the fiddling I've done for that from my codepen, as what I'd done prevented the entire map from loading... It's not the highest of priority right now but would be 'nice'.

The issue: I had the entire region highlighting for a brief period, however for some reason it's setting itself back to highlighting just individual countries. I tried stripping out my modifications until it went back to this behavior, but can't pinpoint what I've done.

I need some help working out what I've done incorrectly so that the entire region goes back to highlighting? Also, I can't seem to make the onRegionSelect function work the way I've intended it to.

var countryMap = {

"bs":"caribbean",
"dm":"caribbean",
"ag":"caribbean",
"ds":"caribbean",
"bb":"caribbean",
"cu":"caribbean",
"dn":"caribbean",
"do":"caribbean",
"gd":"caribbean",
"ht":"caribbean",
"jm":"caribbean",
"kn":"caribbean",
"lc":"caribbean",
"tt":"caribbean",

"bi": "Africa",
"km": "Africa",
"dj": "Africa",
"er": "Africa",
"et": "Africa",
"ke": "Africa",
"mg": "Africa",
"mw": "Africa",
"mu": "Africa",
"mz": "Africa",
"re": "Africa",
"rw": "Africa",
"sc": "Africa",
"so": "Africa",
"ug": "Africa",
"tz": "Africa",
"zm": "Africa",
"zw": "Africa",
"ao": "Africa",
"cm": "Africa",
"cf": "Africa",
"td": "Africa",
"cg": "Africa",
"cd": "Africa",
"gq": "Africa",
"ga": "Africa",
"st": "Africa",
"dz": "Africa",
"eg": "Africa",
"ly": "Africa",
"ma": "Africa",
"sd": "Africa",
"tn": "Africa",
"bw": "Africa",
"ls": "Africa",
"na": "Africa",
"za": "Africa",
"sz": "Africa",
"bj": "Africa",
"bf": "Africa",
"cv": "Africa",
"ci": "Africa",
"gm": "Africa",
"gh": "Africa",
"gn": "Africa",
"gw": "Africa",
"lr": "Africa",
"ml": "Africa",
"mr": "Africa",
"ne": "Africa",
"ng": "Africa",
"sn": "Africa",
"sl": "Africa",
"tg": "Africa",

"by": "centralAsiaEasternEurope",
"bg": "centralAsiaEasternEurope",
"cz": "centralAsiaEasternEurope",
"hu": "centralAsiaEasternEurope",
"pl": "centralAsiaEasternEurope",
"md": "centralAsiaEasternEurope",
"ro": "centralAsiaEasternEurope",
"ru": "centralAsiaEasternEurope",
"sk": "centralAsiaEasternEurope",
"ua": "centralAsiaEasternEurope",

"cn":"southEastAsia",
"kp":"southEastAsia",
"jp":"southEastAsia",
"mn":"southEastAsia",
"kr":"southEastAsia",
"bn":"southEastAsia",
"kh":"southEastAsia",
"tl":"southEastAsia",
"id":"southEastAsia",
"la":"southEastAsia",
"my":"southEastAsia",
"mm":"southEastAsia",
"ph":"southEastAsia",
"th":"southEastAsia",
"vn":"southEastAsia",
"pg":"southEastAsia",
"fj":"southEastAsia",
"sb":"southEastAsia",
"vu":"southEastAsia",
"nc":"southEastAsia",
"tw":"southEastAsia",

"bz": "latinAmerica",
"cr": "latinAmerica",
"sv": "latinAmerica",
"gt": "latinAmerica",
"hn": "latinAmerica",
"mx": "latinAmerica",
"ni": "latinAmerica",
"pa": "latinAmerica",
"ar": "latinAmerica",
"bo": "latinAmerica",
"br": "latinAmerica",
"cl": "latinAmerica",
"co": "latinAmerica",
"ec": "latinAmerica",
"fk": "latinAmerica",
"gy": "latinAmerica",
"gf": "latinAmerica",
"pe": "latinAmerica",
"py": "latinAmerica",
"sr": "latinAmerica",
"uy": "latinAmerica",
"ve": "latinAmerica",

"af": "southAsia",
"bd": "southAsia",
"bt": "southAsia",
"in": "southAsia",
"ir": "southAsia",
"kz": "southAsia",
"kg": "southAsia",
"mv": "southAsia",
"np": "southAsia",
"pk": "southAsia",
"lk": "southAsia",
"tj": "southAsia",
"tm": "southAsia",
"uz": "southAsia",

"az": "middleEast",
"am": "middleEast",
"cy": "middleEast",
"ge": "middleEast",
"iq": "middleEast",
"il": "middleEast",
"jo": "middleEast",
"kw": "middleEast",
"lb": "middleEast",
"om": "middleEast",
"qa": "middleEast",
"sa": "middleEast",
"sy": "middleEast",
"tr": "middleEast",
"ae": "middleEast",
"ye": "middleEast",

"ca": "OECD",
"gl": "OECD",
"us": "OECD",
"au": "OECD",
"nz": "OECD",
"pf": "OECD",
"dk": "OECD",
"ee": "OECD",
"fi": "OECD",
"is": "OECD",
"ie": "OECD",
"lv": "OECD",
"lt": "OECD",
"no": "OECD",
"se": "OECD",
"gb": "OECD",
"al": "OECD",
"ba": "OECD",
"hr": "OECD",
"gr": "OECD",
"it": "OECD",
"mt": "OECD",
"pt": "OECD",
"si": "OECD",
"es": "OECD",
"mk": "OECD",
"rs": "OECD",
"at": "OECD",
"be": "OECD",
"fr": "OECD",
"de": "OECD",
"nl": "OECD",
"ch": "OECD",

};
var regionMap = {
"caribbean" : {
    "countries" : ["bs", "dm", "ag", "ds", "bb", "cu", "dn", "do", "gd", "ht", "jm", "kn", "lc", "tt"],
    "name" : "Caribbean"
},
"centralAsiaEasternEurope" : {
    "countries" : ["by", "bg", "cz", "hu", "pl", "md", "ro", "ru", "sk", "ua"],
    "name" : "Central-Asia-Eastern-Europe"
},
"southEastAsia" : {
    "countries" : ["bn", "kh", "tl", "id", "la", "my", "mm", "ph", "th", "vn","cn", "kp", "jp", "mn", "kr","fj","sb","vu", "nc","pg","tw"],
    "name" : "East-Asia-South-East-Asia"
},
"southAsia" : {
    "countries" : ["af", "bd", "bt", "in", "ir", "kz", "kg", "mv", "np", "pk", "lk", "tj", "tm", "uz"],
    "name" : "South-Asia"
},
"middleEast" : {
    "countries" : ["az", "am", "cy", "ge", "iq", "il", "jo", "kw", "lb", "om", "qa", "sa", "sy", "tr", "ae", "ye"],
    "name" : "Middle-East"
},
"Africa" : {
    "countries" : ["bj", "bf", "cv", "ci", "gm", "gh", "gn", "gw", "lr", "ml", "mr", "ne", "ng", "sn", "sl", "tg","bw", "ls", "na", "za", "sz","bi", "km", "dj", "er", "et", "ke", "mg", "mw", "mu", "mz", "re", "rw", "sc", "so", "ug", "tz", "zm", "zw","ao", "cm", "cf", "td", "cg", "cd", "gq", "ga", "st","dz", "eg", "ly", "ma", "sd", "tn","bw", "ls", "na", "za", "sz"],
    "name" : "Sub-Saharan-Africa"
},
"latinAmerica" :{
    "countries" : ["bz", "cr", "sv", "gt", "hn", "mx", "ni", "pa","ar", "bo", "br", "cl", "co", "ec", "fk", "gy", "gf", "pe", "py", "sr", "uy", "ve"],
    "name" : "Latin-America"
},
"OECD" : {
    "countries" : ["dk", "ee", "fi", "is", "ie", "lv", "lt", "no", "se", "gb","al", "ba", "hr", "gr", "it", "mt", "pt", "si", "es", "mk", "rs","at", "be", "fr", "de", "nl", "ch","ca", "gl", "us","au", "nz", "pf"],
    "name" : "Northern-Europe"
}
};

// helper functions

function getRegion(cc) {
var regionCode = countryMap[cc];
return regionMap[regionCode];
};

function getCountriesInRegion(cc) {
for (var regionKey in regionMap)
{
    var countries = regionMap[regionKey].countries;
    for (var countryIndex in countries)
    {
        if (cc == countries[countryIndex])
        {
            return countries;
        }
    }
}
};

function highlightRegionOfCountry (cc) {
  var countries = getRegion(cc).countries;
  var countryName = getRegion(cc).name;

  for (countryIndex in countries)
  {
    $('#vmap').vectorMap('highlight',countries[countryIndex]);
  }

  $('#vmap').vectorMap('highlight',cc);
  // console.log(countryName);
  $("."+countryName).addClass('grow');

    };

    function unhighlightRegionOfCountry (cc) {
  var countries = getRegion(cc).countries;
  var countryName = getRegion(cc).name;

  for (countryIndex in countries)
  {
    $('#vmap').vectorMap('unhighlight',countries[countryIndex]);
  }

  $('#vmap').vectorMap('unhighlight',cc);
 $("."+countryName).removeClass('grow');
};


jQuery(document).ready(function() {

  // region data



        // render map
        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#fff',
            color: '#ffffff',
            borderOpacity: 0.1,
            hoverOpacity: 0.7,
            selectedColor: '#666666',
            scaleColors: ['#dedede', '#0e6a9e'],
            selectedColor: '#118cd1',
            values: sample_data,
            normalizeFunction: 'polynomial',
            enableZoom: false,
            showTooltip: true,
       // grow percentage box and highlight region
            onRegionOver : function (element, code, region)
            {
                highlightRegionOfCountry(code);
            },
  // ungrow percentage box and highlight region 
            onRegionOut : function (element, code, region)
            {
                unhighlightRegionOfCountry(code);
            },
    // Toggle percentage block on/off on click
        onRegionSelect : function (element, code, region)
            {
                highlightRegionOfCountry(code);
            }

        });
    });

A codepen is available here: http://codepen.io/anon/pen/mOrOjP

I know it's a little messy, though any help would certainly be appreciated! Thanks!

Answer 1

I was facing same issue in angular, following code works for me:

ngOnInit():void {
    var prototype:any=SVGPathElement.prototype;
    prototype.setOpacity =function(value:number) {

    }
    prototype.getFill = function() {

    }
    prototype.setFill = function(color:string) {

    }
}