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