Map appears once, but is »overlaid« with empty map quickly in Highmaps - dictionary

Question

I have a data portal, in which a user can visualize the data by graph or by map. Strange thing is, that when I click on the map symbol and the new page is being loaded with the map instead of the graph now, the correctly colored map appears for a very short moment, but is then overridden or overlaid by an empty map.
Here is a short video which demonstrates the problem. And here is the site.
When I reload the page, it sometimes work.
Here is the code for the map:
$(function () {
$.getJSON('map.csv', function (data)
{
// Initiate the chart
$('#container').highcharts('Map', {
title:
{
text: "Medium size cities (More than 300 000 people in 2014), % total",
style:
{
fontFamily: 'Arial',
fontSize: '20px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
subtitle:
{
text: "2035",
style:
{
fontFamily: 'Arial',
fontSize: '14px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
legend:
{
title:
{
text: "% of population",
style:
{
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
y: -20
},
mapNavigation:
{
enabled: true,
buttonOptions:
{
verticalAlign: 'middle'
}
},
tooltip:
{
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
formatter: function ()
{
return '<b>' + this.point.name + '</b><br>'
+ this.point.value + '<br>'
+ this.series.name ;
}
},
credits:
{
position:
{
align: 'left',
x: 10,
y: -5
},
style:
{
fontSize: '11px',
lineHeight: '12px'
},
mapText: '',
text: 'Source: World Urbanization Prospects; UN Environment Live',
href: 'http://esa.un.org/unpd/wup/'
},
colorAxis:
{
max: 100 },
plotOptions: {
series: {
point: {
events: {
click: function (e) {
location.href = 'graphexe_gegslive.php?selectedID=ulv_8&selectedCountries%5B%5D=' + this.id + '&selectedLanguage=en&selectedDatasettype=&selectedYears=all&type=gegslive&selectedYear=2016&selectedModule=graph';
}
}
}
}
},
series : [
{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'iso2'],
name: "% of population",
states:
{
hover:
{
color: '#BADA55'
}
}
}]
});
});
});
</script>
What is causing this problem? Thanks for any hints.

Answer 1

You are loading the chart twice and both times this is done asynchronously.
The order is unstable, but one time you are loading empty data (jQuery's getJSON has data as an empty array) and the second load is with correct data.
You should check why there are two places where the chart is created and why one time the data is wrong.