javascriptjqueryjqvmap

jqvMap Custom Tooltips


I do realize that the other jqvMap custom tool tips topic was already answered, however, that solution did not work for me.

Here is my current jqvMap code for jQuery:

  jQuery(document).ready(function () {
    jQuery('#vmap').vectorMap({
      map: 'usa_en',
      enableZoom: true,
      showTooltip: true,
      selectedColor: null,
      hoverColor: null,
      backgroundColor: '#fffff',
      colors: {
        fl: '#016ea1',
        ma: '#016ea1',
        md: '#016ea1',  
        wa: '#016ea1',
        mn: '#016ea1',
        ny: '#016ea1',
        wi: '#016ea1',
        hi: '#016ea1',
        vt: '#016ea1',
        nv: '#016ea1',
        ia: '#016ea1',
        ca: '#016ea1',
        or: '#016ea1',
        nj: '#016ea1',
      },
onRegionClick: function(element, code, region)
{
        window.location = 'http://google.com/' + region;

},
            onLabelShow: function(event, label, code) {
                if (states.toLowerCase().indexOf(code) <= -1) {
                    event.preventDefault();
                } else if (label[0].innerHTML == "Colorado") {
                    label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
                }
            },
    });
  });

I tried using the code on the other topic with "onLabelShow" part however it just makes my tooltips disappear as a whole. Any solutions to this?

Thanks!

Links: https://github.com/manifestinteractive/jqvmap (jqvMap documentation) Custom Tooltips JQVMap (other topic)


Solution

  • If you take a look at your browser console you'll see that states variable is not defined at all. if you want to prevent tool-tip from showing on states that are not exist, you need to define states,if not, just remove the first if statement. the onLabelShow should look likes this:

    onLabelShow: function(event, label, code) {
            states =["fl","ma","md","wa","mn","ny","wi","hi","vt","nv","ia","ca","or","nj"];
            if (states.indexOf(code) <= -1) {
                event.preventDefault();
            } else if (label[0].innerHTML == "Florida") {
                label[0].innerHTML = label[0].innerHTML + " - The state where I live!!";
            }
        },
    });
    

    You can find a working sample Here

    hope that help.