-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathWorld_Map_Instance_After_Draw.html
138 lines (127 loc) · 9.06 KB
/
World_Map_Instance_After_Draw.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Anychart AngularJS plugin demo.</title>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-base.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-map.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-ui.min.js"></script>
<script src="../node_modules/anychart/dist/js/anychart-exports.min.js"></script>
<script src="../dist/anychart-angularjs.min.js"></script>
<link rel="stylesheet" href="../node_modules/anychart/dist/css/anychart-ui.min.css">
<link rel="stylesheet" href="../node_modules/anychart/dist/fonts/css/anychart-font.min.css">
<script src="res/world.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
(function() {
'use strict';
var dataSet = anychart.data.set([
{name: "Singapore", id: "SG", area: "719", density: "7697", population: "5535000"},
{name: "Hong Kong", id: "HK", area: "1104", density: "6571", population: "7234800"},
{name: "Vatican City", id: "VA", area: "0.44", density: "1818", population: "800"},
{name: "Bangladesh", id: "BD", area: "143998", density: "1109.37", population: "159747262"},
{name: "India", id: "IN", area: "3287240", density: "390.39", population: "1283321500"},
{name: "Israel", id: "IL", area: "22072", density: "383.69", population: "8468851"},
{name: "Belgium", id: "BE", area: "30528", density: "370", population: "11280134"},
{name: "Philippines", id: "PH", area: "300000", density: "342.29", population: "102687121"},
{name: "Japan", id: "JP", area: "377944", density: "335.58", population: "126832000"},
{name: "United Kingdom", id: "GB", area: "242910", density: "262", population: "64105700"},
{name: "Pakistan", id: "PK", area: "803940", density: "238.93", population: "192084402"},
{name: "Germany", id: "DE", area: "357168", density: "228", population: "81285000"},
{name: "Italy", id: "IT", area: "301308", density: "202", population: "60762320"},
{name: "Anguilla", id: "AI", area: "96", density: "140", population: "13452"},
{name: "Czech Republic", id: "CZ", area: "78867", density: "133", population: "10517400"},
{name: "Indonesia", id: "ID", area: "1904569", density: "135", population: "257080000"},
{name: "Poland", id: "PL", area: "312685", density: "123", population: "38496000"},
{name: "France", id: "FR", area: "543965", density: "118", population: "64149000"},
{name: "Armenia", id: "AM", area: "29743", density: "102", population: "3024100"},
{name: "Austria", id: "AT", area: "83879", density: "102", population: "8572895"},
{name: "Spain", id: "ES", area: "505990", density: "92", population: "46439864"},
{name: "Egypt", id: "EG", area: "1002450", density: "90.04", population: "90262915"},
{name: "Greece", id: "GR", area: "131957", density: "84", population: "11123034"},
{name: "Ukraine", id: "UA", area: "603628", density: "75", population: "45377581"},
{name: "Senegal", id: "SN", area: "196722", density: "69", population: "13567338"},
{name: "Bulgaria", id: "BG", area: "111002", density: "66", population: "7282041"},
{name: "Ireland", id: "IE", area: "70273", density: "65", population: "4585400"},
{name: "Ecuador", id: "EC", area: "255595", density: "63", population: "16168300"},
{name: "Mexico", id: "MX", area: "1967138", density: "61", population: "119713203"},
{name: "Tajikistan", id: "TJ", area: "143100", density: "57", population: "8160000"},
{name: "Lithuania", id: "LT", area: "65300", density: "45", population: "2944459"},
{name: "Madagascar", id: "MG", area: "587041", density: "35", population: "20696070"},
{name: "Faroe Islands", id: "FO", area: "1399", density: "34", population: "48244"},
{name: "Zimbabwe", id: "ZW", area: "390757", density: "33", population: "12973808"},
{name: "United States", id: "US", area: "9826675", density: "32.84", population: "322686937"},
{name: "Brazil", id: "BR", area: "8515767", density: "23.8", population: "202768562"},
{name: "Zambia", id: "ZM", area: "752612", density: "17.4", population: "13092666"},
{name: "Sudan", id: "SD", area: "1839542", density: "16.8", population: "30894000"},
{name: "New Zealand", id: "NZ", area: "270467", density: "17.21", population: "4654002"},
{name: "Angola", id: "AO", area: "1246700", density: "16.5", population: "20609294"},
{name: "Paraguay", id: "PY", area: "406752", density: "16.4", population: "6672631"},
{name: "Niger", id: "NE", area: "1186408", density: "14.4", population: "17129076"},
{name: "Russia", id: "RU", area: "17098242", density: "8.42", population: "143975923"},
{name: "Central African Republic", id: "CF", area: "622436", density: "7.42", population: "4616000"},
{name: "Gabon", id: "GA", area: "267667", density: "6.25", population: "1672000"},
{name: "Kazakhstan", id: "KZ", area: "2724900", density: "6.31", population: "17186000"},
{name: "Australia", id: "AU", area: "7692024", density: "3.12", population: "23975613"},
{name: "Mongolia", id: "MN", area: "1564100", density: "1.92", population: "3000000"},
{name: "Greenland", id: "GL", area: "2166000", density: "0.03", population: "55984"},
{name: "Macau", id: "MO", area: "30.3", density: "21224", population: "643100"},
{name: "South Korea", id: "KR", area: "100210", density: "503", population: "50423955"},
{name: "North Korea", id: "KP", area: "122762", density: "205", population: "25155000"}
]);
angular
.module('MyApp', ['anychart-angularjs'])
.controller('MyCtrl', ['$scope', function($scope) {
var map = anychart.map();
map.interactivity().selectionMode('none');
var density_data = dataSet.mapAs(undefined, {'size': 'population'});
var series = map.bubble(density_data);
series.labels().enabled(false);
series.selectionMode("none");
series.tooltip().wordWrap('break-word').useHtml(true);
series.tooltip().format(function() {
return '<span style="color: #d9d9d9">Density</span>: ' + parseFloat(this.getData('density')).toLocaleString() + ' pop./km² <br/>' +
'<span style="color: #d9d9d9">Population</span>: ' + parseInt(this.getData('population')).toLocaleString() + '<br/>' +
'<span style="color: #d9d9d9">Area</span>: ' + parseInt(this.getData('area')).toLocaleString() + ' km²';
});
var series_choropleth = map.choropleth(density_data);
series_choropleth.selectionMode("none");
series_choropleth.fill('#eaeaea');
series_choropleth.stroke('#D2D2D2');
series_choropleth.hovered().stroke('#eaeaea');
series_choropleth.hovered().fill('#D2D2D2');
series_choropleth.labels(null);
series_choropleth.tooltip().wordWrap('break-word').useHtml(true);
series_choropleth.tooltip().format(function() {
return '<span style="color: #d9d9d9">Density</span>: ' + parseFloat(this.getData('density')).toLocaleString() + ' pop./km² <br/>' +
'<span style="color: #d9d9d9">Population</span>: ' + parseInt(this.getData('population')).toLocaleString() + '<br/>' +
'<span style="color: #d9d9d9">Area</span>: ' + parseInt(this.getData('area')).toLocaleString() + ' km²';
});
$scope.myMap = map;
$scope.bubblesSize = function(chart) {
chart.maxBubbleSize(50);
chart.minBubbleSize(2);
};
}]);
})();
</script>
</head>
<body ng-controller="MyCtrl">
<div
anymap
ac-geo-data="anychart.maps.world"
ac-title="Worlds Population by Country"
ac-instance="myMap"
ac-chart-draw="bubblesSize"
style="width: 100%; height: 100%">
</div>
</body>
</html>