AmCharts - Map - Select Hong Kong

HTML

<script type="text/javascript" src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="mapDiv"></div>	
<div id="controls">
    <button onclick="providerData1()">providerData 1</button>
    <button onclick="providerData2()">providerData 2</button>
</div>

CSS

#mapDiv {
	width	: 100%;
	height	: 500px;
  background-color: white;
}														

#controls {
    margin-top: 20px;
    text-align: center;
}

#controls button {
    width: 200px;
    height: 40px;
}

JavaScript

AmCharts.theme = AmCharts.themes.light;
window.map = new AmCharts.AmMap();
window.map.pathToImages = "https://cdn.amcharts.com/lib/3/images/";
window.map.areasSettings = {
	autoZoom: true,
	selectedColor: "#CC0000",
	unlistedAreasColor: "#000000",
	unlistedAreasAlpha: 0.1
};
window.map.dataProvider = {
        "map": "worldLow",
        "colorSteps": 10,
        "areas" : [
            {"id": "HK", "value": 1, "balloonText": "CN - 1"},
            {"id": "DE", "value": 4, "balloonText": "DE - 4"},
            {"id": "FR", "value": 40, "balloonText": "FR - 4"}
        ]
    };
    
map.write(document.getElementById("mapDiv"));

function providerData1() {
		console.log("providerData1()");
    window.map.dataProvider = {
        "map": "worldLow",
        "colorSteps": 10,
        "areas" : [
            {"id": "CN", "value": 2, "balloonText": "CN - 2"},
            {"id": "RU", "value": 3, "balloonText": "RU - 3"}
        ]
    };
    
		window.map.validateData();
}

function providerData2() {
		console.log("providerData2()");
    window.map.dataProvider = {
        "map": "worldLow",
        "colorSteps": 10,
        "areas" : [
            {"id": "CN", "value": 20, "balloonText": "CN - 5"},
            {"id": "DE", "value": 5, "balloonText": "DE - 20"}
        ]
    };
    
		window.map.validateData();
}