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
  26     // COLORS:Object;
  27
  28     constructor(http:Http) {
  29
  30         this.activeId = null;
  31         this.newactive = new EventEmitter();
  32         this.neworg = new EventEmitter();
  33         this.map = new google.maps.Map(document.getElementById("map"), {
  34             center: {lat: 0, lng: 0},
  35             zoom: 12,
  36             mapTypeControlOptions: {
  37                 position: google.maps.ControlPosition.BOTTOM_CENTER
  38             },
  39             zoomControlOptions: {
  40                 position: google.maps.ControlPosition.LEFT_BOTTOM
  41             },
  42             streetViewControl: false
  43         });
  44         this.init();
  45         this.http = http;
  46         this.LEVEL = 2;//
  47         this.runned = false;
  48         this.getLevels(this);
  49         // this.getData('?paging=false&level=2', this);/////////////////////////////////////////////////////////
  50         this.parent = null;
  51         this.currentPos = null;
  52         this.uprunned = false;
  53         this.currentMarker = null;
  54         // this.COLORS = {'red','brown',',yellow','green',',pink','purple','gray','black'};
  55         this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
  56         this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
  57         this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
  58         this.hideModal = document.getElementById("divModal").style.display = "none";
  59     }
  60
  61     setActiveId(id) {
  62         this.activeId = id;
  63     }
  64
  65     getMap() {
  66         return this.map;
  67     }
  68
  69     getHttp() {
  70         return this.http;
  71     }
  72
  73     setcurrentPos(latlng) {
  74         this.currentPos = latlng;
  75     }
  76
  77     getcurrentPos() {
  78         return this.currentPos;
  79     }
  80
  81     setParent(id) {
  82         this.parent = id;
  83     }
  84
  85     getParent() {
  86         return this.parent;
  87     }
  88
  89     setRunned(value) {
  90         this.runned = value;
  91     }
  92
  93     setupRunned(value) {
  94         this.uprunned = value;
  95     }
  96
  97     setLevel(value) {
  98         this.LEVEL = value;
  99     }
 100
 101     addLevel() {
 102         this.LEVEL++;
 103     }
 104
 105     upLevel() {
 106         this.LEVEL--;
 107     }
 108
 109     init() {
 110
 111         let map = this.map;
 112         let pos = {lat: 9.1, lng: -11.6};
 113
 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         // TODO: test på feature og behandle type: NONE
 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                     "name": item.name,
 201                     "id": item.id,
 202                     "color": "gray",
 203                     "icon": null
 204                 }
 205             };
 206             if (unit.geometry.type == 'Point') {
 207                 unit.properties.icon = {
 208                     path: google.maps.SymbolPath.CIRCLE,
 209                     strokeColor: 'black',
 210                     scale: 3
 211                 };
 212             }
 213
 214             this.map.data.addGeoJson(unit);
 215             this.map.data.setStyle(function (feature) {
 216                 let color = 'gray';
 217                 let icon;
 218                 if (feature.getProperty('icon') !== null) {
 219                     icon = feature.getProperty('icon');
 220                 }
 221                 color = feature.getProperty('color');
 222                 return /** @type {google.maps.Data.StyleOptions} */({
 223                     fillColor: color,
 224                     strokeColor: color,
 225                     strokeWeight: 3,
 226                     icon: icon
 227                 });
 228             });
 229
 230             this.map.data.addListener('click', function (event) {
 231                 instance.setActiveId(event.feature.O.id);
 232                 instance.setcurrentPos(event.latLng);
 233
 234                 if (instance.uprunned == false && instance.LEVEL == 2) {
 235                     this.hideModal = document.getElementById("topLevel").style.visibility = "visible";
 236                     this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
 237                     this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
 238                     instance.showModal();
 239
 240                 }
 241                 else if (instance.runned == false && instance.LEVEL < instance.allLevels) {
 242                     this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
 243                     this.hideModal = document.getElementById("middleLevel").style.visibility = "visible";
 244                     this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
 245                     instance.showModal();
 246                 } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) {
 247
 248                     this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
 249                     this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
 250                     this.hideModal = document.getElementById("bottomLevel").style.visibility = "visible";
 251
 252                     instance.setcurrentPos(event.latLng);
 253                     instance.showModal();
 254                 }
 255             });
 256         }
 257         else {
 258             // ToDO:
 259             console.log("fiks meg! gi warning på topp av kart");
 260         }
 261     }
 262
 263     drillDown() {
 264         this.closeModal();
 265         let map = this.getMap();
 266         let id = this.activeId;
 267         let level = this.LEVEL;
 268         console.log(id);
 269         this.setRunned(true);
 270         this.setParent(id);
 271
 272         map.data.forEach(function (feature) {
 273             if (!(feature.O.id == id && level == 3)) {
 274                 map.data.remove(feature);
 275
 276             }
 277         });
 278
 279         this.addLevel();
 280         this.getData('/' + id + '/children', this);
 281
 282     }
 283
 284     drillUp() {
 285
 286
 287         this.setupRunned(true);
 288         this.upLevel();
 289         let instance = this;
 290         this.closeModal();
 291         this.map.data.forEach(function (feature) {
 292             instance.map.data.remove(feature);
 293
 294         });
 295         if(this.currentMarker !== null){
 296             this.currentMarker.setMap(null);
 297         }
 298         let parent = instance.getParent();
 299         instance.getData('/' + parent, instance, true);
 300
 301         this.closeModal();
 302     }
 303
 304     seeDetails() {
 305         let map = this.getMap();
 306         let id = this.activeId;
 307         this.closeModal();
 308         map.data.forEach(function (feature) {
 309             if (feature.getProperty('id') == id) {
 310                 feature.setProperty('color', 'red');
 311                 if (feature.getProperty('icon') !== null) {
 312                     feature.O.icon.strokeColor = 'red';
 313                 }
 314             }
 315             else {
 316                 feature.setProperty('color', 'gray');
 317                 if (feature.getProperty('icon') !== null) {
 318                     feature.O.icon.strokeColor = 'black';
 319                 }
 320             }
 321         });
 322         this.newactive.next(this.activeId);
 323     }
 324
 325     addUnit() {
 326         this.closeModal();
 327         let pos = this.getcurrentPos();
 328         let lat = pos.lat();
 329         let lng = pos.lng();
 330         let parent = this.getParent();
 331
 332         let location = {lat: lat, lng: lng};
 333         let event = {location, parent};
 334         this.neworg.next(event);
 335         this.closeModal();
 336         this.setRunned(false);
 337     }
 338
 339     update(event) {
 340         this.newactive.next(event);
 341         let map = this.getMap();
 342         let http = this.getHttp();
 343
 344         map.data.forEach(function (feature) {
 345             map.data.remove(feature);
 346         });
 347         http.get(dhisAPI + '/api/organisationUnits/' + event)
 348             .map(res => res.json())
 349             .subscribe(
 350                 res=> this.mapUpdate(res, this)
 351             );
 352     }
 353
 354     mapUpdate(res, instance) {
 355         this.setLevel(res.level);
 356         this.setParent(res.parent.id);
 357         this.drawPolygon(res, instance);
 358
 359     }
 360
 361     tempMarker(pos) {
 362         let map = this.map;
 363         if (this.currentMarker)
 364             this.currentMarker.setMap(null);
 365
 366         this.currentMarker = new google.maps.Marker({
 367             position: pos,
 368             map: map,
 369             title: 'neworg',
 370             icon: {
 371                 path: google.maps.SymbolPath.CIRCLE,
 372                 scale: 3
 373             }
 374         });
 375         this.currentMarker.setMap(map);
 376     }
 377
 378     showModal() {
 379         return this.hideModal = document.getElementById("divModal").style.display = "block";
 380     }
 381
 382     closeModal() {
 383         this.hideModal = document.getElementById("topLevel").style.visibility = "hidden";
 384         this.hideModal = document.getElementById("middleLevel").style.visibility = "hidden";
 385         this.hideModal = document.getElementById("bottomLevel").style.visibility = "hidden";
 386         this.hideModal = document.getElementById("divModal").style.display = "none";
 387
 388         this.setRunned(false);
 389     }
 390
 391 }
 392
 393
 394
 395
 396