Search code examples
javascriptjvectormap

How to show region name and Gdp value on placing cursor on any region of a world map which is shown in the popup?

Im using JvectorMap for creating world map.

My code is like this: 

var gdpData = {
  "AF": 16.63,
  "AL": 11.58,
  "DZ": 158.97,
  ...
};
$('#world-map-gdp').vectorMap({
  map: 'world_mill_en',
  series: {
    regions: [{
      values: gdpData,
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial'
    }]
  },
  onRegionLabelShow: function(e, el, code){
    el.html(el.html()+' (GDP - '+gdpData[code]+')');
  }
});

it is showing map like this: enter image description here

In the above map if im placing cursor on Russia REGION it is showing a tool tip country name and its Gdp count value like Russia(GDP-1476.91)

I have added a button somewhere else and On clicking of the btton im showing popup in that popup im displaying the same worldmap. But in that popup if im placing cursor on any region it is not showing Country name with GDP value..

can anyone help me pls..

Solution

  • Check your region name z-index, it might be less than your popup z-index, which is causing the region name to be hidden.