11 countriesMapVar: AmCharts.maps.worldLow, |
11 countriesMapVar: AmCharts.maps.worldLow, |
12 countriesAreas: [], |
12 countriesAreas: [], |
13 franceMapVar: AmCharts.maps.france2016Low, |
13 franceMapVar: AmCharts.maps.france2016Low, |
14 franceAreas: [], |
14 franceAreas: [], |
15 |
15 |
|
16 locationQueryParam: 'world', |
|
17 |
16 color: 'rgba(113,132,141,.2)', |
18 color: 'rgba(113,132,141,.2)', |
17 |
|
18 locationId: 'world', |
|
19 |
19 |
20 filter: Ember.inject.service(), |
20 filter: Ember.inject.service(), |
21 locationObserver: Ember.observer('filter.location', function() { |
21 locationObserver: Ember.observer('filter.location', function() { |
22 if(!this.get('filter').get('location')) { |
22 if(!this.get('filter').get('location')) { |
23 this.get('map').selectObject(); |
23 this.get('map').selectObject(); |
70 var object = { |
70 var object = { |
71 'id': area.id, |
71 'id': area.id, |
72 'passZoomValuesToTarget': false, |
72 'passZoomValuesToTarget': false, |
73 'autoZoom': false |
73 'autoZoom': false |
74 }; |
74 }; |
75 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
75 var departments = self.get('geostats').find(geostat => geostat.id === area.id); |
|
76 if(typeof departments === 'undefined') { |
76 object['mouseEnabled'] = false, |
77 object['mouseEnabled'] = false, |
77 object['color'] = self.get('color'); |
78 object['color'] = self.get('color'); |
|
79 } else { |
|
80 object['value'] = departments.get('count'); |
78 } |
81 } |
79 france2016LowAreas.push(object); |
82 france2016LowAreas.push(object); |
80 }); |
83 }); |
81 this.set('franceAreas', france2016LowAreas); |
84 this.set('franceAreas', france2016LowAreas); |
82 }, |
85 }, |
83 |
86 |
84 setCountriesAreas: function() { |
87 setCountriesAreas: function() { |
85 var self = this; |
88 var self = this; |
86 var worldLowAreas = []; |
89 var worldLowAreas = []; |
87 this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) { |
90 this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) { |
88 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
91 var countries = self.get('geostats').find(geostat => geostat.id === area.id); |
|
92 if(typeof countries === 'undefined') { |
89 worldLowAreas.push({ |
93 worldLowAreas.push({ |
90 'id': area.id, |
94 'id': area.id, |
91 'mouseEnabled': false, |
95 'mouseEnabled': false, |
92 'color': self.get('color') |
96 'color': self.get('color') |
93 }); |
97 }); |
94 } else { |
98 } else { |
95 if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { |
99 if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { |
96 var object = { |
100 var object = { |
97 'id': area.id, |
101 'id': area.id, |
98 'selectable': true |
102 'selectable': true, |
|
103 'value': countries.get('count') |
99 }; |
104 }; |
100 if(area.id === 'FR') { |
105 if(area.id === 'FR') { |
101 object['autoZoom'] = true; |
106 object['autoZoom'] = true; |
102 } |
107 } |
103 worldLowAreas.push(object); |
108 worldLowAreas.push(object); |
116 'passZoomValuesToTarget': true, |
121 'passZoomValuesToTarget': true, |
117 'selectable': true, |
122 'selectable': true, |
118 'mouseEnabled': true, |
123 'mouseEnabled': true, |
119 'autoZoom': true |
124 'autoZoom': true |
120 }; |
125 }; |
121 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
126 var continent = self.get('geostats').find(geostat => geostat.id === area.id); |
|
127 if(typeof continent === 'undefined') { |
122 object['mouseEnabled'] = false, |
128 object['mouseEnabled'] = false, |
123 object['color'] = self.get('color'); |
129 object['color'] = self.get('color'); |
|
130 } else { |
|
131 object['value'] = continent.get('count'); |
124 } |
132 } |
125 continentsLowAreas.push(object); |
133 continentsLowAreas.push(object); |
126 }); |
134 }); |
127 this.set('continentsAreas', continentsLowAreas); |
135 this.set('continentsAreas', continentsLowAreas); |
128 }, |
136 }, |
131 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
139 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
132 this.createAmMap(); |
140 this.createAmMap(); |
133 }, |
141 }, |
134 |
142 |
135 createAmMap: function() { |
143 createAmMap: function() { |
136 console.log('createAmMap'); |
|
137 var self = this; |
144 var self = this; |
138 |
|
139 this.setContinentsAreas(); |
145 this.setContinentsAreas(); |
140 this.set('map', AmCharts.makeChart('mapdiv', { |
146 this.set('map', AmCharts.makeChart('mapdiv', { |
141 'type': 'map', |
147 'type': 'map', |
142 'fontFamily': 'sans-serif', |
148 'fontFamily': 'sans-serif', |
143 'fontSize': '12px', |
149 'fontSize': '12px', |
144 'dragMap': false, |
150 'dragMap': false, |
145 'zoomOnDoubleClick': false, |
151 'zoomOnDoubleClick': false, |
146 'language': 'fr', |
152 'language': 'fr', |
147 |
|
148 'areasSettings': { |
153 'areasSettings': { |
149 'autoZoom': false, |
154 'autoZoom': false, |
150 'selectable': true, |
155 'selectable': true, |
151 'color': '#becfd4', |
156 'color': '#becfd4', |
|
157 'colorSolid': '#71848d', |
152 'colorOutline': '#253946', |
158 'colorOutline': '#253946', |
153 'selectedColor': '#253946', |
159 'selectedColor': '#253946', |
154 'rollOverOutlineColor': '#253946' |
160 'rollOverOutlineColor': '#253946' |
155 }, |
161 }, |
156 |
|
157 'zoomControl': { |
162 'zoomControl': { |
158 'zoomControlEnabled': false, |
163 'zoomControlEnabled': false, |
159 }, |
164 }, |
160 |
|
161 'dataProvider': { |
165 'dataProvider': { |
162 'mapVar': this.get('continentsMapVar'), |
166 'mapVar': this.get('continentsMapVar'), |
163 'areas': this.get('continentsAreas') |
167 'areas': this.get('continentsAreas') |
164 }, |
168 }, |
165 |
|
166 listeners: [{ |
169 listeners: [{ |
167 'event':'clickMapObject', |
170 'event':'clickMapObject', |
168 'method': Ember.run.bind(this, 'clickMapObject') |
171 'method': Ember.run.bind(this, 'clickMapObject') |
169 }, |
172 }, { |
170 { |
|
171 'event':'homeButtonClicked', |
173 'event':'homeButtonClicked', |
172 'method': Ember.run.bind(this, 'homeButtonClicked') |
174 'method': Ember.run.bind(this, 'homeButtonClicked') |
173 }] |
175 }] |
174 })); |
176 })); |
175 }, |
177 }, |
176 |
178 |
177 clickMapObject: function(event) { |
179 clickMapObject: function(event) { |
178 this.set('locationId', event.mapObject.id); |
180 this.set('locationQueryParam', event.mapObject.id); |
179 this.sendAction('area', event.mapObject.id); |
181 this.sendAction('setLocation', event.mapObject.id); |
180 this.get('filter').set('location', event.mapObject.title); |
182 this.get('filter').set('location', event.mapObject.title); |
181 }, |
183 }, |
182 |
184 |
183 homeButtonClicked: function(event) { |
185 homeButtonClicked: function(event) { |
184 if(event.chart.dataProvider.map !== 'continentsLow') { |
186 if(event.chart.dataProvider.map !== 'continentsLow') { |
185 this.sendAction('area', 'world'); |
187 this.sendAction('setLocation', 'world'); |
186 } |
188 } |
187 } |
189 } |
188 |
190 |
189 }); |
191 }); |