Showing Countries on mouse hover JQVmap

Question

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

score 1 · Answer 1 · answered Nov 02 '16 at 11:30

1

You code is true. May be, you don't connect file:

<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">

answered Nov 02 '16 at 11:30

Denis Doroshchuk

11
3

This does in fact provide an answer to the question. Without the css relating to the class ".jqvmap-label", the default tooltip doesn't have style and doesn't appear. – Aaron Lavers Nov 11 '16 at 03:24

score 0 · Accepted Answer · answered Jun 04 '15 at 07:44

0

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

answered Jun 04 '15 at 07:44

Praveen Vijayan

6,521
2
29
28

Ok I copied all the code from the URL's you gave me and replaced over the original code from the files I had downloaded I made sure I put the correct code into correct files etc and the map dissappears... – Chimini Jun 04 '15 at 10:34
Are you running this locally (file://) ?, then this may not work properly. Run using the file from server. Due to security/ cross origin policy it won't work from machine. Still have issue share the file pls. – Praveen Vijayan Jun 04 '15 at 10:53

Showing Countries on mouse hover JQVmap

2 Answers2