Africa - Highmaps

Highmaps demo

by Geo George

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/africa.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var reg={
  "Central Africa": [
    "Central African Republic",
    "Chad"
  ],
  "Eastern Africa": [
    "Ethiopia",
    "Rwanda",
    "Sudan",
    "Uganda"
  ],
  "Northern Africa": [
    "Egypt"
  ],
  "Southern Africa": [
    "Botswana",
    "Madagascar",
    "Mozambique",
    "Namibia",
    "South Africa",
    "Seychelles",
    "Zimbabwe"
  ],
  "Western Africa": [
    "Benin",
    "Burkina Faso",
    "Côte d’Ivoire",
    "Ghana",
    "Guinea",
    "Liberia",
    "Mali",
    "Niger",
    "Senegal"
  ]
};

var colors={
		"Central Africa":"#A78D97",
    "Eastern Africa":"#6C4453",
    "Northern Africa":"#CBBDC1",
    "Southern Africa":"#54253C",
    "Western Africa":"#876572"
}
var allcountrylist=[];

_.each(reg,function(val,i){
		var regname=i;
			_.each(val,function(val,i){
      	allcountrylist.push({
        		'region':regname,
            color:colors[regname],
            name:val
         });
      });
		//allcountrylist=allcountrylist.concat(val);
});
/* debugger; */

var data=[
      {
         name:"India",
         z:10,
       
      },
            {
         name:"Chad",
         z:1,
       
      },
                  {
         name:"Mali",
         z:5,
       
      }]
var dataa=[      
      {
         name:"Botswana",
         z:10,
         color:"#502b3a"
       
      },
      {
         name:"Madagascar",
         z:30,
         color:"#502b3a"
       
      },
            {
         name:"Mozambique",
         z:10,
         color:"#502b3a"
       
      },
      {
         name:"Namibia",
         z:30,
         color:"#502b3a"
       
      },
            {
         name:"South Africa",
         z:10,
         color:"#502b3a"
       
      },
      {
         name:"Seychelles",
         z:30,
         color:"#502b3a"
       
      },
      {
         name:"Zimbabwe",
        ...