zoomingToCountries.html
2.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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 rel="stylesheet" href="../ammap/ammap.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>
<script type="text/javascript">
// add all your code to this method, as this will ensure that page is loaded
AmCharts.ready(function() {
// create AmMap object
var map = new AmCharts.AmMap();
// set path to images
map.pathToImages = "../ammap/images/";
/* create data provider object
mapVar tells the map name of the variable of the map data. You have to
view source of the map file you included in order to find the name of the
variable - it's the very first line after commented lines.
getAreasFromMap indicates that amMap should read all the areas available
in the map data and treat them as they are included in your data provider.
in case you don't set it to true, all the areas except listed in data
provider will be treated as unlisted.
*/
var dataProvider = {
mapVar: AmCharts.maps.worldLow,
getAreasFromMap:true
};
// pass data provider to the map object
map.dataProvider = dataProvider;
/* create areas settings
* autoZoom set to true means that the map will zoom-in when clicked on the area
* selectedColor indicates color of the clicked area.
*/
map.areasSettings = {
autoZoom: true,
selectedColor: "#CC0000"
};
// let's say we want a small map to be displayed, so let's create and add it to the map
map.smallMap = new AmCharts.SmallMap();
// write the map to container div
map.write("mapdiv");
});
</script>
</head>
<body>
<div id="mapdiv" style="width: 100%; background-color:#EEEEEE; height: 500px;"></div>
</body>
</html>