Show Custom Region Label on World jVectorMap

Question

I have a JSON code for A jvector Map WHich is as Follows :

[
 {"Country":"Australia","CountryCode":"AU","persons":"5"}, 
 {"Country":"Spain","CountryCode":"ES","persons":"2"}, 
 {"Country":"India","CountryCode":"IN","persons":"8"}, 
 {"Country":"Mexico","CountryCode":"MX","persons":"4"},
 {"Country":"United States","CountryCode":"US","persons":"4"}
]

The JVector Map fills the colors in the countries as per the data, but the Label on it only show the Country Name. I want to Show the no. of Persons also on the Country Label :

Here is the Script That I am Using :

<script type="text/javascript">
var dataC = <?php echo $data ?>;
var countryData = {};
$.each(dataC, function() {
countryData[this.CountryCode] = this.persons;
countryData[this.persons] = this.persons;
});

$(function() {
 $('#world-map').vectorMap({
 map: 'world_mill_en',
 series: {
    regions: [{
        values: countryData, //load the data
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial'}]
   },
   onRegionLabelShow: function(e, el, code) {
        //search through dataC to find the selected country by it's code
        var country = $.grep(dataC.countryData, function(obj, index) {
            return obj.CountryCode == code;
        })[0]; //snag the first one
        //only if selected country was found in dataC

            el.html(el.html() + 
                    "<br/><b>Code: </b>" +country.countryCode + 
                    "<br/><b>Percent: </b>" + country.persons + 
                    "<br/><b>Country Name: </b>"+ country.Country);

    }
});
});
</script>

All I want is to show the no. of persons on the Colored Label As in JSON

Answer 1

I am using this piece of code to display custom info:

onRegionTipShow: function(e, label, code){
//hovering disabled for disabled regions
if ( isCountryDisabled(code) )
    {
        e.preventDefault();
        label.html( '<b>'+label.html()+' - test</b>');
        return false;
    }
var country = getCountryDetails(code);
if(country === undefined) {
    label.html( '<b>'+label.html()+'</b>');
}else{
    label.html( '<b>'+label.html()+' - '+country.en+'</b>');
}
}

You can see that I have some function to check whether the country should display the custom label or not.I also have a function to get the details for country.

Basically you are calling onRegionLabelShow, I am using onRegionTipShow. But both should work. Probably you are passing some wrong data and there might be error. Try to create the label only with HTML (no variables), to see if you are able to modify it, once you are you can start playing with variables.