Changing map object colors dynamically via API
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/none.js"></script>
<div id="chartdiv"></div>
<input type="button" value="rotate US color" id="button" onclick="test();" />
CSS
body {
font-size: 12px;
font-family: Verdana;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 300px;
float: left;
}
#button {
font-size: 15px;
padding: 10px;
position: absolute;
top: 50px;
right: 50px;
}
}
JavaScript
var map = AmCharts.makeChart("chartdiv", {
"type": "map",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000"
}
});
function test() {
// generate random color
//var color = Math.floor( Math.random() * 0xffffff );
// update US color in data
var area = map.getObjectById("US");
area.color = '#000000';
area.colorReal = area.color;
// make the chart take in new color
map.returnInitialColor(area);
}