Highcharts Configuration Preview
/**
* This is a complicated demo of Highmaps, not intended to get you up to speed
* quickly, but to show off some basic maps and features in one single place.
* For the basic demo, check out https://www.highcharts.com/maps/demo/geojson
* instead.
*/
// Base path to maps
var baseMapPath = "https://code.highcharts.com/mapdata/",
showDataLabels = false, // Switch for data labels enabled/disabled
mapCount = 0,
searchText,
mapOptions = '';
// Populate dropdown menus and turn into jQuery UI widgets
$.each(Highcharts.mapDataIndex, function (mapGroup, maps) {
if (mapGroup !== "version") {
mapOptions += '<option class="option-header">' + mapGroup + '</option>';
$.each(maps, function (desc, path) {
mapOptions += '<option value="' + path + '">' + desc + '</option>';
mapCount += 1;
});
}
});
searchText = 'Search ' + mapCount + ' maps';
mapOptions = '<option value="custom/world.js">' + searchText + '</option>' + mapOptions;
$("#mapDropdown").append(mapOptions).combobox();
// Change map when item selected in dropdown
$("#mapDropdown").change(function () {
var $selectedItem = $("option:selected", this),
mapDesc = $selectedItem.text(),
mapKey = this.value.slice(0, -3),
svgPath = baseMapPath + mapKey + '.svg',
geojsonPath = baseMapPath + mapKey + '.geo.json',
javascriptPath = baseMapPath + this.value,
isHeader = $selectedItem.hasClass('option-header');
// Dim or highlight search box
if (mapDesc === searchText || isHeader) {
$('.custom-combobox-input').removeClass('valid');
location.hash = '';
} else {
$('.custom-combobox-input').addClass('valid');
location.hash = mapKey;
}
if (isHeader) {
return false;
}
// Show loading
if (Highcharts.charts[0]) {
Highcharts.charts[0].showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
}
// When the map is loaded or ready from cache...
function mapReady() {
var mapGeoJSON = Highcharts.maps[mapKey],
data = [],
parent,
match;
// Update info box download links
$("#download").html(
'<a class="button" target="_blank" href="https://jsfiddle.net/gh/get/jquery/1.11.0/' +
'highcharts/highcharts/tree/master/samples/mapdata/' + mapKey + '">' +
'View clean demo</a>' +
'<div class="or-view-as">... or view as ' +
'<a target="_blank" href="' + svgPath + '">SVG</a>, ' +
'<a target="_blank" href="' + geojsonPath + '">GeoJSON</a>, ' +
'<a target="_blank" href="' + javascriptPath + '">JavaScript</a>.</div>'
);
// Generate non-random data for the map
$.each(mapGeoJSON.features, function (index, feature) {
data.push({
key: feature.properties['hc-key'],
value: index
});
});
// Show arrows the first time a real map is shown
if (mapDesc !== searchText) {
$('.selector .prev-next').show();
$('#sideBox').show();
}
// Is there a layer above this?
match = mapKey.match(/^(countries\/[a-z]{2}\/[a-z]{2})-[a-z0-9]+-all$/);
if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
parent = {
desc: 'World',
key: 'custom/world'
};
} else if (match) { // admin1
parent = {
desc: $('option[value="' + match[1] + '-all.js"]').text(),
key: match[1] + '-all'
};
}
$('#up').html('');
if (parent) {
$('#up').append(
$('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>')
.attr({
title: parent.key
})
.click(function () {
$('#mapDropdown').val(parent.key + '.js').change();
})
);
}
// Instantiate chart
$("#container").highcharts('Map', {
title: {
text: null
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 0,
stops: [
[0, '#EFEFFF'],
[0.5, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
]
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'bottom'
},
series: [{
data: data,
mapData: mapGeoJSON,
joinBy: ['hc-key', 'key'],
name: 'Random data',
states: {
hover: {
color: Highcharts.getOptions().colors[2]
}
},
dataLabels: {
enabled: showDataLabels,
formatter: function () {
return mapKey === 'custom/world' || mapKey === 'countries/us/us-all' ?
(this.point.properties && this.point.properties['hc-a2']) :
this.point.name;
}
},
point: {
events: {
// On click, look for a detailed map
click: function () {
var key = this.key;
$('#mapDropdown option').each(function () {
if (this.value === 'countries/' + key.substr(0, 2) + '/' + key + '-all.js') {
$('#mapDropdown').val(this.value).change();
}
});
}
}
}
}, {
type: 'mapline',
name: "Separators",
data: Highcharts.geojson(mapGeoJSON, 'mapline'),
nullColor: 'gray',
showInLegend: false,
enableMouseTracking: false
}]
});
showDataLabels = $("#chkDataLabels").prop('checked');
}
// Check whether the map is already loaded, else load it and
// then show it async
if (Highcharts.maps[mapKey]) {
mapReady();
} else {
$.getScript(javascriptPath, mapReady);
}
});
// Toggle data labels - Note: Reloads map with new random data
$("#chkDataLabels").change(function () {
showDataLabels = $("#chkDataLabels").prop('checked');
$("#mapDropdown").change();
});
// Switch to previous map on button click
$("#btn-prev-map").click(function () {
$("#mapDropdown option:selected").prev("option").prop("selected", true).change();
});
// Switch to next map on button click
$("#btn-next-map").click(function () {
$("#mapDropdown option:selected").next("option").prop("selected", true).change();
});
// Trigger change event to load map on startup
if (location.hash) {
$('#mapDropdown').val(location.hash.substr(1) + '.js');
} else { // for IE9
$($('#mapDropdown option')[0]).attr('selected', 'selected');
}
$('#mapDropdown').change();