Using custom regions with JQVmap

Question

I am using JQVmap (https://github.com/manifestinteractive/jqvmap) to output a map on a site. Instead of doing something when you hover each country, I want them to be grouped into regions. For example, instead of Canada, US & Mexico, I would like all three to show the hover state when you hover over any of them and make a grouping of countries. I have seen multiple posts on how to color sets of countries, but each country still has its own hover state then and doesn't trigger the hover state of the other countries with the same color. Any ideas?

Answer 1

I was working on a project and needed to do this. Here's how I did it.

1. Define the regions you want.
2. Add helper methods to highlight/unhighlight countries of all countries in a region.
3. Add these helper methods as the "onRegionOver" and "onRegionOut" methods of the map.

Step 1.

Here is how I defined regions.

var regionMap = {
        "southAmerica" :{
        "countries" : ["ar", "bo", "br", "cl", "co", "ec", "fk", "gy", "gf", "pe", "py", "sr", "uy", "ve"],
        "name" : "South America"
    },
        "northAmerica" :{
        "countries" : ["ca", "gl", "us"],
        "name" : "Northern America"
    }
}; //And so on...

I also added a map and a method for for reverse lookup.

var countryMap = {
    "ca":"northAmerica",
    "gl":"northAmerica",
    "us":"northAmerica",
}; //And so on...
function getRegion(cc) {
    var regionCode = countryMap[cc];
    return regionMap[regionCode];
}

Alternatively, you can avoid the reverse lookup map and write a function instead:

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

Step 2

Helper methods for highlighting/unhighlighting regions:

function highlightRegionOfCountry (cc) {
    var countries = getRegion(cc).countries;
    for (countryIndex in countries)
    {
        $('#vmap').vectorMap('highlight',countries[countryIndex]); 
    }
    $('#vmap').vectorMap('highlight',cc);
}

function unhighlightRegionOfCountry (cc) {
    var countries = getRegion(cc).countries;
    for (countryIndex in countries)
    {
        $('#vmap').vectorMap('unhighlight',countries[countryIndex]);    
    }
    $('#vmap').vectorMap('unhighlight',cc);
}

Step 3.

Adding registering the helper methods to the map's hover events.

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.2,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        onRegionOver : function (element, code, region)
        {
            highlightRegionOfCountry(code);
        },
        onRegionOut : function (element, code, region)
        {
            unhighlightRegionOfCountry(code);
        }
    });
});

tl;dr: Use these:

$('#vmap').vectorMap('highlight', countryCode);

and

$('#vmap').vectorMap('unhighlight', countryCode); 

The regions I needed for my project were the regions defined by the UN. You can take a look at my fork of JVQmap on GitHub. The file you'll want to look at is /jqvmap/maps/jquery.vmap.un_regions.js.

I hope this helps!