Toggling groups of map images using external HTML checkboxes

by samur3

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/dark.js"></script>
<div id="chartdiv"></div>
<div id="selector">
    <label style="border: 2px solid #de4c4f"><input type="checkbox" value="africa" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Africa</label>
    <label style="border: 2px solid #a7a737"><input type="checkbox" value="north_america" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> North America</label>
    <label style="border: 2px solid #d8854f"><input type="checkbox" value="south_america" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> South America</label>
    <label style="border: 2px solid #86a965"><input type="checkbox" value="asia" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Asia</label>
    <label style="border: 2px solid #d8854f"><input type="checkbox" value="europe" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Europe</label>
    <label style="border: 2px solid #8aabb0"><input type="checkbox" value="oceania" checked="checked" onclick="toggleGroup(this.value, this.checked);" /> Oceania</label>
</div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {background: #3f3f4f;color:#ffffff;	
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}
#selector {
    padding: 10px;
    background: rgba(255, 255, 255, 0.8);
    width: 150px;
    position: absolute;
    top: 20px;
    right: 20px;
}
#selector label {
    display: block;
    padding: 3px 6px;
}

JavaScript

/*
	although ammap has methos like getAreaCenterLatitude and getAreaCenterLongitude,
	they are not suitable in quite a lot of cases as the center of some countries
	is even outside the country itself (like US, because of Alaska and Hawaii)
	That's why wehave the coordinates stored here
*/

var latlong = {};
latlong["AD"] = {"latitude":42.5, "longitude":1.5};
latlong["AE"] = {"latitude":24, "longitude":54};
latlong["AF"] = {"latitude":33, "longitude":65};
latlong["AG"] = {"latitude":17.05, "longitude":-61.8};
latlong["AI"] = {"latitude":18.25, "longitude":-63.1667};
latlong["AL"] = {"latitude":41, "longitude":20};
latlong["AM"] = {"latitude":40, "longitude":45};
latlong["AN"] = {"latitude":12.25, "longitude":-68.75};
latlong["AO"] = {"latitude":-12.5, "longitude":18.5};
latlong["AP"] = {"latitude":35, "longitude":105};
latlong["AQ"] = {"latitude":-90, "longitude":0};
latlong["AR"] = {"latitude":-34, "longitude":-64};
latlong["AS"] = {"latitude":-14.3333, "longitude":-170};
latlong["AT"] = {"latitude":47.3333, "longitude":13.3333};
latlong["AU"] = {"latitude":-27, "longitude":133};
latlong["AW"] = {"latitude":12.5, "longitude":-69.9667};
latlong["AZ"] = {"latitude":40.5, "longitude":47.5};
latlong["BA"] = {"latitude":44, "longitude":18};
latlong["BB"] = {"latitude":13.1667, "longitude":-59.5333};
latlong["BD"] = {"latitude":24, "longitude":90};
latlong["BE"] = {"latitude":50.8333, "longitude":4};
latlong["BF"] = {"latitude":13, "longitude":-2};
latlong["BG"] = {"latitude":43, "longitude":25};
latlong["BH"] = {"latitude":26, "longitude":50.55};
latlong["BI"] = {"latitude":-3.5, "longitude":30};
latlong["BJ"] = {"latitude":9.5, "longitude":2.25};
latlong["BM"] = {"latitude":32.3333, "longitude":-64.75};
latlong["BN"] = {"latitude":4.5, "longitude":114.6667};
latlong["BO"] = {"latitude":-17, "longitude":-65};
latlong["BR"] = {"latitude":-10, "longitude":-55};
latlong["BS"] = {"latitude":24.25, "longitude":-76};
latlong["BT"] = {"latitude":27.5,...