<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>IOM UN Migration</title>
<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>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container" style="width:100%;height:600px;" ></div>

<script>
// 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 data = [
{
"code": "Kenya",
"refugees": "494K",
"idps": "162K",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "United Republic of Tanzania",
"refugees": "283K",
"idps": "N/A",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Ethiopia",
"refugees": "766K",
"idps": "1.7M",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Somalia",
"refugees": "29K",
"idps": "2.6M",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Uganda",
"refugees": "1.4M",
"idps": "32K",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "South Sudan",
"refugees": "301K",
"idps": "1.6M",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Eritrea",
"refugees": "199",
"idps": "N/A",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Rwanda",
"refugees": "148K",
"idps": "N/A",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Burundi",
"refugees": "86K",
"idps": "136K",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
{
"code": "Djibouti",
"refugees": "30K",
"idps": "N/A",
"countryportallink": "<a href='#' target='_blank'>http://www.iomkenya.com</a>",
"gmdacportallink": "<a href='#' target='_blank'>http://www.gmdacportal.com</a>",
"unhcrportallink": "<a href=#' target='_blank'>http://www.unhcrportal.com</a>",
},
];
</script>

<style>
body{
font-family:'Roboto';
font-size:13px;
}
.legend{
border:1px solid #ccc;
padding:5px;
display:inline-block;
float:right;
margin-top:-20%;
z-index:9999;
position:relative;
}
#container {
min-width: 310px; 
width: 100%; 
margin: 0 auto; 
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
.refugees{
margin-right:10px;
background:#8099d1;
width:22px;
height:22px;
float:left;
}
.idps{
margin-right:10px;
background:#ffb38f;
width:22px;
height:22px;
float:left;
}
.legend-item{
line-height:22px;
margin-bottom:5px;
}
</style>

<script>
(function(H) {
H.Tooltip.prototype.hide = function() {};

H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, point, e) {
if (e && e.type !== 'mouseover' && e.type !== 'mousemove') {
this.updatePos = true;
proceed.call(this, point, e);
}
});

H.wrap(H.Tooltip.prototype, 'updatePosition', function(proceed, pos) {
if (this.updatePos) {
this.updatePos = false;
proceed.call(this, pos);
}
});

H.addEvent(H.Point.prototype, 'click', function(e) {
e.point.series.chart.tooltip.refresh(e.point, e);
});
}(Highcharts));

Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Roboto'
},
events: {
load: function(){
 this.mapZoom(0.5);   
}
}
},
lang: {
thousandsSep: ','
}
});
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/africa'
},

title: {
text: 'IOM UN Migration - Regional Office For East and Horn Of Africa'
},

subtitle: {
text: 'Click on a country to get more information'
},

mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'top',
}
},

credits: {
enabled: false
},
legend: {
enabled: false
},

tooltip: {
enabled: true,
useHTML:true,
formatter: function(){
var e='';
e += '<b>'+this.point.code + '</b>'+ '<br/>';
e+='Country Portal: '
var countryportal=this.point.countryportallink;
e += countryportal;
e+='<br>';
e+='GMDAC Portal: ';
var gmdacportal=this.point.gmdacportallink;
e += gmdacportal;
e+='<br>';
e+='UNHCR Portal: ';
var unhcrportal=this.point.unhcrportallink;
e += unhcrportal;
return e;
},
},

colorAxis: {
min: 0
},

series: [{
data: data,
color: '#2167ab',
cursor: 'pointer',
name: 'Migrants',
joinBy: ['name', 'code'],
states: {
hover: {
color: '#3b92d8'
},
select: {
color: '#3b92d8',
},
},
allowPointSelect: true,
dataLabels: {
enabled: true,
format: '{point.properties.name}'
}
}]
});
</script>
</body>
</html>