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/​