Using interactive events on the map
HTML
<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/maps/js/worldLow.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>
JavaScript
var map;
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
var dataProvider = {
mapVar: AmCharts.maps.worldLow,
zoomLevel: 3.5,
zoomLongitude: 10,
zoomLatitude: 52
};
map.areasSettings = {
unlistedAreasColor: "#DDDDDD",
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000",
balloonText: "[[title]] joined EU at [[customData]]"
};
dataProvider.areas = [
{
title: "Austria",
id: "AT",
color: "#3366CC",
customData: "1995",
groupId: "before2004"},
{
title: "Ireland",
id: "IE",
color: "#3366CC",
customData: "1973",
groupId: "before2004"},
{
title: "Denmark",
id: "DK",
color: "#3366CC",
customData: "1973",
groupId: "before2004"},
{
title: "Finland",
id: "FI",
color: "#3366CC",
customData: "1995",
groupId: "before2004"},
{
title: "Sweden",
id: "SE",
color: "#3366CC",
customData: "1995",
groupId: "before2004"},
{
title: "Great Britain",
id: "GB",
color: "#3366CC",
customData: "1973",
groupId: "before2004"},
{
title: "Italy",
id: "IT",
color: "#3366CC",
customData: "1957",
groupId: "before2004"},
{
title: "France",
id: "FR",
color: "#3366CC",
customData: "1957",
groupId: "before2004"},
{
title: "Spain",
id: "ES",
color: "#3366CC",
customData: "1986",
groupId: "before2004"},
{
title: "Greece",
id: "GR",
color: "#3366CC",
customData: "1981",
groupId: "before2004"},
{
title:...