2

I'd like to set individual region and hover colors for the JVectorMap plugin, and leave regions without data the default white.

So far, I've stripped out the scale data and replaced it with color codes (as shown in the code below). This is awesome, but I don't know how to also add in hover data.

If possible, I'd also like to add in data for document.body.style.cursor, so that I can turn off individual regions (where, for instance, the entity is blocked from doing trade), so that it doesn't appear to be an active link.

You'll also note I've got code to open a panel in there. It's for displaying a full popup div with individualized content for each region I have data for. It's inherited code, so to be honest I'm not sure how it works.

If I've forgotten anything, please let me know.

jQuery.noConflict();
jQuery(function(){
    var $ = jQuery;   
    $('#map_custom').vectorMap({
        map: 'world_mill_en',   
        backgroundColor : "#b8b8b8",
        regionStyle : {
            initial : {
                fill : "white",
                "fill-opacity" : 1,
                stroke : "none",
                "stroke-width" : 0,
                "stroke-opacity" : 1
            },
            hover : {
                "fill-opacity": 0.7,
            },
            selectedHover : {}
        },
        onRegionOver: function (event, code, region) {
            document.body.style.cursor = "pointer";
        },
        onRegionOut: function (element, code, region) {
            document.body.style.cursor = "default";

        },  
        onRegionClick: function(event, code, region){   
            if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'}
                if (code == "US") {window.location = 'CalRamic-distributors-USA.html'}
                    if (code == "IE") {
                        $(".panel").hide("fast");
                        $("#ireland").show("slow");   
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "GB") {
                        $(".panel").hide("fast");
                        $("#unitedkingdom").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "ES") {
                        $(".panel").hide("fast");
                        $("#spain").show("slow");     
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "PT") {
                        $(".panel").hide("fast");
                        $("#portugal").show("slow");      
                        document.getElementById('test_data').innerHTML=code;
                    }
                    if (code == "IL") {
                        $(".panel").hide("fast");
                        $("#israel").show("slow");    
                        document.getElementById('test_data').innerHTML=code;
                    }   
        // I've got a LOT more countries in my code, but you don't need all of them
        else if (code){
            event.preventDefault();     
        }
    },      
    series: {
        regions: [{
            values: sample_data
        }]
    }
});

  /* Close the Panel */
        $("body").click(function(e) {       
            if (e.target.id == "close" || $(e.target).parents("#close").size()) 
            {               
                 $(".panel").hide("slow");
            }
        });

})

Currently this code pulls the color data from the sample_data.js file, which is formatted like:

    var sample_data = {
      "CA": '#0071a4',
      "US": '#0071a4',
      "IE": '#0071a4',
      "GB": '#0071a4',
      "ES": '#0071a4',
    }

I have gotten pretty far for a novice thanks to the community here, but I've been asked to go farther with jvectormap than I ever have before. And sadly, I'm only dangerous with this programming code, so I'm reaching out to the experts.

4

1 回答 1

0

首先，这只是一个建议，你应该摆脱疯狂的 if 逻辑，使其成为一个泛化的函数。

例如：

function panelHandler(element, hideSpeed, showSpeed){
  $('.panel').hide(hideSpeed);
  $(element).show(showSpeed);
  $('#test_data').innerHTML('code');
}

if (code == "IE") {
    panelHandler("#unitedKingdom", "slow", "fast");
}

if (code == "GB") {
   panelHandler("#spain", "slow", "fast");
}

etc...

至于您的问题，只需相应地附加您想要的课程设置即可。然后在事件中检查它，并像这样执行它：

$('#selector').css('cursor', 'pointer');

希望这会有所帮助。如果您需要更详细的信息，请告诉我，我可以提供帮助。

于 2013-05-03T02:01:17.977 回答