Map with AmLegend
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 src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" rel="stylesheet" />
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 600px;
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"projection": "miller",
"theme": "light",
"dataProvider": {
"mapVar": AmCharts.maps.worldLow,
"areas": [{
color: "#4D92B4",
ownColor: "#4D92B4",
customData: "28.9",
groupId: "AMERICAS",
id: "US",
selectable: true,
selectedColor: "#CC0000",
showInList: true,
title: "United States",
value: 27389
},
{
color: "#ddd",
ownColor: "#4D92B4",
customData: "28.9",
groupId: "EMEA",
id: "PL",
selectable: true,
selectedColor: "#CC0000",
showInList: true,
title: "Poland",
value: 27389
}],
},
"areasSettings": {
"autoZoom": false,
"selectedColor": "#CC0000",
"unlistedAreasColor": "#0000ff",
"unlistedAreasAlpha": 0.1,
balloonText:"<b>[[title]]</b>: [[value]] ([[customData]])%"
},
"titles": [{
"text": "Countries Map",
"size": 14},
{
"text": "Map displays headcount per country",
"bold": false
}],
"mouseWheelScrollEnabled": true,
"export": {
"enabled": true
},
"legend": {
position: "absolute",
right: 0,
top: 520,
fontSize: 10,
width: "100%",
equalWidths: false,
marginRight:27,
marginLeft:27,
backgroundAlpha: 0.5,
backgroundColor: "#FFFFFF",
borderColor: "#ffffff",
borderAlpha: 1,
horizontalGap: 10,
switchable: true,
data: [{
title: "AMERICAS",
color: "#4D92B4",
groupId: "AMERICAS"
}]
},
});
map.addListener( "clickMapObject", function(event) {
...