jVectorMaps - Two maps, change color

by katalin_2003

HTML

<link rel="stylesheet" href="https://sales.boonedam.fr/css/vendor/jvectormap/jquery-jvectormap-1.2.2.min.css">
<script src="https://sales.boonedam.fr/js/vendor/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="https://sales.boonedam.fr/js/jquery.vmap.france.min.js"></script>
<a href="#" id="color-changer" class="green">Change colors of Map Two</a>
<p>Map One</p>
<div style="width: 354px; height: 300px" id="ausieOne" data-projection="mill" data-name="au_mill_en"></div>
<p>Map Two</p>
<div style="width: 354px; height: 300px" id="ausieTwo" data-projection="mill" data-name="au_mill_en"></div>

CSS

p,
a {
  font: bold 10pt Arial, sans-serif;
  padding: 15px 0 0 3px;
}

a:link,
a:visited {
  color: #3377CC;
}

a:hover {
  color: #CC0000;
}

JavaScript

(function() {
  var myCustomColorsOne = {
    '40': '#4E7387',
    '80': '#333333',
    '59': '#89AFBF',
    '45': '#817F8E',
    '33': '#344B5E',
    '971': '#344B5E',
    '974': '#344B5E',
    '76': '#344B5E'
  };
  var myCustomColorsTwo = {
    '40': '#803300',
    '80': '#993D00',
    '59': '#B24700',
    '45': '#CC5200',
    '33': '#E65C00',
    '971': '#FF7519',
    '974': '#FF8533',
    '76': '#FFB280'
  };
  var myCustomColorsThree = {
    '40': '#B8E186',
    '80': '#B8E186',
    '59': '#B8E186',
    '45': '#B8E186',
    '33': '#B8E186',
    '971': '#B8E186',
    '974': '#B8E186',
    '76': '#B8E186'
  };

  var mapOne = new jvm.WorldMap({
    map: 'france_mill_fr',
    container: $('#ausieOne'),
    backgroundColor: '#EFF7FF',
    series: {
      regions: [{
        attribute: 'fill'
      }]
    }
  });

  var mapTwo = new jvm.WorldMap({
    map: 'france_mill_fr',
    container: $('#ausieTwo'),
    backgroundColor: '#EFF7FF',
    colors: '#3377CC',
    regionStyle: {
      initial: {
        fill: '#B8E186'
      }
    },
    series: {
      regions: [{
        attribute: 'fill'
      }]
    }
  });

  mapOne.series.regions[0].setValues(myCustomColorsOne);

  $("#color-changer").click(function() {
    var $that = $(this);
    if ($that.hasClass("green")) {
      $that.removeClass("green");
      mapTwo.series.regions[0].setValues(myCustomColorsTwo);
    } else {
      $that.addClass("green");
      mapTwo.series.regions[0].setValues(myCustomColorsThree);
    }
    return false;
  });

})();