Jqvmap programming

Question

I am using the plugin jqvmap http://www.jqvmap.com/.

What I would like to do with my map is have a list of countries below it and do so that when someone hovers one of the listed countries, the matching county gets highlighted (ie.changes color) on the map.

An example of the result I would like to achieve is visible here: http://www.supermagnete.ch/eng/select_country.php?origin=conditions

Here, when a user hovers a country on the list, the matching country gets highlighted on the map. It goes both ways: when a user hovers a country on the map, it gets highlighted on the list.

Here is my HTML code so far:

<div id="vmap" style="width: 680px; height: 520px;"></div>
<div id="links"><ul><li><a href="CH" onclick="return false;">Switzerland</a></li><li><a href="FR" onclick="return false;">France</a></li></ul></div>

And this is how I initialized my map in jQuery:

jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: false,
        showTooltip: true,
        backgroundColor: '#cccccc'
    });
 });

But now I have no idea how to achieve this both-ways highlighting result. Does anyone have an idea?

Lexib0y · Answer 1 · 2014-11-22T18:38:36.937

0

You can manipulate individual paths.

You need to know the ID of the path first. The API generated ID's automatically, the first map is called 'jqvmap1_pathname', etc. The pathname is the country/region code. Just use firebug to check what the id's are in your case, just to be sure.

Than you can just add a simple function like this to any id or class:

jQuery('#links').mouseover(function(){
    jQuery('#jqvmap1_mc').attr('style', 'fill:#f00');
});

edited Nov 22 '14 at 18:38

answered Nov 18 '14 at 15:05

Lexib0y

519
10
27

Actualy, there are these event available in the API: onLabelShow: 'labelShow', onRegionOver: 'regionMouseOver', onRegionOut: 'regionMouseOut', onRegionClick: 'regionClick', onRegionSelect: 'regionSelect', onRegionDeselect: 'regionDeselect' You can find them in jquery.vmap.js – Lexib0y Nov 19 '14 at 21:46
This trick works well when I want an item from the list to highlight at the same time as the element from the map. However, my real concern is to make it work the other way: how do I highlight a country from the map when I hover a country from the list? The onLabelShow event does not seem to fit my needs for that. – Mluce194 Nov 20 '14 at 14:27
I found it, works on my page. Please let me know if it works for you. – Lexib0y Nov 20 '14 at 20:42

score 0 · Answer 2 · answered Oct 23 '15 at 23:40

Old post, but when I stumbled on it, it sounded like a fun little test project so I set one up. You can view this working here - http://jqvdemo.beta-sites.com/

Basically the idea I went with is to give your label names (US States in my case) an id that matches the the map code. So for example <h4 id="ca">California</h4>

Then on Document.Ready add a listener for hover over any item in your list which will set the color on whatever state matches the two digit code from your item being hovered over

$("#stateList h4").hover(
    function () {
        var code = $(this).attr('id');
        $('#vmap').vectorMap('set', 'colors', { [code]: '#0000ff' });
    }, function () {
        var code = $(this).attr('id');
        $('#vmap').vectorMap('set', 'colors', { [code]: '#f4f3f0' });
    }
);

Then on the map onRegionOver & onRegionOut events, do the opposite by setting the label item that matches the id of the hovered state.

onRegionOver: function (event, code, region) {
    $("#"+code).css("color", "yellow");
},
onRegionOut: function (event, code, region) {
    $("#" + code).css("color", "#000");
}

check it out

Jqvmap programming

2 Answers2