JVectorMap icon not showing, why?

Question

I created a slider panel with a trigger on a web page. In this panel, I placed jVectorMap. It works fine (the map is visible when I open the slider panel), only Country shortcuts are not visible. Does anyone know why?

Code Elements:

$(".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 }); 

This is how the panel is created (I deleted some parts 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 thought it was possible, since the panel is above the html, it is possible that the shortcut is not visible because it is behind, but I could not figure out where to put z-index: 10; But perhaps the problem is different. If you have a keen eye and mind, you can give me a great suggestion. Thanx, K

Answer 1

Have you accidentally lost the jquery.vector-map.css table in the process? This will cause the shortcuts and zoom buttons to disappear.

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; } 

Answer 3

I had the same problem with a combination of slider and jvectormap. But instead of changing the z-index of the .jvectormap tag, I had to change the z-index of the .jvectormap-tip.