jVectorMap label is not visible, why?

Question

I created a slider panel with a trigger on a webpage. On this panel I placed the jVectorMap. It works fine (the map is visible when I open the slider panel) just the Country labels are not visible. Anybody knows why?

Code parts:

        $(".trigger").click(function(){
                $(".panel").toggle("fast");
                $(this).toggleClass("active");
                return false;
    });


        colors = {};
        colors['it'] = '#76ced9';
        $('#map').vectorMap({
            map: 'europe_en',
            //map: 'jquery-jvectormap-europe-en',
            onLabelShow: function(event, label, code){
                if (code == 'it') {
                    event.preventDefault();
                } else if (code == 'it') {
                    label.text('bla bla bal');
                }
            },              

            colors: colors,
            hoverOpacity: 0.7, // opacity for :hover
            hoverColor: false
        });

Here is how the panel is created(I removed some parts to so you can see the code):

<div class="panel" style="z-index:10;">
    <h3>Our Destinations</h3>
    <div id="map" style="width: 600px; height: 550px;"></div>    

<a class="trigger" href="#">Map</a>

I was thinking that maybe since the panel is over the html it is possible that the label is not visible because it is behind but I could not figure out where to put the z-index:10; But it is possible that the problem is something else. If you have a sharp eye and mind you might give me a great suggestion. Thanx, K

Rope

Answer 1

Did you by any chance lose the jquery.vector-map.css stylesheet in the process? This would cause the labels and zoom buttons to disappear.

Heads

thank you for your answer! No I have the zoom buttons and they work perfectly. <pre><code><link href="<?=INST_URI;?>plugins/jquery.vector-map/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" /> <script src="<?=INST_URI;?>plugins/jquery.vector-map/jquery.vector-map.js" type="text/javascript"></script> <script src="<?=INST_URI;?>plugins/jquery.vector-map/europe-en.js" type="text/javascript"></script></code></pre> ' – Ugly

Maybe if this map is on top of a slide panel the label is not visible becouse it is in a lower layer? If yes what can I do? – Ugly

Answer 2

you can set z-index=11 in jquery-jvectormap-1.2.2.css as follows:

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
    z-index:11;
 }

Tesstessa

the class is .jvectormap-tip in 2.0.1 version – Evita

Answer 3

I was having the same issue with a combination of slider and jvectormap. But instead of changing the z-index of .jvectormap-label, I had to change the z-index of .jvectormap-tip.

Patsy