var map = AmCharts.makeChart("chartdiv", {
type: "map",
"theme": "none",
pathToImages: "http://www.amcharts.com/lib/3/images/",
dataProvider: {
map: "worldLow",
zoomLevel: 3.5,
zoomLongitude: 10,
zoomLatitude: 52,
areas: [{
title: "Austria",
id: "AT",
color: "#67b7dc",
customData: "1995",
groupId: "before2004"
}, {
title: "Ireland",
id: "IE",
color: "#67b7dc",
customData: "1973",
groupId: "before2004"
}, {
title: "Denmark",
id: "DK",
color: "#67b7dc",
customData: "1973",
groupId: "before2004"
}, {
title: "Finland",
id: "FI",
color: "#67b7dc",
customData: "1995",
groupId: "before2004"
}, {
title: "Sweden",
id: "SE",
color: "#67b7dc",
customData: "1995",
groupId: "before2004"
}, {
title: "Great Britain",
id: "GB",
color: "#67b7dc",
customData: "1973",
groupId: "before2004"
}, {
title: "Italy",
id: "IT",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "France",
id: "FR",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "Spain",
id: "ES",
color: "#67b7dc",
customData: "1986",
groupId: "before2004"
}, {
title: "Greece",
id: "GR",
color: "#67b7dc",
customData: "1981",
groupId: "before2004"
}, {
title: "Germany",
id: "DE",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "Belgium",
id: "BE",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "Luxembourg",
id: "LU",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "Netherlands",
id: "NL",
color: "#67b7dc",
customData: "1957",
groupId: "before2004"
}, {
title: "Portugal",
id: "PT",
color: "#67b7dc",
customData: "1986",
groupId: "before2004"
},
{
title: "Lithuania",
id: "LT",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Latvia",
id: "LV",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Czech Republic ",
id: "CZ",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Slovakia",
id: "SK",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Slovenia",
id: "SI",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Estonia",
id: "EE",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Hungary",
id: "HU",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Cyprus",
id: "CY",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
}, {
title: "Poland",
id: "PL",
color: "#ebdb8b",
customData: "2004",
groupId: "2004"
},
{
title: "Romania",
id: "RO",
color: "#83c2ba",
customData: "2007",
groupId: "2007"
}, {
title: "Bulgaria",
id: "BG",
color: "#83c2ba",
customData: "2007",
groupId: "2007"
},
{
title: "Croatia",
id: "HR",
color: "#db8383",
customData: "2013",
groupId: "2013"
}
]
},
areasSettings: {
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000",
alpha:0.8,
selectable: true, // to enable clickMapObject event
unlistedAreasAlpha:0.1,
balloonText: "[[title]] joined EU at [[customData]]"
},
legend: {
width: 240,
marginRight:27,
marginLeft:27,
equalWidths:true,
maxColumns: 1,
backgroundAlpha: 0.5,
backgroundColor: "#FFFFFF",
borderColor: "#ffffff",
borderAlpha: 1,
right: 0,
horizontalGap: 10,
switchable: true,
data: [{
title: "EU member before 2004",
color: "#67b7dc",
groupId: "before2004"
}, {
title: "Joined at 2004",
color: "#ebdb8b",
groupId: "2004"
}, {
title: "Joined at 2007",
color: "#83c2ba",
groupId: "2007"
}, {
title: "Joined at 2013",
color: "#db8383",
groupId: "2013"
}]
}
});
map.selectedObjects = [];
map.addListener('init', function () {
map.legend.switchable = true;
map.legend.addListener('clickMarker', AmCharts.myHandleLegendClick);
map.legend.addListener('clickLabel', AmCharts.myHandleLegendClick);
function toggleMapObjectAlpha(e) {
var ALPHA_SELECTED = 0.3;
var ALPHA_HOVER = 0.1;
// Disable memory otherwise it won't restore initial color
map.selectedObject = false;
// Walkthrough areas
for ( i in map.dataProvider.areas ) {
var area = map.dataProvider.areas[i];
var path = area.displayObject.node;
var alpha = 1;
// CURRENT GROUP
if ( e.mapObject.groupId == area.groupId ) {
// CURRENT
if ( e.mapObject.id == area.id ) {
// CLICK
if ( e.type == "clickMapObject" ) {
path.setAttribute("fill-opacity",ALPHA_SELECTED);
map.selectedObjects.push(area);
// HOVER
} else if ( e.type == "rollOverMapObject" ) {
path.setAttribute("fill-opacity",ALPHA_HOVER);
}
}
}
}
// CLEAR SELECTION IF GROUP CHANGES
if ( map.selectedObjects.length && e.mapObject.groupId != map.selectedObjects[0].groupId ) {
map.selectedObjects = [];
}
// REACTIVATE PREVIOUS SELECTED ONES
for ( i in map.selectedObjects ) {
var area = map.selectedObjects[i];
var path = area.displayObject.node;
path.setAttribute("fill-opacity",ALPHA_SELECTED);
}
}
map.addListener('rollOverMapObject',toggleMapObjectAlpha);
map.addListener('rollOutMapObject',toggleMapObjectAlpha);
map.addListener('clickMapObject',toggleMapObjectAlpha);
});
AmCharts.myHandleLegendClick = function (event) {
var groupId = event.dataItem.groupId;
if (undefined !== event.dataItem.hidden && event.dataItem.hidden) {
event.dataItem.hidden = false;
map.showGroup(groupId);
}
else {
event.dataItem.hidden = true;
map.hideGroup(groupId);
}
map.legend.validateNow();
}
<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>
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 500px;
position: relative;
}
.amChartsLegend path, .amChartsLegend rect {
cursor: pointer;
}
}