Aaron Aaron - 6 months ago 75
jQuery Question

jvectormap Show label and hand cursor on specific regions

I have been trying to findout how to change the cursor to the hand for specific regions and show the label for only those regions.

I have this but am at a loss of how to do this. Can someone please help?

$(function(){
var RColor = '#007cc4'
var activeRegions = [
"al", "an", "ey", "gh", "ic", "ke", "mu", "mz", "na", "ni", "za", "tz", "tu", "ug"
];
$('#africa-map').vectorMap({
map: 'africa',
backgroundColor: 'transparent',
zoomOnScroll: false,
zoomButtons : false,
regionStyle: {
initial: {
fill: '#b7bdc3',
scaleColors: ['#b7bdc3', '#a2aaad'],
"fill-opacity": 1,
stroke: '#a2aaad',
"stroke-width": 2,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: '#a2aaad'
},
selectedHover: {
fill: '#a2aaad'
}
},
series: {
regions: [{values: {
"al" : RColor,
"an" : RColor,
"ey" : RColor,
"gh" : RColor,
"ic" : RColor,
"ke" : RColor,
"mu" : RColor,
"mz" : RColor,
"na" : RColor,
"ni" : RColor,
"za" : RColor,
"tz" : RColor,
"tu" : RColor,
"ug" : RColor
},
attribute: 'fill'
}]
},
onRegionClick: function(event, code)
{
if (code == "al") {window.location = '$AC:MENUURL:2918$'}
if (code == "an") {window.location = '$AC:MENUURL:2922$'}
if (code == "ey") {window.location = '$AC:MENUURL:2919$'}
if (code == "gh") {window.location = '$AC:MENUURL:2937$'}
if (code == "ic") {window.location = '$AC:MENUURL:2918$'}
if (code == "ke") {window.location = '$AC:MENUURL:2923$'}
if (code == "mu") {window.location = '$AC:MENUURL:2924$'}
if (code == "mz") {window.location = '$AC:MENUURL:2925$'}
if (code == "na") {window.location = '$AC:MENUURL:2926$'}
if (code == "ni") {window.location = '$AC:MENUURL:2927$'}
if (code == "tz") {window.location = '$AC:MENUURL:2929$'}
if (code == "tu") {window.location = '$AC:MENUURL:2930$'}
if (code == "ug") {window.location = '$AC:MENUURL:2931$'}
if (code == "za") {window.location = '$AC:MENUURL:2928$'}
},
onRegionOver: function(event, code)
{
var mouseX;
var mouseY;
$('path.jvectormap-region.jvectormap-element').mousemove( function(e) {
var offset = $('#africa-map').offset();
mouseX = e.pageX- (offset.top)+20;
mouseY = e.pageY- (offset.top)-25;
$(".region-info-box."+code).css({'top':mouseY,'left':mouseX});
});
$(".region-info-box").hide();
$(".region-info-box."+code).css({'top':mouseY,'left':mouseX}).fadeIn('fast');
}
});
});


There is a
onRegionOver
but am at a loss to get it show the hand cursor and labels for only the regions listed above.

Here is a jsfiddle for this http://jsfiddle.net/a9Xj6/2/ enter link description here

Answer

Indeed, you can make use of the onRegionOver event and also onRegionLabelShow for the label manipulation. Returning false in callback will stop the execution of the function, in this case we can stop execution of the label rendering when hovering a region.

To change the cursor to a hand, you can accomplish it using javascript.

document.body.style.cursor = 'pointer';

Some sample code to help you further:

var regionResults = {
    "AL" : RColor,
    "AN" : RColor,
    "EY" : RColor,
    "GH" : RColor,
    "IC" : RColor,
    "KE" : RColor,
    "MU" : RColor,
    "MZ" : RColor,
    "NA" : RColor,
    "NI" : RColor,
    "ZA" : RColor,
    "TZ" : RColor,
    "TU" : RColor,
    "UG" : RColor
};

new jvm.WorldMap({
    // your map settings
    series: {
        regions: [{
            values: regionResults,
            attribute: 'fill'
        }]
    },
    onRegionOver: function(e, code) {
        if (regionResults.hasOwnProperty(code)) {
            // the hovered region is part of the regionResults, show hand cursor
            document.body.style.cursor = 'pointer';
        }
    },
    onRegionOut: function(e, code) {
        // return to normal cursor
        document.body.style.cursor = 'default';
    },
    onRegionLabelShow: function(e, label, code) {
        if (!regionResults.hasOwnProperty(code)) {
            // the hovered region is not part of the regionResults, don't show the label
            e.preventDefault();
            return false;
        }
    }
});

Update #1

Here is the update of your code by integrating your 2 questions.

$(function() {
    var RColor = '#007cc4',
        activeRegions = {
            "AL" : RColor,
            "AN" : RColor,
            "EY" : RColor,
            "GH" : RColor,
            "IC" : RColor,
            "KE" : RColor,
            "MU" : RColor,
            "MZ" : RColor,
            "NA" : RColor,
            "NI" : RColor,
            "ZA" : RColor,
            "TZ" : RColor,
            "TU" : RColor,
            "UG" : RColor
        };

    $('#africa-map').vectorMap({
        map: 'africa',
        backgroundColor: 'transparent',
        zoomOnScroll: false,
        zoomButtons: false,
        regionStyle: {
            initial: {
                fill: '#b7bdc3',
                scaleColors: ['#b7bdc3', '#a2aaad'],
                "fill-opacity": 1,
                stroke: '#a2aaad',
                "stroke-width": 2,
                "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 0.8
            },
            selected: {
                fill: '#a2aaad'
            },
            selectedHover: {
                fill: '#a2aaad'
            }
        },
        series: {
            regions: [{
                values: activeRegions,
                attribute: 'fill'
            }]
        },
        onRegionClick: function(event, code)
        {
            code = code.toLowerCase();

            if (code == "al") {
                window.location = '$AC:MENUURL:2918$';
            }
            if (code == "an") {
                window.location = '$AC:MENUURL:2922$';
            }
            if (code == "ey") {
                window.location = '$AC:MENUURL:2919$';
            }
            if (code == "gh") {
                window.location = '$AC:MENUURL:2937$';
            }
            if (code == "ic") {
                window.location = '$AC:MENUURL:2918$';
            }
            if (code == "ke") {
                window.location = '$AC:MENUURL:2923$';
            }
            if (code == "mu") {
                window.location = '$AC:MENUURL:2924$';
            }
            if (code == "mz") {
                window.location = '$AC:MENUURL:2925$';
            }
            if (code == "na") {
                window.location = '$AC:MENUURL:2926$';
            }
            if (code == "ni") {
                window.location = '$AC:MENUURL:2927$';
            }
            if (code == "tz") {
                window.location = '$AC:MENUURL:2929$';
            }
            if (code == "tu") {
                window.location = '$AC:MENUURL:2930$';
            }
            if (code == "ug") {
                window.location = '$AC:MENUURL:2931$';
            }
            if (code == "za") {
                window.location = '$AC:MENUURL:2928$';
            }
        },
        onRegionOver: function(event, code)
        {
            if (activeRegions.hasOwnProperty(code)) {
                // the hovered region is part of the regionResults, show hand cursor
                document.body.style.cursor = 'pointer';
            }

            var mouseX;
            var mouseY;
            $('path.jvectormap-region.jvectormap-element').mousemove(function(e) {
                var offset = $('#africa-map').offset();
                mouseX = e.pageX - (offset.top) + 20;
                mouseY = e.pageY - (offset.top) - 25;
                $(".region-info-box." + code).css({'top': mouseY, 'left': mouseX});
            });
            $(".region-info-box").hide();
            $(".region-info-box." + code).css({'top': mouseY, 'left': mouseX}).fadeIn('fast');
        },
        onRegionOut: function(e, code) {
            // return to normal cursor
            document.body.style.cursor = 'default';
        },
        onRegionLabelShow: function(e, label, code) {
            if (!activeRegions.hasOwnProperty(code)) {
                // the hovered region is not part of the regionResults, don't show the label
                e.preventDefault();
                return false;
            }
        }
    });
});