country code conversion issue in jvector map

Question

I am trying to use jvectormap and it takes input in the format ISO 3166-1 alpha-2 country codes.

My input is in the form of country names. I have checked for name to code converters in JavasSript, but there are not any.

I was wondering how the conversion is possible, so that I can match my input with the jvectormap input. Any ideas?

Check the link: http://jsfiddle.net/sprugman/fkRnC/7/

The jvectormap input model is like

var gdpData = {
"US": 25,
"CA": 50,
"RU": 100,
"AO": 200,
"AG": 200,
"AR": 400,
"BR":200 
 };

and also is google geochart better than this one??

Answer 1

You can generate a new map keyed off the country names using the world_mill_en map and the country name values from the name properties:

//Clone the world map that uses ISO-2 keys
var countriesByName = $.extend(true, {}, jvm.WorldMap.maps['world_mill_en']);

countriesByName.paths = {}; //clear the paths

$.each(jvm.WorldMap.maps['world_mill_en'].paths, function(key, obj){
   //create new path entries, keyed by the country name
   countriesByName.paths[obj.name] = obj; 
});  

//Add this new data map, to be loaded
$.fn.vectorMap('addMap', 'world_mill_en_byName',countriesByName);

Then load your data keyed off country names and reference the newly created map:

//data with country name as key
var gdpData = {
    "United States of America": 25,
    "Canada": 50,
    "Russia": 100,
    "Angola": 200,
    "Argentina": 400
};

$(function() {
    $('#map').vectorMap({
        map: 'world_mill_en_byName', //load up the map with country name as key
        backgroundColor: '#eeeeee',
        regionStyle: {
            initial: {
                fill: '#cccccc'
            }
        },
        series: {
            regions: [{
                values: gdpData,
                scale: ['#C8EEFF', '#0071A4'],
                min: 0,
                max: 400,
                normalizeFunction: 'polynomial'}]
        },
        hoverOpacity: 0.7,
        hoverColor: false
    });

    var mapObj = $('#map').vectorMap('get', 'mapObject');
    var steps = 4;
    for (var i = 0; i <= steps; i++) {
        var val = 400 / steps * i;
        var color = mapObj.series.regions[0].scale.getValue(val);
        $('#key').append('<div style="background-color:' + color + ';">' + val + ' - ' + color + '</div>');
    }
});

Applied to the jsfiddle that you had posted: http://jsfiddle.net/hansenmc/fkRnC/8/​

Answer 2

It's a common request, but it's really hard to solve this problem once and forever just because there are numerous variants to write the names of the countries and even country region. So the solution here could be converting of the names of the countries to country codes using data from wikipedia or any other source.