]>
Commit | Line | Data |
---|---|---|
7ee898bc | 1 | import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2'; |
a2d7d6b4 | 2 | import {Headers, Http} from 'angular2/http'; |
cb2c4ba8 JHR |
3 | |
4 | @Component({ | |
28765058 | 5 | selector: 'mou-map', |
cb2c4ba8 | 6 | directives: [CORE_DIRECTIVES], |
0fc3af96 | 7 | events: ['newactive', 'neworg'], |
28765058 | 8 | templateUrl: './components/map/map.html' |
cb2c4ba8 JHR |
9 | }) |
10 | ||
11 | ||
28765058 | 12 | export class Map { |
6ced1bc7 | 13 | |
0fc3af96 | 14 | hideModal:any; |
dd095993 | 15 | map:Object; |
65c7cdf5 JHR |
16 | http:Http; |
17 | LEVEL:number; | |
57a79ad4 | 18 | allLevels:Object; |
65c7cdf5 | 19 | runned:boolean; |
65c7cdf5 | 20 | uprunned:boolean; |
57a79ad4 | 21 | parent:Object; |
59ffa1e6 | 22 | activeId:string; |
57a79ad4 | 23 | currentPos:Object; |
59ffa1e6 | 24 | currentMarker:Object; |
e58627b7 | 25 | isSearched:boolean; |
d7f50e3a JHR |
26 | popupON:boolean; |
27 | popup:Object; | |
2e861c75 JHR |
28 | COLORS:Object; |
29 | colornum: number; | |
65c7cdf5 | 30 | |
19468546 | 31 | |
dd095993 | 32 | constructor(http:Http) { |
59ffa1e6 JHR |
33 | |
34 | this.activeId = null; | |
7ee898bc | 35 | this.newactive = new EventEmitter(); |
ebaf2f58 | 36 | this.neworg = new EventEmitter(); |
f800869b EHF |
37 | this.map = new google.maps.Map(document.getElementById("map"), { |
38 | center: {lat: 0, lng: 0}, | |
39 | zoom: 12, | |
40 | mapTypeControlOptions: { | |
41 | position: google.maps.ControlPosition.BOTTOM_CENTER | |
42 | }, | |
57a79ad4 | 43 | zoomControlOptions: { |
f800869b EHF |
44 | position: google.maps.ControlPosition.LEFT_BOTTOM |
45 | }, | |
46 | streetViewControl: false | |
47 | }); | |
6ced1bc7 JHR |
48 | this.init(); |
49 | this.http = http; | |
57a79ad4 | 50 | this.LEVEL = 2;// |
0d91e9f9 | 51 | this.runned = false; |
57a79ad4 | 52 | this.getLevels(this); |
65c7cdf5 | 53 | this.parent = null; |
a8451d12 | 54 | this.currentPos = null; |
951b1c9f | 55 | this.uprunned = false; |
59ffa1e6 | 56 | this.currentMarker = null; |
e58627b7 | 57 | this.isSearched = false; |
2e861c75 | 58 | this.colornum = 0; |
5e23d106 | 59 | this.COLORS = ['#ede1bb', '#1d407e', '#ff512e', '#662d47','#3b3a35', '#419175', '#983e41', '#f3002d', '#b0a875', '#00bfb5', '#926851', '#47a0a4','#333f50','#6f007b']; |
d7f50e3a | 60 | this.popupON = false; |
58627f9c | 61 | this.popup = null; |
784566de | 62 | } |
9d471cab | 63 | |
ac22d373 | 64 | |
57a79ad4 JHR |
65 | setActiveId(id) { |
66 | this.activeId = id; | |
67 | } | |
9992f01a | 68 | |
57a79ad4 JHR |
69 | getMap() { |
70 | return this.map; | |
71 | } | |
330dd6d3 | 72 | |
57a79ad4 JHR |
73 | getHttp() { |
74 | return this.http; | |
75 | } | |
b41d2490 | 76 | |
57a79ad4 JHR |
77 | setcurrentPos(latlng) { |
78 | this.currentPos = latlng; | |
79 | } | |
b41d2490 | 80 | |
57a79ad4 JHR |
81 | getcurrentPos() { |
82 | return this.currentPos; | |
83 | } | |
9d471cab | 84 | |
57a79ad4 JHR |
85 | setParent(id) { |
86 | this.parent = id; | |
87 | } | |
59ffa1e6 | 88 | |
57a79ad4 JHR |
89 | getParent() { |
90 | return this.parent; | |
91 | } | |
9992f01a | 92 | |
57a79ad4 JHR |
93 | setRunned(value) { |
94 | this.runned = value; | |
95 | } | |
36f8898a | 96 | |
57a79ad4 JHR |
97 | setupRunned(value) { |
98 | this.uprunned = value; | |
99 | } | |
65c7cdf5 | 100 | |
57a79ad4 JHR |
101 | setLevel(value) { |
102 | this.LEVEL = value; | |
103 | } | |
9992f01a | 104 | |
57a79ad4 JHR |
105 | addLevel() { |
106 | this.LEVEL++; | |
107 | } | |
65c7cdf5 | 108 | |
57a79ad4 JHR |
109 | upLevel() { |
110 | this.LEVEL--; | |
111 | } | |
b470b939 | 112 | |
19468546 JHR |
113 | /** |
114 | * initiates the map with position and zoom | |
115 | */ | |
6ced1bc7 | 116 | init() { |
a2d7d6b4 | 117 | |
6ced1bc7 | 118 | let map = this.map; |
b27f57f1 | 119 | let pos = {lat: 9.1, lng: -11.6}; |
b27f57f1 JHR |
120 | map.setCenter(pos, 0); |
121 | map.setZoom(7); | |
122 | ||
a2d7d6b4 JHR |
123 | } |
124 | ||
19468546 JHR |
125 | /** |
126 | * prints out error messages in the console | |
127 | * @param error | |
128 | */ | |
a2d7d6b4 JHR |
129 | logError(error) { |
130 | console.error(error); | |
131 | ||
cb2c4ba8 | 132 | } |
28765058 | 133 | |
19468546 JHR |
134 | /** |
135 | * gets data from DHIS API | |
136 | * @param query - for what kind of data to retrieve | |
137 | * @param instance - this instance to use | |
138 | * @param isParent - little hack to see if it is a parent you wish the children to | |
139 | */ | |
65c7cdf5 JHR |
140 | getData(query, instance, isParent) { |
141 | instance.http.get(dhisAPI + '/api/organisationUnits' + query) | |
6ced1bc7 JHR |
142 | .map(res => res.json()) |
143 | .subscribe( | |
65c7cdf5 | 144 | res => instance.parseResult(res, instance, isParent), |
c7e8b786 | 145 | error => instance.logError(error) |
6ced1bc7 | 146 | ); |
6ced1bc7 JHR |
147 | } |
148 | ||
19468546 JHR |
149 | /** |
150 | * Gets the number of levels the haiercy | |
151 | */ | |
57a79ad4 JHR |
152 | getLevels() { |
153 | this.http.get(dhisAPI + '/api/organisationUnitLevels') | |
154 | .map(res => res.json()) | |
155 | .subscribe( | |
e58627b7 | 156 | res => this.saveLevelTotalandGetdata(res, this), |
57a79ad4 JHR |
157 | err => this.logError(err) |
158 | ); | |
159 | } | |
160 | ||
e58627b7 | 161 | saveLevelTotalandGetdata(res, instance) { |
57a79ad4 | 162 | instance.allLevels = res.pager.total; |
e58627b7 | 163 | instance.getData('?paging=false&level=2', instance, false); |
57a79ad4 JHR |
164 | } |
165 | ||
65c7cdf5 | 166 | parseResult(res, instance, isParent) { |
65c7cdf5 | 167 | if (isParent) { |
03c7df04 | 168 | instance.setParent(res.parent.id); |
65c7cdf5 | 169 | instance.getData('/' + res.parent.id + '/children', instance, false); |
03c7df04 | 170 | } |
65c7cdf5 | 171 | else { |
951b1c9f JHR |
172 | if (res.organisationUnits) { |
173 | for (let item in res.organisationUnits) { | |
174 | this.getData('/' + res.organisationUnits[item].id, this); | |
175 | ||
b470b939 | 176 | } |
951b1c9f | 177 | instance.setupRunned(false); |
03c7df04 | 178 | instance.setRunned(false); |
951b1c9f JHR |
179 | } else if (!res.displayName && res.children) { |
180 | for (let item in res.children) { | |
181 | if (res.children[item].level == instance.LEVEL) { | |
182 | this.getData('/' + res.children[item].id, this); | |
183 | } | |
184 | } | |
185 | instance.setRunned(false); | |
186 | instance.setupRunned(false); | |
b470b939 | 187 | } |
951b1c9f JHR |
188 | else { |
189 | this.drawPolygon(res, instance); | |
190 | } | |
03c7df04 | 191 | } |
6ced1bc7 | 192 | } |
57a79ad4 | 193 | |
65c7cdf5 | 194 | drawPolygon(item, instance) { |
1f8c27ee | 195 | let feature; |
65c7cdf5 | 196 | let incoming:string; |
1f8c27ee | 197 | incoming = item.featureType.toLowerCase(); |
65c7cdf5 | 198 | switch (incoming) { |
1f8c27ee JHR |
199 | case "point": |
200 | feature = 'Point'; | |
201 | break; | |
202 | case "multi_polygon": | |
203 | feature = 'MultiPolygon'; | |
204 | break; | |
65c7cdf5 JHR |
205 | case "polygon": |
206 | feature = 'MultiPolygon'; | |
1f8c27ee JHR |
207 | break; |
208 | default: | |
209 | } | |
2cab9a95 | 210 | |
65c7cdf5 | 211 | if (feature !== undefined) { |
1f8c27ee JHR |
212 | let unit = { |
213 | "type": "Feature", | |
214 | "geometry": { | |
215 | "type": feature, | |
216 | "coordinates": JSON.parse(item.coordinates) | |
217 | }, | |
218 | "properties": { | |
e58627b7 | 219 | "title": item.name, |
1f8c27ee | 220 | "name": item.name, |
98cc809b | 221 | "id": item.id, |
2e861c75 | 222 | "color":instance.COLORS[instance.colornum], |
15b422d5 | 223 | "icon": null |
65c7cdf5 | 224 | } |
1f8c27ee | 225 | }; |
2e861c75 JHR |
226 | if(instance.COLORS.length == instance.colornum){ |
227 | instance.colornum = 0; | |
228 | }else{ instance.colornum++;} | |
229 | ||
65c7cdf5 | 230 | if (unit.geometry.type == 'Point') { |
15b422d5 JHR |
231 | unit.properties.icon = { |
232 | path: google.maps.SymbolPath.CIRCLE, | |
b3b5cc9c | 233 | strokeColor: 'black', |
ac22d373 | 234 | scale: 4 |
15b422d5 | 235 | }; |
bd209f35 | 236 | instance.map.setCenter({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]}); |
f3e550a1 | 237 | } |
65c7cdf5 | 238 | |
1f8c27ee | 239 | this.map.data.addGeoJson(unit); |
0fc3af96 | 240 | this.map.data.setStyle(function (feature) { |
15b422d5 JHR |
241 | let color = 'gray'; |
242 | let icon; | |
0fc3af96 EHF |
243 | if (feature.getProperty('icon') !== null) { |
244 | icon = feature.getProperty('icon'); | |
15b422d5 JHR |
245 | } |
246 | color = feature.getProperty('color'); | |
247 | return /** @type {google.maps.Data.StyleOptions} */({ | |
248 | fillColor: color, | |
ac22d373 JHR |
249 | fillOpacity: 0.91, |
250 | strokeColor: 'white', | |
251 | strokeWeight: 2, | |
15b422d5 JHR |
252 | icon: icon |
253 | }); | |
254 | }); | |
e58627b7 JHR |
255 | if(instance.isSearched){ |
256 | instance.seeDetails(); | |
257 | } | |
65c7cdf5 | 258 | this.map.data.addListener('click', function (event) { |
cad70644 | 259 | $('#myModal').modal('show'); |
59ffa1e6 JHR |
260 | instance.setActiveId(event.feature.O.id); |
261 | instance.setcurrentPos(event.latLng); | |
951b1c9f | 262 | |
59ffa1e6 | 263 | if (instance.uprunned == false && instance.LEVEL == 2) { |
cad70644 EHF |
264 | this.hideModal = document.getElementById("topLevel").style.display = "block"; |
265 | this.hideModal = document.getElementById("middleLevel").style.display = "none"; | |
266 | this.hideModal = document.getElementById("bottomLevel").style.display = "none"; | |
59ffa1e6 | 267 | } |
57a79ad4 | 268 | else if (instance.runned == false && instance.LEVEL < instance.allLevels) { |
cad70644 EHF |
269 | this.hideModal = document.getElementById("topLevel").style.display = "none"; |
270 | this.hideModal = document.getElementById("middleLevel").style.display = "block"; | |
271 | this.hideModal = document.getElementById("bottomLevel").style.display = "none"; | |
57a79ad4 | 272 | } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) { |
cad70644 EHF |
273 | this.hideModal = document.getElementById("topLevel").style.display = "none"; |
274 | this.hideModal = document.getElementById("middleLevel").style.display = "none"; | |
275 | this.hideModal = document.getElementById("bottomLevel").style.display = "block"; | |
951b1c9f | 276 | |
65c7cdf5 | 277 | instance.setcurrentPos(event.latLng); |
59ffa1e6 | 278 | } |
59ffa1e6 | 279 | }); |
d7f50e3a | 280 | |
19468546 | 281 | //slette ?? §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ |
bf25c5cf | 282 | /* this.map.data.addListener('mouseover', function (e) { |
d7f50e3a JHR |
283 | if(!instance.popupON) { |
284 | instance.popupON = true; | |
19468546 | 285 | |
d7f50e3a JHR |
286 | instance.popup = new google.maps.InfoWindow({ |
287 | content: e.feature.getProperty('name'), | |
288 | position: e.latLng | |
289 | }); | |
290 | instance.popup.open(instance.map); | |
291 | ||
292 | } | |
293 | }); | |
294 | this.map.data.addListener('mouseout', function (event) { | |
295 | instance.popupON = false; | |
296 | instance.popup.open(null); | |
bf25c5cf | 297 | });*/ |
d7f50e3a | 298 | |
59ffa1e6 | 299 | } |
bf25c5cf | 300 | } |
03c7df04 | 301 | |
bf25c5cf | 302 | drillDown(){ |
59ffa1e6 JHR |
303 | this.closeModal(); |
304 | let map = this.getMap(); | |
305 | let id = this.activeId; | |
306 | let level = this.LEVEL; | |
59ffa1e6 JHR |
307 | this.setRunned(true); |
308 | this.setParent(id); | |
784566de | 309 | |
59ffa1e6 JHR |
310 | map.data.forEach(function (feature) { |
311 | if (!(feature.O.id == id && level == 3)) { | |
312 | map.data.remove(feature); | |
03c7df04 | 313 | |
59ffa1e6 JHR |
314 | } |
315 | }); | |
03c7df04 | 316 | |
59ffa1e6 JHR |
317 | this.addLevel(); |
318 | this.getData('/' + id + '/children', this); | |
03c7df04 | 319 | |
59ffa1e6 | 320 | } |
bbee9db0 | 321 | |
bf25c5cf | 322 | drillUp(){ |
951b1c9f | 323 | |
03c7df04 | 324 | |
57a79ad4 JHR |
325 | this.setupRunned(true); |
326 | this.upLevel(); | |
327 | let instance = this; | |
328 | this.closeModal(); | |
329 | this.map.data.forEach(function (feature) { | |
330 | instance.map.data.remove(feature); | |
331 | ||
332 | }); | |
e58627b7 | 333 | if (this.currentMarker !== null) { |
57a79ad4 | 334 | this.currentMarker.setMap(null); |
15b422d5 | 335 | } |
57a79ad4 JHR |
336 | let parent = instance.getParent(); |
337 | instance.getData('/' + parent, instance, true); | |
338 | ||
59ffa1e6 JHR |
339 | this.closeModal(); |
340 | } | |
341 | ||
342 | seeDetails() { | |
343 | let map = this.getMap(); | |
344 | let id = this.activeId; | |
345 | this.closeModal(); | |
346 | map.data.forEach(function (feature) { | |
347 | if (feature.getProperty('id') == id) { | |
348 | feature.setProperty('color', 'red'); | |
b3b5cc9c JHR |
349 | if (feature.getProperty('icon') !== null) { |
350 | feature.O.icon.strokeColor = 'red'; | |
351 | } | |
e58627b7 | 352 | this.isSearched=false; |
b3b5cc9c JHR |
353 | } |
354 | else { | |
355 | feature.setProperty('color', 'gray'); | |
356 | if (feature.getProperty('icon') !== null) { | |
357 | feature.O.icon.strokeColor = 'black'; | |
358 | } | |
59ffa1e6 JHR |
359 | } |
360 | }); | |
361 | this.newactive.next(this.activeId); | |
6ced1bc7 JHR |
362 | } |
363 | ||
65c7cdf5 | 364 | addUnit() { |
59ffa1e6 | 365 | this.closeModal(); |
9992f01a | 366 | let pos = this.getcurrentPos(); |
951b1c9f | 367 | let lat = pos.lat(); |
59ffa1e6 | 368 | let lng = pos.lng(); |
59ffa1e6 JHR |
369 | let parent = this.getParent(); |
370 | ||
65c7cdf5 JHR |
371 | let location = {lat: lat, lng: lng}; |
372 | let event = {location, parent}; | |
ebaf2f58 | 373 | this.neworg.next(event); |
0fc3af96 | 374 | this.closeModal(); |
bc2f4c9e | 375 | this.setRunned(false); |
a8451d12 | 376 | } |
dd095993 | 377 | |
65c7cdf5 | 378 | update(event) { |
fa052229 | 379 | this.newactive.next(event); |
59ffa1e6 | 380 | let map = this.getMap(); |
36f8898a JHR |
381 | let http = this.getHttp(); |
382 | ||
59ffa1e6 JHR |
383 | map.data.forEach(function (feature) { |
384 | map.data.remove(feature); | |
36f8898a | 385 | }); |
65c7cdf5 | 386 | http.get(dhisAPI + '/api/organisationUnits/' + event) |
36f8898a JHR |
387 | .map(res => res.json()) |
388 | .subscribe( | |
d7f50e3a | 389 | res => this.mapUpdate(res, this) |
36f8898a | 390 | ); |
e58627b7 | 391 | |
7ee898bc | 392 | } |
d647078e | 393 | |
65c7cdf5 | 394 | mapUpdate(res, instance) { |
d647078e | 395 | this.setLevel(res.level); |
e58627b7 JHR |
396 | this.setActiveId(res.id); |
397 | this.isSearched = true; | |
d647078e | 398 | this.setParent(res.parent.id); |
e58627b7 JHR |
399 | |
400 | instance.getData('/' + res.parent.id + '/children', instance); | |
401 | if (res.coordinates == null || instance.LEVEL == instance.allLevels) { | |
402 | instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id) | |
403 | .map(res => res.json()) | |
404 | .subscribe( | |
405 | res => instance.drawPolygon(res, instance) | |
406 | ); | |
407 | } | |
d647078e JHR |
408 | |
409 | } | |
410 | ||
fa052229 EHF |
411 | tempMarker(pos) { |
412 | let map = this.map; | |
b3b5cc9c | 413 | if (this.currentMarker) |
fa052229 EHF |
414 | this.currentMarker.setMap(null); |
415 | ||
416 | this.currentMarker = new google.maps.Marker({ | |
417 | position: pos, | |
418 | map: map, | |
419 | title: 'neworg', | |
420 | icon: { | |
421 | path: google.maps.SymbolPath.CIRCLE, | |
ac22d373 | 422 | scale: 4 |
fa052229 EHF |
423 | } |
424 | }); | |
425 | this.currentMarker.setMap(map); | |
2cab9a95 | 426 | map.panTo(this.currentMarker.getPosition()); |
fa052229 | 427 | } |
b3b5cc9c | 428 | |
258519d6 | 429 | |
258519d6 | 430 | |
58627f9c | 431 | |
258519d6 | 432 | closeModal() { |
cad70644 | 433 | $("#myModal").modal("hide"); |
258519d6 JHR |
434 | this.setRunned(false); |
435 | } | |
436 | ||
6ced1bc7 | 437 | } |
dd095993 | 438 | |
dd095993 JHR |
439 | |
440 | ||
441 | ||
442 |