title: Jvectormap - Set hover color for each region?
body: <p>I'd like to set individual region <em>and</em> hover colors for the JVectorMap plugin, and leave regions without data the default white.  </p>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>If I've forgotten anything, please let me know.</p>
  
  <pre><code>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");
              }
          });
  
  })
  </code></pre>
  
  <p>Currently this code pulls the color data from the sample_data.js file, which is formatted like:</p>
  
  <pre><code>    var sample_data = {
        "CA": '#0071a4',
        "US": '#0071a4',
        "IE": '#0071a4',
        "GB": '#0071a4',
        "ES": '#0071a4',
      }
  </code></pre>
  
  <p>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.</p>