JQVMap Hover reveal

Question

At the moment when I mouseover a country on JQVMap I get the country name. The code sources that name from the SVG file. In the SVG file the name is shown as:

"path":".93z","name":"Uruguay",

And in the JQVmap source code it is shown as

if (params.showTooltip) {
map.label.text(mapData.paths[code].name);
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);

What I want to do is add a small table that will be shown under the country name. I've tried to put an escape character to give me a new line and try allign it myself but it's looking to be harder then that. Is it possible to make another element like name called 'table' and call it in the source code or should I try include the information with the name element?

score 2 · Accepted Answer · answered Aug 08 '17 at 14:26

Basically, all what you need is to use the onLabelShow handler where you can override the default label text. Instead of that, you can put the markup you want and it will nicely rendered by JQVMap.

To reference your custom label content, use the .jqvmap-label selector.

$(function () {
    var vMap = $('#map').vectorMap({
        map: 'world_en',
        zoomOnScroll: false,
        hoverOpacity: 0.7,
        onLabelShow: function (event, label, code) {
          var countryName = label[0].innerHTML;
          var html = ['<table>',
            '<tr>',
              '<td>Name</td>',
              '<td>Code</td>',
            '</tr>',
            '<tr>',
              '<td>',
              countryName,
              '</td>',
              '<td>',
              code,
              '</td>',
            '</tr>',
          '</table>'
          ].join("");
          label[0].innerHTML = html;
        }
    });
});

.jqvmap-label table {
    border: solid 1px #CDCDCD;
    background: #444444;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

#map {
    width: 100%;
    height: 500px;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jquery.vmap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/maps/jquery.vmap.world.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqvmap/1.5.1/jqvmap.css" />
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Amazing, thank you!! I had given up on the prospect of getting an answer on this, really appreciate it, thanks! — Alec Davies, Aug 10 '17 at 07:04

JQVMap Hover reveal

1 Answers1