Chimini Chimini - 1 month ago 9
CSS Question

Showing Countries on mouse hover JQVmap

hello I had recently downlaoded the JQVmap from Github and I am making a website kind of like the old Carmen Sandiego game.
I have seen on some sites that use this map that they have labels of countries when hovering with your mouse.
I read to the best of my knowledge on how to do this on the files I got from the JQVmap github site but with no success.

Thanks...
I am not sure if this is the right code to put in but here goes

jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#a12200', '#343bbb'],
normalizeFunction: 'polynomial',

});
});


thanks

Answer

The code is correct I think. Check following pen.

http://codepen.io/praveenvijayan/pen/XbMBRg

jQuery('#vmap').vectorMap({
   map: 'world_en',
   backgroundColor: null,
   color: '#ffffff',
   hoverOpacity: 0.7,
   selectedColor: '#666666',
   enableZoom: true,
   showTooltip: true,
   scaleColors: ['#C8EEFF', '#006491'],
   normalizeFunction: 'polynomial'
});

You have to include : http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0 http://jqvmap.com/js/vmap/jquery.vmap.world.js?v=1.0

and since value is added you have to provide sample data.

http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js?v=1.0

Comments