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


272 if(!instance.popupON) {
273 instance.popupON = true;
274 console.log("hei");
275 instance.popup = new google.maps.InfoWindow({
276 content: e.feature.getProperty('name'),
277 position: e.latLng
278 });
279 instance.popup.open(instance.map);
280
281 }
282 });

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


284 instance.popupON = false;
285 instance.popup.open(null);

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