You store information in the variable highlight, and you clean the map with highlight2. It will not change the information in highlight so that when you trigger onRegionClick() it will change back to what you select. Use global variable to let the scope of highlight to cross two script, then...
Looking at the supplied CSS, it seems that the tooltips are called "labels". The CSS to edit (or override) is: .jqvmap-label { position: absolute; display: none; -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; } ...
javascript,jquery,cookies,jqvmap
On onRegionClick, you can already get the country code by using one of the parameters: code. So putting it altogether: jQuery(document).ready(function () { jQuery('#vmap').vectorMap( { map: 'world_en', backgroundColor: '#555555', ...etc.etc.... onRegionClick: function (element, code, region) { // here you already got the code // use it to save it to...
When I look at the source of your site and click on the links below, I get error 404 pages. So I guess that the relative path "js/" you use is incorrect. <script src="js/jquery.vmap.js" type="text/javascript"></script> <script src="js/jquery.vmap.world.js" type="text/javascript"></script> <script src="js/jquery.vmap.sampledata.js" type="text/javascript"></script> <script src="js/jqvmap.js" type="text/javascript"></script> ...
javascript,html,css,responsive-design,jqvmap
I would be inclined to use the CSS3 media queries. If you add a select with the ID vmapSelect: <style type="text/css"> #vmapSelect {display:none;} @media all and (max-width: 1000px) { #vmap {display:none;} #vmapSelect {display:block;} } </style> ...
According to the docs following function is correct $('#vmap').vectorMap('set', 'colors', states_colors); but setColors function which takes key and color as arguments. so i changed to following, it started working $('#vmap').vectorMap('set', 'colors', states[i], '#8EE5EE'); example : http://codepen.io/anon/pen/RPjJYb used following libraries for the site http://jqvmap.com/js/vmap/jquery.vmap.js?v=1.0 http://jqvmap.com/js/vmap/jquery.vmap.usa.js?v=1.0 ...
I solved this by making a function that appends divs to the div with ID vmap. The bad thing is that you have to get the coordinates of each state. The div must be positioned 'absolute'. For example: $("#vmap").append("<div class='info' style='top: " + coord[1] +"px; left: "+coord[0]+"px'>"+ "text you want...