1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 import AmCharts from 'ammaps'; |
2 import AmCharts from 'ammaps'; |
|
3 import ENV from 'app-client/config/environment'; |
3 |
4 |
4 export default Ember.Component.extend({ |
5 export default Ember.Component.extend({ |
5 |
6 |
|
7 map: null, |
|
8 |
6 continentsMapVar: AmCharts.maps.continentsLow, |
9 continentsMapVar: AmCharts.maps.continentsLow, |
|
10 continentsAreas: [], |
7 countriesMapVar: AmCharts.maps.worldLow, |
11 countriesMapVar: AmCharts.maps.worldLow, |
|
12 countriesAreas: [], |
8 franceMapVar: AmCharts.maps.france2016Low, |
13 franceMapVar: AmCharts.maps.france2016Low, |
|
14 franceAreas: [], |
|
15 |
|
16 color: 'rgba(113,132,141,.2)', |
|
17 |
|
18 locationId: 'world', |
9 |
19 |
10 filter: Ember.inject.service(), |
20 filter: Ember.inject.service(), |
11 locationObserver: Ember.observer('filter.location', function() { |
21 locationObserver: Ember.observer('filter.location', function() { |
12 if(!this.get('filter').get('location')) { |
22 if(!this.get('filter').get('location')) { |
13 this.get('map').selectObject(); |
23 this.get('map').selectObject(); |
14 } |
24 } |
15 }), |
25 }), |
16 |
26 |
17 geostats: [], |
27 geostats: [], |
18 observerGeostats: Ember.observer('geostats', function() { |
28 observerGeostats: Ember.observer('geostats', function() { |
19 //console.log(this.get('geostats')); |
29 if(this.get('map')) { |
|
30 if(this.get('map').selectedObject.id) { |
|
31 if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) { |
|
32 if(this.get('map').selectedObject.id === 'FR') { |
|
33 this.setFranceAreas(); |
|
34 this.get('map')['dataProvider'] = { |
|
35 'mapVar': this.get('franceMapVar'), |
|
36 'getAreasFromMap': true, |
|
37 'areas': this.get('franceAreas') |
|
38 }; |
|
39 this.get('map').validateData(); |
|
40 } |
|
41 } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) { |
|
42 this.setCountriesAreas(); |
|
43 this.get('map')['dataProvider'] = { |
|
44 'mapVar': this.get('countriesMapVar'), |
|
45 'getAreasFromMap': true, |
|
46 'areas': this.get('countriesAreas'), |
|
47 'zoomLevel': this.get('map').zoomLevel(), |
|
48 'zoomLatitude': this.get('map').zoomLatitude(), |
|
49 'zoomLongitude': this.get('map').zoomLongitude() |
|
50 }; |
|
51 this.get('map').validateData(); |
|
52 } |
|
53 } else { |
|
54 this.createAmMap(); |
|
55 } |
|
56 } |
20 }), |
57 }), |
|
58 |
|
59 init: function() { |
|
60 this._super(...arguments); |
|
61 if (ENV.environment === 'development') { |
|
62 this.set('color', 'rgba(141,113,113,.2)'); |
|
63 } |
|
64 }, |
|
65 |
|
66 setFranceAreas: function() { |
|
67 var self = this; |
|
68 var france2016LowAreas = []; |
|
69 this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) { |
|
70 var object = { |
|
71 'id': area.id, |
|
72 'passZoomValuesToTarget': false, |
|
73 'autoZoom': false |
|
74 }; |
|
75 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
|
76 object['mouseEnabled'] = false, |
|
77 object['color'] = self.get('color'); |
|
78 } |
|
79 france2016LowAreas.push(object); |
|
80 }); |
|
81 this.set('franceAreas', france2016LowAreas); |
|
82 }, |
|
83 |
|
84 setCountriesAreas: function() { |
|
85 var self = this; |
|
86 var worldLowAreas = []; |
|
87 this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) { |
|
88 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
|
89 worldLowAreas.push({ |
|
90 'id': area.id, |
|
91 'mouseEnabled': false, |
|
92 'color': self.get('color') |
|
93 }); |
|
94 } else { |
|
95 if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { |
|
96 var object = { |
|
97 'id': area.id, |
|
98 'selectable': true |
|
99 }; |
|
100 if(area.id === 'FR') { |
|
101 object['autoZoom'] = true; |
|
102 } |
|
103 worldLowAreas.push(object); |
|
104 } |
|
105 } |
|
106 }); |
|
107 this.set('countriesAreas', worldLowAreas); |
|
108 }, |
|
109 |
|
110 setContinentsAreas: function() { |
|
111 var self = this; |
|
112 var continentsLowAreas = []; |
|
113 this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) { |
|
114 var object = { |
|
115 'id': area.id, |
|
116 'passZoomValuesToTarget': true, |
|
117 'selectable': true, |
|
118 'mouseEnabled': true, |
|
119 'autoZoom': true |
|
120 }; |
|
121 if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) { |
|
122 object['mouseEnabled'] = false, |
|
123 object['color'] = self.get('color'); |
|
124 } |
|
125 continentsLowAreas.push(object); |
|
126 }); |
|
127 this.set('continentsAreas', continentsLowAreas); |
|
128 }, |
21 |
129 |
22 didInsertElement: function(){ |
130 didInsertElement: function(){ |
23 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
131 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
24 this.createAmMap(); |
132 this.createAmMap(); |
25 }, |
133 }, |
26 |
134 |
27 createAmMap: function() { |
135 createAmMap: function() { |
|
136 console.log('createAmMap'); |
28 var self = this; |
137 var self = this; |
29 |
138 |
30 var france2016LowAreas = []; |
139 this.setContinentsAreas(); |
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 |
|
66 this.set('map', AmCharts.makeChart('mapdiv', { |
140 this.set('map', AmCharts.makeChart('mapdiv', { |
67 'type': 'map', |
141 'type': 'map', |
68 'fontFamily': 'sans-serif', |
142 'fontFamily': 'sans-serif', |
69 'fontSize': '12px', |
143 'fontSize': '12px', |
70 'dragMap': false, |
144 'dragMap': false, |