Search code examples
javascriptjqueryjvectormap

Redirect to another page when I click on a country using jvector map

I'm using a jQuery plugin called jVectorMap. Specifically I'm using this map: http://jvectormap.com/maps/world/world/

Every country has a uniquedata-code e.g. ES for Spain but I'm unable to access it. For example I've done the following jQuery code:

$('path').on('click', function(){
    var country = $(this).data('code');
    console.log(country);
});

does nothing. here's the HTML so it should be working.

<path d="asiunaowifh" data-code="ES"
fill="#333" fill-opacity="1" stroke="none" 
stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element" 
cursor="pointer">
</path>

any idea why not? if someone could look at the documentation or give some advice thad be great.

Solution

  • If you look in the documentation, there is a special option for the vectorMap() called onRegionClick which works: 

    $('#map').vectorMap({
    map: 'world_mill', 
    onRegionClick: function(event, code) {
        console.log(code);
    }
});