Question

I am using a jVectorMap to display country values via coloring (i.e. countries are different colors based on their values). Everything works fine, except when certain countries are included in the data set. Then the countries do not get colored like they should (indeed, they don’t get colored at all).

I have identified Bahrain (BH) and Singapore (SG) as 2 of the countries/city-states which break the map. It looks as though these countries are not included on the map. I am not surprised by them not being there. However, I wish the map wouldn’t fail.

The JavaScript error of 'this.elements[...].element' is null or not an object lies on the following (see comment about failure in code below).

jvm.DataSeries.prototype={
    //...
    setValues:function(e){
        var t=Number.MIN_VALUE,n=Number.MAX_VALUE,r,i,s={};
        if(!this.params.min||!this.params.max){
            for(i in e)
                r=parseFloat(e[i]),r>t&&(t=e[i]),r<n&&(n=r);
            this.params.min||this.scale.setMin(n),this.params.max||this.scale.setMax(t),this.params.min=n,this.params.max=t
        }
        for(i in e)
            //FAILS ON THE FOLLOWING LINE
            r=parseFloat(e[i]),r?s[i]=this.scale.getValue(r):s[i]=this.elements[i].element.style.initial[this.params.attribute];
        this.setAttributes(s),this.values=e
    },
    //...
},

Is there a way to fix this issue? I’d rather NOT change the jVectorMap code, or have to do things like the following in my Java code:

if (!countryCode.equals("BH") && !countryCode.equals("SG")) {
    countryValues.put(countryCode, countryValue);
}

Answer 1

If you want to ensure that your data only has country codes that are found in your map, you could filter the data using the map country codes as your filter criteria before setting the data for the map.

You could define a method in which you pass in the data, iterate over each item and remove entries who’s country codes are not present in the map paths:

function filterDataForMap(data, mapName){
    var filteredData = {};
    $.each(data,function(key, value){
       //Only add when the key (country code) exists in the map
       if(jvm.WorldMap.maps[mapName].paths[key]!==undefined) {
          filteredData[key] = value;        
       }                
    });
    return filteredData;
}

Applied to the creation of a map:

$('#map').vectorMap({
        map: 'world_mill_en',
        series: {
          regions: [
            {
              scale: colorScale,
              attribute: 'fill',
              normalizeFunction: 'polynomial',
              values: filterDataForMap(mapData, 'world_mill_en') //filter data
            }]
        }
 });