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;
}
}
});
});