CODEWITHSUNDEEP
jqueryjvectormap
Aaron
Aaron

Reputation: 545

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

Upvotes: 0

Views: 8723

Answers (2)

Roy
Roy

Reputation: 987

Adding a pointer style to regions can be achieved with an easy css fix:

path.jvectormap-region {
    cursor: pointer;
}

Upvotes: 0

Mike Vranckx
Mike Vranckx

Reputation: 5577

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

Upvotes: 3

Related Questions