javascriptjvectormap

jVectorMap get the value of the clicked region


I have a jVectorMap created with the following code

var vmap = $('#world-map').vectorMap({
    regionsSelectable: true,
    regionsSelectableOne: true,
    series: {
        regions: [{
            scale: ['#cccccc', '#0A6EB4'],
            values: datasource
        }]
    },
    onRegionClick: function (event, code) {
        // if the value of the clicked region is ==1 do something 
    },
    backgroundColor: '#fff',
    focusOn: {
        lat: -0.015, lng: 15,
        x: 0,
        y: 0,
        scale: 1.9
    }
});

where datasource is defined like this:

 countriesBgColors1 = {"AF": 1,"AL": 0,"DZ": 1,"AO": 0, ... }

The values are all 1 or 0. The data is retrieved using AJAX

In the function onRegionClick I'd like to execute the code only if the value of the clicked region is ==1, how can I do it?

It seems there is no way to retrieve it, unless I loop through the whole datasource


Solution

  • I believe the answer is simpler as You may think. No need to loop here, as You are receiving Your data as an object:

    onRegionClick: function (event, code) {
        var countryData = countriesBgColors1[code];
        switch(countryData) {
          case 0:
            // do something
            break;
          case 1:
            // do something else
            break;
        }
    },
    

    As You are assigning Your data to the map series regions, the above code will be equivalent to:

    onRegionClick: function (event, code) {
        var countryData = vmap.series.regions[0].values[code];
        switch(countryData) {
          case 0:
            // do something
            break;
          case 1:
            // do something else
            break;
        }
    },
    

    Hope this helps.