<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-datepicker.css" type="text/css" 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 src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!--<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>-->
<!--<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootbox.all.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<title>IOM RDH-Migrant Response Centres</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Just use .gm-style-iw */ 
.gm-style-iw {
/*width: 300px; 
min-height: 150px;*/
}
#wrapper{
overflow:auto;
}
#map{
width:76.5%;
float:left;
height:715px;
}
#right-sidebar{
width:20%;
float:right;
border:1px solid #ccc;
}
body,input{
font-family:'Roboto';
}
#main-container{
width:100%;
}
#map-container {
height: 980px;
min-width: 310px;
margin: 0 auto;
width:50%;
float:left;
margin-left:20%;
border:0px solid #ccc;

}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
#sidebar{
width:23%;
float:right;
border:1px solid#ccc;
padding:20px;
border-radius:2px;
}
.centername,.country,.totalreg,.males,.females{
float:left;
width:40%;
font-size:16px;
}
.mrc-country,.mrc-totalreg,.mrc-males,.mrc-females,.mrc-minors{
float:right;
width:50%;
}
div.clear-float {
clear:both;
font-size:0;
height:0;
border-bottom:1px dotted #ccc;
padding-top:10px;
margin-bottom:10px;
}
.mrc-center,.mrc-demographic,.mrc-origin{
background:#0033a1;
padding:2px;
color:#fff;
text-align:center;
margin-bottom:15px;
font-size:16px;
border-radius:2px;
}
.mrc-center{
font-weight:bold;
font-size:20px;
}
.totalreg{
color:#0033a1;
}
.mrc-totalreg,.mrc-minors{
color:#f47527;
font-size:30px;
}
.mrc-country,.mrc-males,.mrc-females{
color:#f47527;
}
.males,.females,.country{
color:#0033a1;
}
.mrc-demographics-males{

float:left;
width:45%;
text-align:center;
}
.mrc-demographics-females{

width:45%;
float:right;
text-align:center;
}
.left-box{
margin-top:15px;
width:70%;
float:right;
font-size:26px;
color:#f47527
}
.right-box{
width:30%;
float:left;
}
.males-figure,.females-figure{
display:inline;
float:left;
color:#f47527;
padding-left:10px;
}
.males-label,.females-label{
font-size:20px;
color:#0033a1;
}
.ajax-loader {
visibility: hidden;
background-color: rgba(255,255,255,0.7);
position: absolute;
z-index: +100 !important;
width: 100%;
height:100%;
}

.ajax-loader img {
position: relative;
top:50%;
left:50%;
}
.datepickerdiv,
.datepickerdiv input,
.datepickerdiv1,
.datepickerdiv1 input
{
cursor:pointer;
}
.datepickerdiv{
margin-bottom:15px;
}
#header{
background:#fff;
padding:10px 50px;
position: absolute;
top: 0;
left: 19%;
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;
}
label,
input{
float:left; display:inline;
}
label{
margin-right:5px;
width:40px;
line-height:30px;
}
.btn{
border-radius:2px;
}

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

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

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

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

@media (min-width: 481px) and (max-width: 767px) {
.title{
font-size:14px;
}
#header{
padding:10px;
left:7%;
}
#sidebar{ 
width: 100%;
}
#map{
width:100%;
}
.centername, .country, .totalreg, .males, .females {
font-size: 14px;
}
.mrc-totalreg, .mrc-minors {
font-size: 24px;
}
.left-box {
font-size: 24px;
}
}

@media (min-width: 320px) and (max-width: 480px) {
#header{
padding:10px;
left:4%;
}
#sidebar{ 
width: 100%;
}
#map{
width:100%;
}
.title{
font-size:14px;
}
#reload{
font-size:9px;
}
}

</style>
</head>

<html>
<body>
<div id="wrapper">
<div id="main-container">
<div id="header">
<div class="title">Migration Response Centres (MRCs)</div>
<div class="subtitle">Click on a centre to get more information on the sidebar</div>
</div><!--end header-->
<div id="map"></div>

<div class="ajax-loader">
<img src="ajax-loader.gif" class="img-responsive" />
</div>

<div id="sidebar">

<form>
<div id="date-selectors">

<div class="datepickerdiv">
<label for="select_date_from">From:</label>
<div class="input-group date">
<input type="text" readonly="readonly" id="date-from" class="form-control" value="">
<span class="input-group-addon" id="input_btn_calendar_from"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

<div class="datepickerdiv1">
<label for="select_date_to">To:</label>
<div class="input-group date">
<input type="text" readonly="readonly" id="date-to" class="form-control" value="">
<span class="input-group-addon" id="input_btn_calendar_to"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>

</div><!--date-selectors-->
</form>
<div class="clear-float"></div>
<div class="mrc-center">All Centres</div>

<div class="clear-float"></div>
<div class="totalreg">Total Registered:</div> <div class="mrc-totalreg"></div>
<div class="clear-float"></div>
<div class="totalreg" style="line-height:40px;">Children:</div> <div class="mrc-minors"></div>
<!--<div class="clear-float"></div>
<!--<div class="clear-float"></div>
<div class="males">Male: </div><div class="mrc-males"></div>
<div class="clear-float"></div>
<div class="females">Female: </div><div class="mrc-females"></div>-->
<div class="clear-float"></div>
<div class="mrc-demographic">Demographics</div>

<div class="mrc-demographics-container">

<div class="mrc-demographics-males">
<div class="left-box">
<div class="males-figure"></div>%
</div>
<div class="right-box"><img src='images/male-icon.png' alt="Male" title="Male"></div>
</div>
<div class="mrc-demographics-females">
<div class="left-box">
<div class="females-figure"></div>%
</div>
<div class="right-box"><img src='images/female-icon.png' alt="Female" title="Female"></div>
</div>
</div>
<div class="clear-float"></div>

<div class="mrc-origin">
Top 3 regions of origin
</div><!--top three-->

<div class="origin-bar-chart">
<script type="text/javascript">
//global declare options
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Roboto'
}
},
lang: {
contextButtonTitle: 'Export Options',
thousandsSep: ','
}
});

$(document).ready(function() {
var options = {
chart: {
events: {
load: function () {

var dataLabelsOfPoints = this.series[0].points,
correctedPosition;

dataLabelsOfPoints.forEach(function(el, inx) {
if (el.graphic.element.attributes[3].value > el.dataLabel.x) {
correctedPosition = parseInt($(el.dataLabel.div).css("top"));
correctedPosition -= 25;
correctedPosition = correctedPosition + 'px';

$(el.dataLabel.div).css('top', correctedPosition);
}
});

}
},
renderTo: 'origin_container',
type: 'bar',
},
title: {
text: '',
},
subtitle: {
text: '',
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
menuItems: ["printChart", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"],
align: 'right',
x: 0,
y: 0,
verticalAlign: 'bottom'
}
}
},
plotOptions: {
series: { 
dataLabels: { 
enabled: true,
inside:false,
useHTML: true,
//"crop": true,
//"overflow": "none",
//align:'center',
color:'#0033a1',
style: {
textOutline: false, 
},
}
}
},
xAxis: {
categories: []
},
yAxis: {
//max: 9500,
title: {
text: ''
},
labels: {
enabled:false
},
gridLineWidth: 0,
plotLines: [{
value: 0,
width: 0,
color: '#0033a1'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ thousands_separators(this.y);
}
},
legend: {
enabled:false,
},
series: [],
}

$.getJSON("fetchtopareas.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
//options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<div id="origin_container" style="height:200px;"></div>
</div><!--end origin bar chart-->
</div>
<!--start modal-->

<!--end modal-->

</div>

<script>
$(document).ready(function(){
$.ajax({
type:'POST',
url:'fetchallmrcs.php',
dataType: "json",
data:{},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
$('.mrc-totalreg').html(thousands_separators(data.result.total));
$('.mrc-minors').html(thousands_separators(data.result.unaccompanied_minors));
$('.mrc-males').html(data.result.male);
$('.mrc-females').html(data.result.female);
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}else{
bootbox.alert({
message: "MRC Centers not found!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});

//get earliest and latest dates
$.ajax({
type:'POST',
url:'fetchdatesmrcs.php',
dataType: "json",
data:{},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
//$('#date-from').val(data.result.earliest_date);
$("#date-from").datepicker("setDate", data.result.earliest_date);
$("#date-to").datepicker("setDate", data.result.latest_date);
}else{
bootbox.alert({
message: "No data!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});

});

</script>
<script>
$('#date-from').datepicker({
format: 'M-yyyy',
startView: "months", 
minViewMode: "months",
autoclose: true,
//startDate: '-60d'
});

$("#input_btn_calendar_from").click(function() {
$("#date-from").datepicker('show')
});

$('#date-from').datepicker().on('changeDate', function(e) {
$('#date-to').datepicker('setStartDate', e.date);
$('#date-to').val("Select end date");
});

$('#date-to').datepicker({
format: 'M-yyyy',
startView: "months", 
minViewMode: "months",
autoclose: true,
//startDate: '-3d'
startDate: $("#date-from").datepicker("getDate"),
});

$("#input_btn_calendar_to").click(function() {
$("#date-to").datepicker('show')
});

$('#date-to').datepicker().on('changeDate', function(e) {

//get start date
var selectedDate = new Date($("#date-from").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var firstDate = new Date(selectedYear, selectedMonth , 1, 0);
var firstDay = firstDate.getDate();
var start_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + firstDay).slice(-2);

//get end date				
var selectedDate = new Date($("#date-to").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var lastDate = new Date(selectedYear, selectedMonth + 1, 0);
var lastDay = lastDate.getDate();
var end_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + lastDay).slice(-2);	

$.ajax({
type:'POST',
url:'fetchbymonth.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
$('.mrc-center').html('All Centres');
$('.mrc-totalreg').html(thousands_separators(data.result.total));
$('.mrc-minors').html(thousands_separators(data.result.unaccompanied_minors));
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}
else
{
bootbox.alert({
message: "Data not available!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get figures

//get topareas of origin				
var end_date = e.format(0,"yyyy-mm-dd");
$.ajax({
type:'POST',
url:'fetchtoparesbymonth.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){

var chart1 = $('#origin_container').highcharts();
chart1.series[0].update({
data: data[1]['data'], 
}, false);
chart1.xAxis[0].setCategories(data[0]['data']);
//console.log(data[0]['data']);
chart1.redraw();

},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get top areas*/

});
</script>
</div><!--end wrapper-->

<button type="button" id="reload" class="btn btn-light"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
<script>
$('#reload').click(function() {
location.reload();
});
</script>

<script>
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(".");
}

var markers = [];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(6.219849, 40.060758),
zoom: 5,
scrollwheel: false,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
zoomControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
//styles here
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 myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: { 
background: "url('tipbox.gif') no-repeat"
,opacity: 0.9
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,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 infoWindow = new google.maps.InfoWindow;
var InfoboxLabelOptions = {
boxStyle: {
border: "0px"
,textAlign: "center"
,fontSize: "15px"
,fontWeight:'normal'
,width: "120px"
,color:'#fff'
,opacity: 0.4
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-25, 0)
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
};

downloadUrl('markersxml.php', function(data) {
var xml = data.responseXML;
var locations = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(locations, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var unaccompanied_minors = markerElem.getAttribute('unaccompanied_minors');
var total = markerElem.getAttribute('total');

var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));

var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));

var text = document.createElement('text');
//text.textContent = address
infowincontent.appendChild(text);
var marker = new google.maps.Marker({
map: map,
position: point,
//label: icon.label,
icon: {
url: "images/house.png",
labelOrigin: new google.maps.Point(10, -5)
},
label: {
text: name,
fontWeight: "normal",
fontSize:"12px",
color:"#0033a0",
}
});

var i;

google.maps.event.addListener(marker, 'mouseover', (function(marker,i) {
return function() {

//get start date
var selectedDate = new Date($("#date-from").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var firstDate = new Date(selectedYear, selectedMonth , 1, 0);
var firstDay = firstDate.getDate();
var start_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + firstDay).slice(-2);
//get end date				
var selectedDate = new Date($("#date-to").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var lastDate = new Date(selectedYear, selectedMonth + 1, 0);
var lastDay = lastDate.getDate();
var end_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + lastDay).slice(-2);

//get center info				
var center = name
$.ajax({
type:'POST',
url:'fetchonemrc.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date,center:center},
success:function(data){
if(data.status == 'ok'){
boxText.innerHTML = "<div style=font-size:14px;>"+
"<span style=font-weight:bold;font-size:16px;line-height:20px;color:#ff671f;>"+name+"</span>"+"<br>"+
"<span style=font-weight:bold;font-size:14px;line-height:20px;>Total registered: </span>"+thousands_separators(data.result.total)+"<br>"+
"<span style=font-weight:bold;font-size:14px;line-height:20px;>Children: </span>"+thousands_separators(data.result.unaccompanied_minors)+
"</div>";
}
else
{
bootbox.alert({
message: "Data not available!",
size: 'small'
});
} 
},
});

//ib.open(map, this);

/*marker.setIcon({
url:'images/house_orange.png',
labelOrigin: new google.maps.Point(10, -5)
});
marker.setLabel({
text: name,
color:"#FF671F",
fontSize:"12px",
});*/
}
})(marker,i));

google.maps.event.addListener(marker, 'mouseout', (function(marker,i) {
return function() {
ib.close();
/*marker.setIcon({
url:'images/house.png',
labelOrigin: new google.maps.Point(10, -5)
});
marker.setLabel({
text: name,
color:"#0033a0",
fontSize:"12px",
});*/
};
})(marker,i)); 

google.maps.event.addListener(marker, 'click', (function(marker,i) {
return function() {

for (var j = 0; j < markers.length; j++) {
markers[j].setIcon({
url:'images/house.png',
labelOrigin: new google.maps.Point(10, -5)
});
var label = markers[j].getLabel();
label.color = '#0033a0';
markers[j].setLabel(label);
}
marker.setIcon({
url:'images/house_orange.png',
labelOrigin: new google.maps.Point(10, -5)
});
marker.setLabel({
text: name,
color:"#FF671F",
fontSize:"12px",
});

//get start date
var selectedDate = new Date($("#date-from").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var firstDate = new Date(selectedYear, selectedMonth , 1, 0);
var firstDay = firstDate.getDate();
var start_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + firstDay).slice(-2);

//get end date				
var selectedDate = new Date($("#date-to").datepicker("getDate"));
var selectedMonth = selectedDate.getMonth();
var selectedYear = selectedDate.getFullYear();
var lastDate = new Date(selectedYear, selectedMonth + 1, 0);
var lastDay = lastDate.getDate();
var end_date =  selectedYear + "-" + ("0" + (selectedMonth + 1)).slice(-2) + "-" + ("0" + lastDay).slice(-2);

//get center info				
var center = name
$.ajax({
type:'POST',
url:'fetchonemrc.php',
dataType: "json",
data:{start_date:start_date,end_date:end_date,center:center},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){
if(data.status == 'ok'){
$('.mrc-totalreg').html(thousands_separators(data.result.total));
$('.mrc-center').html((data.result.center));
$('.mrc-minors').html(thousands_separators(data.result.unaccompanied_minors));
$('.males-figure').html(data.result.malepercentage);
$('.females-figure').html(data.result.femalepercentage);
}
else
{
bootbox.alert({
message: "Data not available!",
size: 'small'
});
} 
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get figures

//get topareas of origin by multiple filters				
$.ajax({
type:'POST',
url:'fetchtoparesbymultiple.php',
dataType: "json",
data:{center:center,start_date:start_date,end_date:end_date},
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(data){

var chart1 = $('#origin_container').highcharts();
chart1.series[0].update({
data: data[1]['data'], 
}, false);
chart1.xAxis[0].setCategories(data[0]['data']);
//console.log(data[0]['data']);
chart1.redraw();

},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
//end get top areas*/

}
})(marker,i));
markers.push(marker);

var ib = new InfoBox(myOptions);

// here import the GeoJson holding all the countries
map.data.loadGeoJson('json/iom_rdh.json');
// here attach a style - I gave red fill and white stroke 
map.data.setStyle(function(feature) {
var color = 'green';
var opacity = 0;
var strokecolor='green';
var strokeweight=0;
if (feature.getProperty('ADM0_NAME') === "Somalia") {
color = '#ccc';
opacity = 0.9;
strokecolor='#e7eae9';
strokeweight=1;
/****country label***/
var countrycenter = new google.maps.LatLng(4.256774, 43.888566);
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') === "Ethiopia") {
color = '#ccc';
opacity = 0.9;
strokecolor='#e7eae9';
strokeweight=1;
/****country label***/
var countrycenter = new google.maps.LatLng(9.132701, 38.392807);
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') === "Djibouti") {
color = '#ccc';
opacity = 0.9;
strokecolor='#e7eae9';
strokeweight=1;
/****country label***/
var countrycenter = new google.maps.LatLng(12.140291, 41.821663);
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('wb_a2') === "RY") {
color = '#ccc';
opacity = 0.9;
strokecolor='#e7eae9';
strokeweight=1;
}*/

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

});
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(reload);
map.setOptions({
draggable: false,
keyboardShortcuts:false
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDULc23Uc1FYn7WoEUTOFVXnHx5uDzSWeM&callback=initMap"></script>
<script type="text/javascript" src="js/infobox.js"></script>
</body>
</html>