1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 import AmCharts from 'ammaps'; |
2 import AmCharts from 'ammaps'; |
3 |
3 |
4 export default Ember.Component.extend({ |
4 export default Ember.Component.extend({ |
|
5 |
|
6 continentsMapVar: AmCharts.maps.continentsLow, |
|
7 countriesMapVar: AmCharts.maps.worldLow, |
|
8 franceMapVar: AmCharts.maps.france2016Low, |
5 |
9 |
6 filter: Ember.inject.service(), |
10 filter: Ember.inject.service(), |
7 locationObserver: Ember.observer('filter.location', function() { |
11 locationObserver: Ember.observer('filter.location', function() { |
8 if(!this.get('filter').get('location')) { |
12 if(!this.get('filter').get('location')) { |
9 this.get('map').selectObject(); |
13 this.get('map').selectObject(); |
10 } |
14 } |
11 }), |
15 }), |
12 |
16 |
|
17 geostats: [], |
|
18 observerGeostats: Ember.observer('geostats', function() { |
|
19 //console.log(this.get('geostats')); |
|
20 }), |
|
21 |
13 didInsertElement: function(){ |
22 didInsertElement: function(){ |
14 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
23 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
15 this.createAmMap(); |
24 this.createAmMap(); |
16 }, |
25 }, |
17 |
26 |
18 createAmMap: function() { |
27 createAmMap: function() { |
|
28 var self = this; |
|
29 |
|
30 var france2016LowAreas = []; |
|
31 this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) { |
|
32 france2016LowAreas.push({ |
|
33 'id': area.id, |
|
34 'passZoomValuesToTarget': false, |
|
35 'autoZoom': false, |
|
36 'selectable': true |
|
37 }) |
|
38 }); |
|
39 |
|
40 var continentsLowAreas = []; |
|
41 this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) { |
|
42 var object = { |
|
43 'id': area.id, |
|
44 'linkToObject': { |
|
45 'mapVar': self.get('countriesMapVar'), |
|
46 'getAreasFromMap': true |
|
47 }, |
|
48 'passZoomValuesToTarget': true, |
|
49 'autoZoom': true |
|
50 }; |
|
51 if(area.id === 'europe') { |
|
52 object['linkToObject']['areas'] = [{ |
|
53 'id': 'FR', |
|
54 'linkToObject': { |
|
55 'mapVar': self.get('franceMapVar'), |
|
56 'getAreasFromMap': true, |
|
57 'areas': france2016LowAreas |
|
58 }, |
|
59 'autoZoom': true, |
|
60 'selectable': true |
|
61 }]; |
|
62 } |
|
63 continentsLowAreas.push(object); |
|
64 }); |
|
65 |
19 this.set('map', AmCharts.makeChart('mapdiv', { |
66 this.set('map', AmCharts.makeChart('mapdiv', { |
20 'type': 'map', |
67 'type': 'map', |
21 'fontFamily': 'sans-serif', |
68 'fontFamily': 'sans-serif', |
22 'fontSize': '12px', |
69 'fontSize': '12px', |
23 'dragMap': false, |
70 'dragMap': false, |
36 'zoomControl': { |
83 'zoomControl': { |
37 'zoomControlEnabled': false, |
84 'zoomControlEnabled': false, |
38 }, |
85 }, |
39 |
86 |
40 'dataProvider': { |
87 'dataProvider': { |
41 'map': 'continentsLow', |
88 'mapVar': this.get('continentsMapVar'), |
42 'areas': [{ |
89 'areas': continentsLowAreas |
43 'id':'south_america', |
|
44 'linkToObject': { |
|
45 'map': 'worldLow', |
|
46 'getAreasFromMap': true |
|
47 }, |
|
48 'passZoomValuesToTarget': true, |
|
49 'autoZoom': true |
|
50 }, |
|
51 { |
|
52 'id':'north_america', |
|
53 'linkToObject': { |
|
54 'map': 'worldLow', |
|
55 'getAreasFromMap': true |
|
56 }, |
|
57 'passZoomValuesToTarget': true, |
|
58 'autoZoom': true |
|
59 }, |
|
60 { |
|
61 'id':'asia', |
|
62 'linkToObject': { |
|
63 'map': 'worldLow', |
|
64 'getAreasFromMap': true |
|
65 }, |
|
66 'passZoomValuesToTarget': true, |
|
67 'autoZoom': true |
|
68 }, |
|
69 { |
|
70 'id':'europe', |
|
71 'linkToObject': { |
|
72 'map': 'worldLow', |
|
73 'getAreasFromMap': true, |
|
74 'areas': [{ |
|
75 'id': 'FR', |
|
76 'linkToObject': { |
|
77 'map': 'france2016Low', |
|
78 'getAreasFromMap': true, |
|
79 'areas': [{ |
|
80 'id': 'FR-A', |
|
81 'passZoomValuesToTarget': false, |
|
82 'autoZoom': false, |
|
83 'selectable': true |
|
84 }, |
|
85 { |
|
86 'id': 'FR-B', |
|
87 'passZoomValuesToTarget': false, |
|
88 'autoZoom': false, |
|
89 'selectable': true |
|
90 }, |
|
91 { |
|
92 'id': 'FR-C', |
|
93 'passZoomValuesToTarget': false, |
|
94 'autoZoom': false, |
|
95 'selectable': true |
|
96 }, |
|
97 { |
|
98 'id': 'FR-D', |
|
99 'passZoomValuesToTarget': false, |
|
100 'autoZoom': false, |
|
101 'selectable': true |
|
102 }, |
|
103 { |
|
104 'id': 'FR-E', |
|
105 'passZoomValuesToTarget': false, |
|
106 'autoZoom': false, |
|
107 'selectable': true |
|
108 }, |
|
109 { |
|
110 'id': 'FR-F', |
|
111 'passZoomValuesToTarget': false, |
|
112 'autoZoom': false, |
|
113 'selectable': true |
|
114 }, |
|
115 { |
|
116 'id': 'FR-G', |
|
117 'passZoomValuesToTarget': false, |
|
118 'autoZoom': false, |
|
119 'selectable': true |
|
120 }, |
|
121 { |
|
122 'id': 'FR-H', |
|
123 'passZoomValuesToTarget': false, |
|
124 'autoZoom': false, |
|
125 'selectable': true |
|
126 }, |
|
127 { |
|
128 'id': 'FR-I', |
|
129 'passZoomValuesToTarget': false, |
|
130 'autoZoom': false, |
|
131 'selectable': true |
|
132 }, |
|
133 { |
|
134 'id': 'FR-J', |
|
135 'passZoomValuesToTarget': false, |
|
136 'autoZoom': false, |
|
137 'selectable': true |
|
138 }, |
|
139 { |
|
140 'id': 'FR-K', |
|
141 'passZoomValuesToTarget': false, |
|
142 'autoZoom': false, |
|
143 'selectable': true |
|
144 }, |
|
145 { |
|
146 'id': 'FR-L', |
|
147 'passZoomValuesToTarget': false, |
|
148 'autoZoom': false, |
|
149 'selectable': true |
|
150 }, |
|
151 { |
|
152 'id': 'FR-M', |
|
153 'passZoomValuesToTarget': false, |
|
154 'autoZoom': false, |
|
155 'selectable': true |
|
156 }] |
|
157 }, |
|
158 'autoZoom': true, |
|
159 'selectable': true |
|
160 }] |
|
161 }, |
|
162 'passZoomValuesToTarget': true, |
|
163 'autoZoom': true |
|
164 }, |
|
165 { |
|
166 'id':'australia', |
|
167 'linkToObject': { |
|
168 'map': 'worldLow', |
|
169 'getAreasFromMap': true |
|
170 }, |
|
171 'passZoomValuesToTarget': true, |
|
172 'autoZoom': true |
|
173 }, |
|
174 { |
|
175 'id':'africa', |
|
176 'linkToObject': { |
|
177 'map': 'worldLow', |
|
178 'getAreasFromMap': true |
|
179 }, |
|
180 'passZoomValuesToTarget': true, |
|
181 'autoZoom': true |
|
182 }] |
|
183 }, |
90 }, |
184 |
91 |
185 listeners: [{ |
92 listeners: [{ |
186 'event':'clickMapObject', |
93 'event':'clickMapObject', |
187 'method': Ember.run.bind(this, 'clickMapObject') |
94 'method': Ember.run.bind(this, 'clickMapObject') |
193 })); |
100 })); |
194 }, |
101 }, |
195 |
102 |
196 clickMapObject: function(event) { |
103 clickMapObject: function(event) { |
197 this.get('filter').set('location', event.mapObject.title); |
104 this.get('filter').set('location', event.mapObject.title); |
|
105 |
|
106 /*this.get('geostats').forEach( function (geostat) { |
|
107 console.log('geostat', geostat.get('id'), geostat.get('count')); |
|
108 });*/ |
198 }, |
109 }, |
199 |
110 |
200 homeButtonClicked: function(event) { |
111 homeButtonClicked: function(event) { |
201 if(event.chart.dataProvider.map !== 'continentsLow') { |
112 if(event.chart.dataProvider.map !== 'continentsLow') { |
202 this.createAmMap(); |
113 this.createAmMap(); |