<!DOCTYPE html>
<html>
<head>
<title>IOM Regional Rata Hub</title>
<style type="text/css">
html, body {
height: 100%;
width:100%;
  margin: 0;
  padding: 0;

}
#main-container{
height: 100%;
width:100%;
}
#map {
height: 100%;
width:100%;
}
#header{
background:#fff;
padding:10px 50px;
position: absolute;
top: 0;
left: 24%;
z-index: 10;
text-align:center;
border:1px solid #ccc;
border-top:0;
}
.title,.subtitle{
font-family:'Open Sans';
color:#0033a0;
}
.title{
font-size:20px;
}
.subtitle{
font-size:13px;
}

@media (min-width: 1281px) {
  #header{}
  .title{}
  }

@media (min-width: 1025px) and (max-width: 1280px) {
  #header{}
  .title{}
  }

@media (min-width: 768px) and (max-width: 1024px) {
	.title{}
  #header{}
  }

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.title{
	 font-size:20px;
	 }
  #header{
	  padding:10px;
	  left:10%;
  }
  }

@media (min-width: 481px) and (max-width: 767px) {
.title{
	 font-size:14px;
	 }
  #header{
	  padding:10px;
	  left:10%;
  }
  }

@media (min-width: 320px) and (max-width: 480px) {
 .title{
	 font-size:14px;
	 }
  #header{
	  padding:10px;
	  left:5%;
  }
  }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDULc23Uc1FYn7WoEUTOFVXnHx5uDzSWeM"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> 
<!--<link href="//db.onlinewebfonts.com/c/e35b2e7467dec8d9ee2163558012da0b?family=Gill+Sans" rel="stylesheet" type="text/css"/>-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">  
<script type="text/javascript">
function thousands_separators(num)
{
var num_parts = num.toString().split(".");
num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return num_parts.join(".");
}

google.maps.event.addDomListener(window, 'load', init);

function init() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(3.969831, 37.577848),
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
zoomControl: false,
scrollwheel: false,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},


styles:[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},
{
featureType: 'administrative.country',
elementType: 'labels.text.fill',
stylers: [
{
color: '#bbbbbb',
}
]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [
{color: '#ffffff'
}
]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [
{
color: '#ffffff'
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#a6c9d3"
},
{
"visibility": "on"
}
]
},
]
};


var boxText = document.createElement("div");
boxText.style.cssText = "font-size:14px; border: 1px solid #bbb; border-radius:2px; margin-top: 8px; background: #fff; padding: 10px;";
var InfoboxOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-160, 0)
,boxStyle: {
background: "#fff"
,border: "1px solid #ccc"
,textAlign: "left"
,fontSize: "10pt"
,borderRadius: "2px"
,width: "320px"
,opacity: 0.9
,padding:'10px 10px'
,zIndex:9999
}
,disableAutoPan: true
//,position: regioncenter
,closeBoxMargin: "0"
,closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var infobox = new InfoBox(InfoboxOptions);

var InfoboxLabelOptions = {
boxStyle: {
border: "0px"
,textAlign: "center"
,fontSize: "12px"
,fontWeight:'normal'
,width: "80px"
,color:'#fff'
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

var InfoboxbluebgLabelOptions = {
boxStyle: {
textAlign: "center"
,fontSize: "10px"
,fontWeight:'normal'
,color:"#fff"
,padding:"0px 2px"
,background: "#0033a0"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

var InfoboxbluebigbgLabelOptions = {
boxStyle: {
textAlign: "center"
,fontSize: "12px"
,fontWeight:'normal'
,color:"#fff"
,padding:"0px 2px"
,background: "#0033a0"
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);

// here import the GeoJson holding all the countries
map.data.loadGeoJson('json/iom_rdh.json');

map.data.setStyle(function(feature) {
var color = 'green';
var opacity = 0;
var strokecolor='green';
var strokeweight=0;
if (feature.getProperty('ADM0_NAME') === "Rwanda") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(-1.501940, 26.788449);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(-1.186144, 28.024411);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxbluebgLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Uganda") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(1.498909, 32.562700);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(2.334430, 31.841213);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxbluebigbgLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "South Sudan") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(7.838900, 30.123197);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(7.621039, 28.533392);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/

}
if (feature.getProperty('ADM0_NAME') === "Tanzania") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(-4.763958, 32.998667);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Kenya") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
/****code to get map label***/
var bounds = new google.maps.LatLngBounds();
var multi = feature.getGeometry().getArray();
for (var k = 0; k < multi.length; k++) {
var polys = multi[k].getArray();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < polys[i].getLength(); j++) {
bounds.extend(polys[i].getAt(j));
}
}
}
var regioncenter=bounds.getCenter();
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(1.545314, 36.234478);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Somalia") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(6.657337, 46.933258);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(3.333533, 45.314308);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxbluebigbgLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Djibouti") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(11.757354, 42.598946);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(12.281549, 44.267411);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxbluebgLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Ethiopia") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(8.767858, 39.408226);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(8.687310, 38.481051);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Burundi") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(-3.289875, 29.919379);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(-2.835115, 28.772882);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxbluebgLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}
if (feature.getProperty('ADM0_NAME') === "Eritrea") {
color = '#0033a0';
opacity = 1;
strokecolor='#e7eae9';
strokeweight=1;
var regioncenter=new google.maps.LatLng(15.512847, 38.174812);
feature.setProperty("ibcenter",regioncenter );
/****country label***/
var countrycenter = new google.maps.LatLng(15.904153, 36.944343);
let name = feature.getProperty('ADM0_NAME');
var labelText = name;
var ibLabel = new InfoBox(InfoboxLabelOptions);
ibLabel.setContent(labelText);
ibLabel.setPosition(countrycenter);
ibLabel.open(map);
/*******end country label******/
}

map.data.addListener("click", function (event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
fillColor: '#8099d0',
});

let country = event.feature.getProperty('ADM0_NAME');
//fetch data from mysql
$.ajax({
type:'POST',
url:'fetchcountrydata.php',
dataType: "json",
data:{country:country},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
var idps = data.result.idps;
var idps_link = data.result.idps_link;
var refugees = data.result.refugees;
var refugees_link = data.result.refugees_link;
var ims = data.result.ims;
var ims_link = data.result.ims_link;
if(idps=='Not Available'){
var idps_v=ims;
}
else{
var idps_v="<a href='"+idps_link+"' target='_blank'>"+idps+"</a>";
}
if(refugees=='Not Available'){
var refugees_v=refugees;
}
else{
var refugees_v="<a href='"+refugees_link+"' target='_blank'>"+refugees+"</a>";
}
if(ims=='Not Available'){
var ims_v=ims;
}
else{
var ims_v="<a href='"+ims_link+"' target='_blank'>"+ims+"</a>";
}
let html = "<div style=font-size:14px;>"+
"<span style=font-weight:bold;font-size:16px;line-height:20px;color:#ff671f;>"+country+"</span>"+"<br>"+
"<span style=font-weight:bold;font-size:14px;line-height:20px;>IDPs: </span>"+idps_v+"<br>"+
"<span style=font-weight:bold;font-size:14px;line-height:20px;>Refugees: </span>"+refugees_v+"<br>"+
"<span style=font-weight:bold;font-size:14px;line-height:20px;>International Migrant Stock: </span>"+ims_v+
"</div>";
let ibcenter = event.feature.getProperty('ibcenter');
infobox.setContent(html);
infobox.setPosition(ibcenter);
infobox.open(map);
}
else
{
bootbox.alert({
    message: "Data not available!",
    size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end fetch data from mysql

});

map.data.addListener("mouseover", event => {
//map.data.revertStyle();
//map.data.overrideStyle(event.feature, {
//fillColor: '#8099d0',
//});
});

map.data.addListener("mouseout", event => {
//map.data.revertStyle();
});

return /** @type {google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: strokecolor,
strokeWeight: strokeweight,
fillOpacity: opacity,
});
});

}
</script>
</head>
<body>
<div id="main-container">
<div id="header">
<div class="title">Regional Data Hub (RDH) for East and Horn of Africa</div>
<div class="subtitle">Click on a country to get more information</div>
</div><!--end header-->
<div id="map"></div>
</div><!--main container-->
</body>
</html>
