Getting country name from jVectormap World Map

5.3k Views Asked by At

How i can get name of clicked country from jVectormap?

I using simple code, added alert to show the name of clicked country but doesn't work.

jQuery('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: '#e9e9e7',
    color: '#dfdfdd',
    hoverOpacity: 0,
    selectedColor: '#5f8b98',
    hoverColor: '#5f8b98',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#dfdfdd'],
    onRegionClick: function (event, code) {
    var map = $('#vmap').vectorMap('get', 'mapObject');
    var name = map.getRegionName(code);
    //ADDED ALERT TO SHOW NAME OF CLICKED COUNTRY
    alert(name);
    },
    normalizeFunction: 'polynomial'
});

Here is the documentation of using script:
http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/

2

There are 2 best solutions below

1
On

What does "it does not work" mean? Do you get an error? Or what do you get in the alert?

Not tested, but you could try to do it this way:

var mymap = new jvm.WorldMap({
  container: $('#vmap'),
  ...
  onRegionClick: function (event, code) {
    alert(mymap.getRegionName(code));
  }
});
0
On

Use this

 onRegionClick:function(event, code) {                        
        var name = (code);                        
        alert(name);                    
        }

All Script

    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#e9e9e7',
        color: '#dfdfdd',
        hoverOpacity: 0,
        selectedColor: '#5f8b98',
        hoverColor: '#5f8b98',
        enableZoom: true,
        showTooltip: true,
        values: sample_data,
        scaleColors: ['#dfdfdd'],
        //alert
        onRegionClick:function(event, code) {                         
        var name = (code);                        
        alert(name);                    
        },
        normalizeFunction: 'polynomial'
    });