src/components/map/map.ts

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