jVectomap - show/hide regions

by katalin_2003

HTML

<script src="https://sales.boonedam.fr/js/vendor/jvectormap/jquery-jvectormap-1.2.2.js"></script>
<script src="https://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<div id="map" style="width:500px;height:300px">&nbsp;</div>

<div id="map-toggle-buttons">
  <button class="togglemap" duranDuran="High" style="background-color:#990000">High</button>
  <button class="togglemap" duranDuran="Medium" style="background-color:#ffcc00">Medium</button>
  <button class="togglemap" duranDuran="Low" style="background-color:#005c00">Low</button>
  <button class="togglemap" duranDuran="[ALL]" style="background-color:Grey">All</button>
</div>
<button id="redraw" duranDuran="High">High Redraw</button>

JavaScript

var map;

var duranDuran = "[ALL]"

var mapData = {
  DE: {
    Name: "Germany",
    Quantity: 27,
    Color: "#005c00",
    DuranDuran: "Low"
  },
  RU: {
    Name: "Russia",
    Quantity: 4,
    Color: "#990000",
    DuranDuran: "High"
  },
  FR: {
    Name: "France",
    Quantity: 17,
    Color: "#ffcc00",
    DuranDuran: "Medium"
  },
  IN: {
    Name: "India",
    Quantity: 8,
    Color: "#990000",
    DuranDuran: "High"
  },
  AL: {
    Name: "Albania",
    Quantity: 6,
    Color: "#990000",
    DuranDuran: "High"
  },
  AU: {
    Name: "Australia",
    Quantity: 25,
    Color: "#005c00",
    DuranDuran: "Low"
  },
  BE: {
    Name: "Belgium",
    Quantity: 30,
    Color: "#005c00",
    DuranDuran: "Low"
  },
  US: {
    Name: "United States",
    Quantity: 21,
    Color: "#005c00",
    DuranDuran: "Low"
  },
  GE: {
    Name: "Georgia",
    Quantity: 11,
    Color: "#ffcc00",
    DuranDuran: "Medium"
  },
  LS: {
    Name: "Lesotho",
    Quantity: 6,
    Color: "#990000",
    DuranDuran: "High"
  },
  CN: {
    Name: "China",
    Quantity: 17,
    Color: "#ffcc00",
    DuranDuran: "Medium"
  }
};

var regionStyling = {
  initial: {
    fill: '#999999'
  }
};

function getColors(dd) {
  var colors = {};

  if (dd == "[ALL]") {
    $.each(mapData, function(code, val) {
      console.log(code, val.Color);
      colors[code] = val.Color;
    });
  } else {
    $.each(mapData, function(code, val) {
      console.log(code, val.DuranDuran, val.Color);
      var rl = val.DuranDuran;
      if (rl == dd) {
        colors[code] = val.Color;
      }
    });
  }

  console.log("Colors to show for", duranDuran, "duranDuran", JSON.stringify(colors));

  return colors;
}

function drawMap() {
  $("#map").empty();

  map = new jvm.WorldMap({
    container: $('#map'),
    map: 'world_mill_en',
    zoomOnScroll: true,
    regionStyle: regionStyling,
    backgroundColor: "#ffffff",
    series: {
      regions: [{
        normalizeFunction: 'polynomial'
      }]
    }
  });

 ...