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 |
5 |
6 filter: Ember.inject.service(), |
6 filter: Ember.inject.service(), |
7 |
7 locationObserver: Ember.observer('filter.location', function() { |
8 didInsertElement: function(){ |
8 if(!this.get('filter').get('location')) { |
9 var _this = this; |
9 this.get('map').selectObject(); |
10 |
10 } |
11 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
11 }), |
12 |
12 |
13 var franceDataProvider = { |
13 didInsertElement: function(){ |
14 mapVar: AmCharts.maps.france2016Low, |
14 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
15 getAreasFromMap:true, |
15 this.createAmMap(); |
16 |
16 }, |
17 areas: this.initArea(AmCharts.maps.france2016Low) |
17 |
18 }; |
18 createAmMap: function() { |
19 |
19 this.set('map', AmCharts.makeChart('mapdiv', { |
20 var worldDataProvider = { |
20 'type': 'map', |
21 map: "worldLow", |
21 'fontFamily': 'sans-serif', |
22 getAreasFromMap: true, |
22 'fontSize': '12px', |
23 images: [{ |
23 'dragMap': false, |
24 id: "backButton", |
24 'zoomOnDoubleClick': false, |
25 label: "Back to continents map", |
25 'language': 'fr', |
26 rollOverColor: "#CC0000", |
26 |
27 labelRollOverColor: "#CC0000", |
27 'areasSettings': { |
28 useTargetsZoomValues: true, |
28 'autoZoom': false, |
29 left: 30, |
29 'selectable': true, |
30 bottom: 30, |
30 'color': '#becfd4', |
31 labelFontSize: 15, |
31 'colorOutline': '#253946', |
32 selectable: true |
32 'selectedColor': '#253946', |
33 }], |
33 'rollOverOutlineColor': '#253946' |
34 areas: this.initArea(AmCharts.maps.worldLow, franceDataProvider) |
34 }, |
35 }; |
35 |
36 |
36 'zoomControl': { |
37 |
37 'zoomControlEnabled': false, |
38 var continentsDataProvider = { |
38 }, |
39 map: "continentsLow", |
39 |
40 |
40 'dataProvider': { |
41 areas: [{ |
41 'map': 'continentsLow', |
42 id: "africa", |
42 'areas': [{ |
43 linkToObject: worldDataProvider, |
43 'id':'south_america', |
44 color: "#373737", |
44 'linkToObject': { |
45 passZoomValuesToTarget: true |
45 'map': 'worldLow', |
46 }, { |
46 'getAreasFromMap': true |
47 id: "asia", |
47 }, |
48 linkToObject: worldDataProvider, |
48 'passZoomValuesToTarget': true, |
49 color: "#515151", |
49 'autoZoom': true |
50 selectable: false, |
50 }, |
51 passZoomValuesToTarget: true |
51 { |
52 }, { |
52 'id':'north_america', |
53 id: "australia", |
53 'linkToObject': { |
54 linkToObject: worldDataProvider, |
54 'map': 'worldLow', |
55 color: "#6c6c6c", |
55 'getAreasFromMap': true |
56 selectable: false, |
56 }, |
57 passZoomValuesToTarget: true |
57 'passZoomValuesToTarget': true, |
58 }, { |
58 'autoZoom': true |
59 id: "europe", |
59 }, |
60 linkToObject: worldDataProvider, |
60 { |
61 color: "#888888", |
61 'id':'asia', |
62 passZoomValuesToTarget: true |
62 'linkToObject': { |
63 }, { |
63 'map': 'worldLow', |
64 id: "north_america", |
64 'getAreasFromMap': true |
65 linkToObject: worldDataProvider, |
65 }, |
66 color: "#a2a2a2", |
66 'passZoomValuesToTarget': true, |
67 passZoomValuesToTarget: true |
67 'autoZoom': true |
68 }, { |
68 }, |
69 id: "south_america", |
69 { |
70 linkToObject: worldDataProvider, |
70 'id':'europe', |
71 color: "#f1f1f1", |
71 'linkToObject': { |
72 selectable: false, |
72 'map': 'worldLow', |
73 passZoomValuesToTarget: true |
73 'getAreasFromMap': true, |
74 }] |
74 'areas': [{ |
75 |
75 'id': 'FR', |
76 }; |
76 'linkToObject': { |
77 |
77 'map': 'france2016Low', |
78 |
78 'getAreasFromMap': true, |
79 var map = AmCharts.makeChart("mapdiv", { |
79 'areas': [{ |
80 type: "map", |
80 'id': 'FR-A', |
81 |
81 'passZoomValuesToTarget': false, |
82 |
82 'autoZoom': false, |
83 areasSettings: { |
83 'selectable': true |
84 autoZoom: true, |
84 }, |
85 rollOverOutlineColor: "#000000", |
85 { |
86 selectedOutlineColor: "#CC0000", |
86 'id': 'FR-B', |
87 selectedColor: "green", |
87 'passZoomValuesToTarget': false, |
88 color: "#fff" |
88 'autoZoom': false, |
89 }, |
89 'selectable': true |
90 |
90 }, |
91 dataProvider: continentsDataProvider, |
91 { |
92 |
92 'id': 'FR-C', |
93 listeners: [{event:"clickMapObject", method:handleMapObjectClick}] |
93 'passZoomValuesToTarget': false, |
94 |
94 'autoZoom': false, |
95 }); |
95 'selectable': true |
96 |
96 }, |
97 function handleGoHome() { |
97 { |
98 map.dataProvider = continentsDataProvider; |
98 'id': 'FR-D', |
99 map.validateNow(); |
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 }, |
|
184 |
|
185 listeners: [{ |
|
186 'event':'clickMapObject', |
|
187 'method': Ember.run.bind(this, 'clickMapObject') |
|
188 }, |
|
189 { |
|
190 'event':'homeButtonClicked', |
|
191 'method': Ember.run.bind(this, 'homeButtonClicked') |
|
192 }] |
|
193 })); |
|
194 }, |
|
195 |
|
196 clickMapObject: function(event) { |
|
197 this.get('filter').set('location', event.mapObject.title); |
|
198 }, |
|
199 |
|
200 homeButtonClicked: function(event) { |
|
201 if(event.chart.dataProvider.map !== 'continentsLow') { |
|
202 this.createAmMap(); |
|
203 } |
100 } |
204 } |
101 function handleMapObjectClick (event) { |
205 |
102 if (event.mapObject.id === "backButton") { |
|
103 handleGoHome(); |
|
104 } |
|
105 _this.get('filter').set('location', event.mapObject.title); |
|
106 } |
|
107 |
|
108 // monitor when home icon was clicked and also go to continents map |
|
109 map.addListener("homeButtonClicked", handleGoHome); |
|
110 }, |
|
111 initArea: function(area, dataProvider){ |
|
112 var _this = this; |
|
113 |
|
114 var areaList = []; |
|
115 var count = {}; |
|
116 area.svg.g.path.map(function(elt){ |
|
117 var length = _this.get("documents").filterBy("spatial", elt.title).toArray().length; |
|
118 if (length > 0){ |
|
119 count[elt.id]= length; |
|
120 } |
|
121 }); |
|
122 area.svg.g.path.map(function(elt){ |
|
123 |
|
124 areaList.push({ |
|
125 id: elt.id, |
|
126 linkToObject: (elt.id === "FR" ? dataProvider : ""), |
|
127 color: ((typeof(count[elt.id]) === "undefined") ? "#fff" : "#2D7073"), |
|
128 autoZoom: (elt.id === "FR" ? true : false), |
|
129 selectable: true, |
|
130 passZoomValuesToTarget: false |
|
131 }); |
|
132 }); |
|
133 return areaList; |
|
134 } |
|
135 }); |
206 }); |