merge med master
[u/erikhf/frm.git] / src / components / map / map.ts
CommitLineData
7ee898bc 1import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
a2d7d6b4 2import {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 12export 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
dd095993 31 constructor(http:Http) {
59ffa1e6
JHR
32
33 this.activeId = null;
7ee898bc 34 this.newactive = new EventEmitter();
ebaf2f58 35 this.neworg = new EventEmitter();
f800869b
EHF
36 this.map = new google.maps.Map(document.getElementById("map"), {
37 center: {lat: 0, lng: 0},
38 zoom: 12,
39 mapTypeControlOptions: {
40 position: google.maps.ControlPosition.BOTTOM_CENTER
41 },
57a79ad4 42 zoomControlOptions: {
f800869b
EHF
43 position: google.maps.ControlPosition.LEFT_BOTTOM
44 },
45 streetViewControl: false
46 });
6ced1bc7
JHR
47 this.init();
48 this.http = http;
57a79ad4 49 this.LEVEL = 2;//
0d91e9f9 50 this.runned = false;
57a79ad4 51 this.getLevels(this);
65c7cdf5 52 this.parent = null;
a8451d12 53 this.currentPos = null;
951b1c9f 54 this.uprunned = false;
59ffa1e6 55 this.currentMarker = null;
e58627b7 56 this.isSearched = false;
2e861c75 57 this.colornum = 0;
58627f9c 58 this.COLORS = ['#0a0f0f', '#141f1f', '#1f2e2e', '#293d3d', '#334c4c', '#3d5c5c', '#476b6b', '#527a7a', '#5c8a8a', '#669999', '#75a3a3', '#85adad'];
d7f50e3a 59 this.popupON = false;
58627f9c 60 this.popup = null;
784566de 61 }
9d471cab 62
57a79ad4
JHR
63 setActiveId(id) {
64 this.activeId = id;
65 }
9992f01a 66
57a79ad4
JHR
67 getMap() {
68 return this.map;
69 }
330dd6d3 70
57a79ad4
JHR
71 getHttp() {
72 return this.http;
73 }
b41d2490 74
57a79ad4
JHR
75 setcurrentPos(latlng) {
76 this.currentPos = latlng;
77 }
b41d2490 78
57a79ad4
JHR
79 getcurrentPos() {
80 return this.currentPos;
81 }
9d471cab 82
57a79ad4
JHR
83 setParent(id) {
84 this.parent = id;
85 }
59ffa1e6 86
57a79ad4
JHR
87 getParent() {
88 return this.parent;
89 }
9992f01a 90
57a79ad4
JHR
91 setRunned(value) {
92 this.runned = value;
93 }
36f8898a 94
57a79ad4
JHR
95 setupRunned(value) {
96 this.uprunned = value;
97 }
65c7cdf5 98
57a79ad4
JHR
99 setLevel(value) {
100 this.LEVEL = value;
101 }
9992f01a 102
57a79ad4
JHR
103 addLevel() {
104 this.LEVEL++;
105 }
65c7cdf5 106
57a79ad4
JHR
107 upLevel() {
108 this.LEVEL--;
109 }
b470b939 110
6ced1bc7 111 init() {
a2d7d6b4 112
6ced1bc7 113 let map = this.map;
b27f57f1 114 let pos = {lat: 9.1, lng: -11.6};
b27f57f1
JHR
115 map.setCenter(pos, 0);
116 map.setZoom(7);
117
a2d7d6b4
JHR
118 }
119
120 logError(error) {
121 console.error(error);
122
cb2c4ba8 123 }
28765058 124
65c7cdf5
JHR
125 getData(query, instance, isParent) {
126 instance.http.get(dhisAPI + '/api/organisationUnits' + query)
6ced1bc7
JHR
127 .map(res => res.json())
128 .subscribe(
65c7cdf5 129 res => instance.parseResult(res, instance, isParent),
c7e8b786 130 error => instance.logError(error)
6ced1bc7 131 );
6ced1bc7
JHR
132 }
133
57a79ad4
JHR
134 getLevels() {
135 this.http.get(dhisAPI + '/api/organisationUnitLevels')
136 .map(res => res.json())
137 .subscribe(
e58627b7 138 res => this.saveLevelTotalandGetdata(res, this),
57a79ad4
JHR
139 err => this.logError(err)
140 );
141 }
142
e58627b7 143 saveLevelTotalandGetdata(res, instance) {
57a79ad4 144 instance.allLevels = res.pager.total;
e58627b7 145 instance.getData('?paging=false&level=2', instance, false);
57a79ad4
JHR
146 }
147
65c7cdf5 148 parseResult(res, instance, isParent) {
65c7cdf5 149 if (isParent) {
03c7df04 150 instance.setParent(res.parent.id);
65c7cdf5 151 instance.getData('/' + res.parent.id + '/children', instance, false);
03c7df04 152 }
65c7cdf5 153 else {
951b1c9f
JHR
154 if (res.organisationUnits) {
155 for (let item in res.organisationUnits) {
156 this.getData('/' + res.organisationUnits[item].id, this);
157
b470b939 158 }
951b1c9f 159 instance.setupRunned(false);
03c7df04 160 instance.setRunned(false);
951b1c9f
JHR
161 } else if (!res.displayName && res.children) {
162 for (let item in res.children) {
163 if (res.children[item].level == instance.LEVEL) {
164 this.getData('/' + res.children[item].id, this);
165 }
166 }
167 instance.setRunned(false);
168 instance.setupRunned(false);
b470b939 169 }
951b1c9f
JHR
170 else {
171 this.drawPolygon(res, instance);
172 }
03c7df04 173 }
6ced1bc7 174 }
57a79ad4 175
65c7cdf5 176 drawPolygon(item, instance) {
1f8c27ee 177 let feature;
65c7cdf5 178 let incoming:string;
1f8c27ee 179 incoming = item.featureType.toLowerCase();
65c7cdf5 180 switch (incoming) {
1f8c27ee
JHR
181 case "point":
182 feature = 'Point';
183 break;
184 case "multi_polygon":
185 feature = 'MultiPolygon';
186 break;
65c7cdf5
JHR
187 case "polygon":
188 feature = 'MultiPolygon';
1f8c27ee
JHR
189 break;
190 default:
191 }
2cab9a95 192
65c7cdf5 193 if (feature !== undefined) {
1f8c27ee
JHR
194 let unit = {
195 "type": "Feature",
196 "geometry": {
197 "type": feature,
198 "coordinates": JSON.parse(item.coordinates)
199 },
200 "properties": {
e58627b7 201 "title": item.name,
1f8c27ee 202 "name": item.name,
98cc809b 203 "id": item.id,
2e861c75 204 "color":instance.COLORS[instance.colornum],
15b422d5 205 "icon": null
65c7cdf5 206 }
1f8c27ee 207 };
2e861c75
JHR
208 if(instance.COLORS.length == instance.colornum){
209 instance.colornum = 0;
210 }else{ instance.colornum++;}
211
65c7cdf5 212 if (unit.geometry.type == 'Point') {
15b422d5
JHR
213 unit.properties.icon = {
214 path: google.maps.SymbolPath.CIRCLE,
b3b5cc9c 215 strokeColor: 'black',
15b422d5
JHR
216 scale: 3
217 };
bd209f35 218 instance.map.setCenter({lat:unit.geometry.coordinates[1],lng:unit.geometry.coordinates[0]});
f3e550a1 219 }
65c7cdf5 220
1f8c27ee 221 this.map.data.addGeoJson(unit);
0fc3af96 222 this.map.data.setStyle(function (feature) {
15b422d5
JHR
223 let color = 'gray';
224 let icon;
0fc3af96
EHF
225 if (feature.getProperty('icon') !== null) {
226 icon = feature.getProperty('icon');
15b422d5
JHR
227 }
228 color = feature.getProperty('color');
229 return /** @type {google.maps.Data.StyleOptions} */({
230 fillColor: color,
231 strokeColor: color,
59ffa1e6 232 strokeWeight: 3,
15b422d5
JHR
233 icon: icon
234 });
235 });
e58627b7
JHR
236 if(instance.isSearched){
237 instance.seeDetails();
238 }
65c7cdf5 239 this.map.data.addListener('click', function (event) {
cad70644 240 $('#myModal').modal('show');
59ffa1e6
JHR
241 instance.setActiveId(event.feature.O.id);
242 instance.setcurrentPos(event.latLng);
951b1c9f 243
59ffa1e6 244 if (instance.uprunned == false && instance.LEVEL == 2) {
cad70644
EHF
245 this.hideModal = document.getElementById("topLevel").style.display = "block";
246 this.hideModal = document.getElementById("middleLevel").style.display = "none";
247 this.hideModal = document.getElementById("bottomLevel").style.display = "none";
59ffa1e6 248 }
57a79ad4 249 else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
cad70644
EHF
250 this.hideModal = document.getElementById("topLevel").style.display = "none";
251 this.hideModal = document.getElementById("middleLevel").style.display = "block";
252 this.hideModal = document.getElementById("bottomLevel").style.display = "none";
57a79ad4 253 } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
cad70644
EHF
254 this.hideModal = document.getElementById("topLevel").style.display = "none";
255 this.hideModal = document.getElementById("middleLevel").style.display = "none";
256 this.hideModal = document.getElementById("bottomLevel").style.display = "block";
951b1c9f 257
65c7cdf5 258 instance.setcurrentPos(event.latLng);
59ffa1e6 259 }
59ffa1e6 260 });
d7f50e3a
JHR
261
262
263 this.map.data.addListener('mouseover', function (e) {


264 if(!instance.popupON) {
265 instance.popupON = true;
266 console.log("hei");
267 instance.popup = new google.maps.InfoWindow({
268 content: e.feature.getProperty('name'),
269 position: e.latLng
270 });
271 instance.popup.open(instance.map);
272
273 }
274 });

275 this.map.data.addListener('mouseout', function (event) {


276 instance.popupON = false;
277 instance.popup.open(null);

278 });
279
59ffa1e6 280 }
59ffa1e6 281 }
03c7df04 282
2cab9a95
JHR
283 /* getpolygonCenter(coordinates,instance){
284 let bounds = new google.maps.LatLngBounds();
285 let polygonCoords = Array;
286 for(let i = 0; i < coordinates.length; i++){
287 for(let j = 0; j<coordinates[i].length; j++) {
288 for (let k = 0; k<coordinates[i][j].length; k++) {
289 polygonCoords[i] = new google.maps.LatLng(coordinates[i][j][k][0],coordinates[i][j][k][1]);
290 }
291 }
292 }
293
294 for (let i = 0; i < polygonCoords.length; i++) {
295 bounds.extend(polygonCoords[i]);
296 }
297
298 instance.map.panTo(bounds.getCenter());
299 }*/
300
59ffa1e6
JHR
301 drillDown() {
302 this.closeModal();
303 let map = this.getMap();
304 let id = this.activeId;
305 let level = this.LEVEL;
59ffa1e6
JHR
306 this.setRunned(true);
307 this.setParent(id);
784566de 308
59ffa1e6
JHR
309 map.data.forEach(function (feature) {
310 if (!(feature.O.id == id && level == 3)) {
311 map.data.remove(feature);
03c7df04 312
59ffa1e6
JHR
313 }
314 });
03c7df04 315
59ffa1e6
JHR
316 this.addLevel();
317 this.getData('/' + id + '/children', this);
03c7df04 318
59ffa1e6 319 }
bbee9db0 320
59ffa1e6 321 drillUp() {
951b1c9f 322
03c7df04 323
57a79ad4
JHR
324 this.setupRunned(true);
325 this.upLevel();
326 let instance = this;
327 this.closeModal();
328 this.map.data.forEach(function (feature) {
329 instance.map.data.remove(feature);
330
331 });
e58627b7 332 if (this.currentMarker !== null) {
57a79ad4 333 this.currentMarker.setMap(null);
15b422d5 334 }
57a79ad4
JHR
335 let parent = instance.getParent();
336 instance.getData('/' + parent, instance, true);
337
59ffa1e6
JHR
338 this.closeModal();
339 }
340
341 seeDetails() {
342 let map = this.getMap();
343 let id = this.activeId;
344 this.closeModal();
345 map.data.forEach(function (feature) {
346 if (feature.getProperty('id') == id) {
347 feature.setProperty('color', 'red');
b3b5cc9c
JHR
348 if (feature.getProperty('icon') !== null) {
349 feature.O.icon.strokeColor = 'red';
350 }
e58627b7 351 this.isSearched=false;
b3b5cc9c
JHR
352 }
353 else {
354 feature.setProperty('color', 'gray');
355 if (feature.getProperty('icon') !== null) {
356 feature.O.icon.strokeColor = 'black';
357 }
59ffa1e6
JHR
358 }
359 });
360 this.newactive.next(this.activeId);
6ced1bc7
JHR
361 }
362
65c7cdf5 363 addUnit() {
59ffa1e6 364 this.closeModal();
9992f01a 365 let pos = this.getcurrentPos();
951b1c9f 366 let lat = pos.lat();
59ffa1e6 367 let lng = pos.lng();
59ffa1e6
JHR
368 let parent = this.getParent();
369
65c7cdf5
JHR
370 let location = {lat: lat, lng: lng};
371 let event = {location, parent};
ebaf2f58 372 this.neworg.next(event);
0fc3af96 373 this.closeModal();
bc2f4c9e 374 this.setRunned(false);
a8451d12 375 }
dd095993 376
65c7cdf5 377 update(event) {
fa052229 378 this.newactive.next(event);
59ffa1e6 379 let map = this.getMap();
36f8898a
JHR
380 let http = this.getHttp();
381
59ffa1e6
JHR
382 map.data.forEach(function (feature) {
383 map.data.remove(feature);
36f8898a 384 });
65c7cdf5 385 http.get(dhisAPI + '/api/organisationUnits/' + event)
36f8898a
JHR
386 .map(res => res.json())
387 .subscribe(
d7f50e3a 388 res => this.mapUpdate(res, this)
36f8898a 389 );
e58627b7 390
7ee898bc 391 }
d647078e 392
65c7cdf5 393 mapUpdate(res, instance) {
d647078e 394 this.setLevel(res.level);
e58627b7
JHR
395 this.setActiveId(res.id);
396 this.isSearched = true;
d647078e 397 this.setParent(res.parent.id);
e58627b7
JHR
398
399 instance.getData('/' + res.parent.id + '/children', instance);
400 if (res.coordinates == null || instance.LEVEL == instance.allLevels) {
401 instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id)
402 .map(res => res.json())
403 .subscribe(
404 res => instance.drawPolygon(res, instance)
405 );
406 }
d647078e
JHR
407
408 }
409
fa052229
EHF
410 tempMarker(pos) {
411 let map = this.map;
b3b5cc9c 412 if (this.currentMarker)
fa052229
EHF
413 this.currentMarker.setMap(null);
414
415 this.currentMarker = new google.maps.Marker({
416 position: pos,
417 map: map,
418 title: 'neworg',
419 icon: {
420 path: google.maps.SymbolPath.CIRCLE,
421 scale: 3
422 }
423 });
424 this.currentMarker.setMap(map);
2cab9a95 425 map.panTo(this.currentMarker.getPosition());
fa052229 426 }
b3b5cc9c 427
258519d6 428
258519d6 429
58627f9c 430
258519d6 431 closeModal() {
cad70644 432 $("#myModal").modal("hide");
258519d6
JHR
433 this.setRunned(false);
434 }
435
6ced1bc7 436}
dd095993 437
dd095993
JHR
438
439
440
441