You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
7.6 KiB
259 lines
7.6 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
|
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
<title>amMap example</title> |
|
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'> |
|
<link rel="stylesheet" href="../ammap/ammap.css" type="text/css"> |
|
<link rel="stylesheet" href="style.css" type="text/css"> |
|
|
|
<script src="../ammap/ammap.js" type="text/javascript"></script> |
|
<!-- map file should be included after ammap.js --> |
|
<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script> |
|
<!-- theme files. you only need to include the theme you use. |
|
feel free to modify themes and create your own themes --> |
|
<script src="../ammap/themes/light.js" type="text/javascript"></script> |
|
<script src="../ammap/themes/dark.js" type="text/javascript"></script> |
|
<script src="../ammap/themes/black.js" type="text/javascript"></script> |
|
<script src="../ammap/themes/chalk.js" type="text/javascript"></script> |
|
|
|
<script> |
|
|
|
// in order to set theme for a chart, all you need to include theme file |
|
// located in amcharts/themes folder and set theme property for the chart. |
|
|
|
var map; |
|
makeMap("light", "#FFFFFF"); |
|
|
|
// Theme can only be applied when creating chart instance - this means |
|
// that if you need to change theme at run time, youhave to create whole |
|
// chart object once again. |
|
|
|
function makeMap(theme, bgColor, bgImage) { |
|
|
|
if (map) { |
|
map.clear(); |
|
} |
|
|
|
// background |
|
if(document.body){ |
|
document.body.style.backgroundColor = bgColor; |
|
document.body.style.backgroundImage = "url(" + bgImage + ")"; |
|
} |
|
|
|
map = AmCharts.makeChart("mapdiv", { |
|
type: "map", |
|
theme: theme, |
|
|
|
creditsPosition: "top-right", |
|
|
|
dataProvider: { |
|
map: "worldLow", |
|
zoomLevel: 3.5, |
|
zoomLongitude: 10, |
|
zoomLatitude: 52, |
|
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: "Germany", |
|
id: "DE", |
|
color: "#3366CC", |
|
customData: "1957", |
|
groupId: "before2004" |
|
}, { |
|
title: "Belgium", |
|
id: "BE", |
|
color: "#3366CC", |
|
customData: "1957", |
|
groupId: "before2004" |
|
}, { |
|
title: "Luxembourg", |
|
id: "LU", |
|
color: "#3366CC", |
|
customData: "1957", |
|
groupId: "before2004" |
|
}, { |
|
title: "Netherlands", |
|
id: "NL", |
|
color: "#3366CC", |
|
customData: "1957", |
|
groupId: "before2004" |
|
}, { |
|
title: "Portugal", |
|
id: "PT", |
|
color: "#3366CC", |
|
customData: "1986", |
|
groupId: "before2004" |
|
}, { |
|
title: "Lithuania", |
|
id: "LT", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Latvia", |
|
id: "LV", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Czech Republic ", |
|
id: "CZ", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Slovakia", |
|
id: "SK", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Slovenia", |
|
id: "SI", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Estonia", |
|
id: "EE", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Hungary", |
|
id: "HU", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Cyprus", |
|
id: "CY", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Malta", |
|
id: "MT", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Poland", |
|
id: "PL", |
|
color: "#FFCC33", |
|
customData: "2004", |
|
groupId: "2004" |
|
}, { |
|
title: "Romania", |
|
id: "RO", |
|
color: "#66CC99", |
|
customData: "2007", |
|
groupId: "2007" |
|
}, { |
|
title: "Bulgaria", |
|
id: "BG", |
|
color: "#66CC99", |
|
customData: "2007", |
|
groupId: "2007" |
|
} |
|
] |
|
}, |
|
|
|
areasSettings: { |
|
balloonText: "[[title]] joined EU at [[customData]]" |
|
}, |
|
|
|
|
|
legend: { |
|
width: "100%", |
|
bottom: 15, |
|
left: 15, |
|
horizontalGap: 10, |
|
data: [{ |
|
title: "Joined EU before 2004", |
|
color: "#3366CC" |
|
}, { |
|
title: "Joined EU at 2004", |
|
color: "#FFCC33" |
|
}, { |
|
title: "Joined EU at 2007", |
|
color: "#66CC99" |
|
}] |
|
} |
|
|
|
}); |
|
} |
|
|
|
</script> |
|
</head> |
|
|
|
<body style="font-size:15px;">Select theme: |
|
<a href="#" onclick="makeMap('light', '#ffffff');">Light</a> | |
|
<a href="#" onclick="makeMap('dark', '#282828')">Dark</a> | |
|
<a href="#" onclick="makeMap('black', '#222222')">Black</a> | |
|
<a href="#" onclick="makeMap('chalk', '#282828', 'images/board.jpg')">Chalk</a> |
|
<br><br> |
|
<div id="mapdiv" style="width: 800px; height: 500px;"></div> |
|
</body> |
|
|
|
</html> |