Intro
amChart is a popular interactive data visualization tool that provides JavaScript-based charts and geographical maps. This article will demonstrate how to integrate the country-region maps in amCharts with GeoDataSource Country-Region DropDown Menu. It will highlight the corresponding state in the United States on the fly upon the selection on the dropdown list.
Pre-requisites
Firstly, you will need to download the resources below:
- GeoDataSource Country-Region DropDown Menu at https://github.com/geodatasource/country-region-dropdown-menu
Usage
1.0 Add the below items in the GeoDataSource Country-Region DropDown Menu HTML code:
- amCharts resources links (this tutorial used the hosted version from CDN)
- division ‘chartdiv’ & its style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Country-Region DropDown Menu</title>
<script src="assets/js/geodatasource-cr.min.js"></script>
<link rel="gettext" type="application/x-po" ref="languages/en/LC_MESSAGES/en.po" />
<script type="text/javascript" src="assets/js/Gettext.js"></script>
<!-- amChart Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div>
Country: <select class="gds-cr" country-data-region-id="gds-cr-one" data-language="en"></select>
Region: <select id="gds-cr-one"></select><br><div id="chartdiv"></div>
</div>
</body>
</html>
2.0 Next, add a function to display country-region maps below in Country-Region DropDown Menu Javascript code.
<script>
//Display amchart map when country and region being selected
regionElement.onchange = function() {
//Get selected country code and region name from dropdown menu
var selectedCountryCode = country_region[selectedCountryIndex][0];
var selectedRegion = regionElement.options[regionElement.selectedIndex].value;
//Implement amChart Map function -- US will be demonstrate as an example
var countryMaps = {
"US":["usaHigh"]
//You may add other countries as below based on SVG filename in amChart
//"AF":["afghanistanHigh"],
//"AL":["albaniaHigh"]
};
var titles = [];
var amchart_id;
if ( countryMaps[ selectedCountryCode ] !== undefined ) {
var currentMap = countryMaps[ selectedCountryCode ][ 0 ];
}
//Use mapping file
$.getJSON( "plugins/amcharts/gds-amchart-mapping.json", function( json ) {
for (var i = 0; i < json.length; i++) {
//Get data from mapping file
var country_code= json[i].geodatasource_country;
var region_name= json[i].geodatasource_region;
var region_code= json[i].amchart_id;
if(selectedCountryCode == country_code && selectedRegion == region_name){
amchart_id = region_code;
//Set up amChart map
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "none",
"dataProvider": {
"mapURL": "https://www.amcharts.com/lib/3/maps/svg/" + currentMap + ".svg",
"zoomLevel": 0.9,
"areas": [{
"id": amchart_id,
"showAsSelected": true
}]
},
"areasSettings": {
"autoZoom": true,
"balloonText": "<strong>[[title]]</strong>",
"selectedColor": "#397ea8"
},
"zoomControl": {
"minZoomLevel": 0.9
},
"titles": titles
});
}
}
});
};
</script>
3.0 That’s all! You will be able to see a dropdown menu with country-region map displayed based on your country-region selection.
Conclusion
You might notice some discrepancies between the regions recognized in GeoDataSource and amCharts, therefore a mapping file was provided to link the information. Please note that this demo only loads the country-region map for the United States.
If you would like to load country-region map for other countries like Afghanistan, you will need to add the data for Afghanistan in Javascript code above based on the amChart SVG Map filename. For instance, the amChart link for Afghanistan SVG map is https://www.amcharts.com/lib/3/maps/svg/afghanistanHigh.svg . In your JavaScript code, you will need to add the country code and the SVG filename. E.g. “AF”:[“afghanistanHigh”] .
List of countries which are not available in amCharts:
- Aland Island
- Antarctica
- British Indian Ocean Territory
- French Southern Territories
- Guernsey
- Norfolk Island
- Saint Barthelemy
- South Georgia & South Sandwich Island
- US Minor Outlying Islands