src/components/map/map.ts

   1 import {Component, EventEmitter,CORE_DIRECTIVES,} from 'angular2/angular2';
   2 import {Headers, Http} from 'angular2/http';
   3
   4
   5 @Component({
   6     selector: 'mou-map',
   7     directives: [CORE_DIRECTIVES],
   8     events: ['newactive'],
   9     templateUrl: './components/map/map.html'
  10 })
  11
  12
  13 export class Map {
  14
  15     map:Object;
  16     http: Http;
  17     LEVEL: number;
  18     runned: boolean;
  19     parent: Object;
  20     currentPos : Object;
  21     uprunned: boolean;
  22     constructor(http:Http) {
  23         this.newactive = new EventEmitter();
  24         this.newOrg = new EventEmitter();
  25         this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
  26         this.init();
  27         this.http = http;
  28         this.LEVEL = 2;
  29         this.runned = false;
  30         this.getData('?paging=false&level=2',this);
  31         this.parent =null ;
  32         this.currentPos = null;
  33         this.uprunned = false;
  34
  35     }
  36
  37     setcurrentPos(latlng){
  38         this.currentPos = latlng;
  39     }
  40      getcurrentPos(){
  41          return this.currentPos;
  42      }
  43
  44     setParent(id){
  45         this.parent=id;
  46     }
  47     getParent(){
  48         return this.parent;
  49
  50     }
  51
  52     setRunned(value){
  53         this.runned = value;
  54     }
  55
  56     setupRunned(value){
  57         this.uprunned = value;
  58     }
  59
  60     addLevel(){
  61         this.LEVEL++;
  62     }
  63     upLevel(){
  64         this.LEVEL--;
  65     }
  66
  67     init() {
  68
  69         let initMap = this.initMap;
  70         let instance = this;
  71         let map = this.map;
  72
  73         let pos = {lat: 9.1, lng: -10.6};
  74         initMap(pos,map,instance);
  75
  76     }
  77
  78
  79     initMap(location,map,instance){
  80         let add = instance.myFunction;
  81
  82         map.setCenter(location,12);
  83
  84         let infowindow = new google.maps.InfoWindow({
  85             //TODO: Style this
  86             content:'<div>Du you want to add a new OrgUnit here ?    <button onclick="myFunction()">Yes</button></div>'
  87         });
  88         map.addListener('click', function (e) {
  89             instance.setcurrentPos(e.latLng);
  90
  91
  92             var marker = new google.maps.Marker({
  93                 position: e.latLng,
  94                 map: map,
  95                 title: 'newOrg',
  96                 icon: {
  97                     path: google.maps.SymbolPath.CIRCLE,
  98                     scale: 5
  99                 }
 100
 101             });
 102             marker.setMap(map);
 103
 104             infowindow.open(map, marker);
 105
 106                  infowindow.addListener('closeclick', function (e) {
 107                      marker.setMap(null);
 108              });
 109
 110             instance.addUnit();
 111
 112             }
 113         );
 114
 115     }
 116
 117     logError(error) {
 118         console.error(error);
 119
 120     }
 121
 122     getData(query,instance, isParent){
 123         instance.http.get(dhisAPI+'/api/organisationUnits'+query)
 124             .map(res => res.json())
 125             .subscribe(
 126                 res => instance.parseResult(res,instance,isParent),
 127                 error => instance.logError(error)
 128
 129             );
 130
 131     }
 132
 133     parseResult(res,instance){
 134
 135       /*  if(isParent) {
 136             instance.ge
 137         }*/
 138        // else{
 139
 140
 141             if (res.organisationUnits) {
 142                 for (let item in res.organisationUnits) {
 143                     this.getData('/' + res.organisationUnits[item].id, this);
 144
 145                 }
 146                 instance.setupRunned(false);
 147                 //liten hack
 148             } else if (!res.displayName && res.children) {
 149                 for (let item in res.children) {
 150                     if (res.children[item].level == instance.LEVEL) {
 151                         this.getData('/' + res.children[item].id, this);
 152                     }
 153                 }
 154                 instance.setRunned(false);
 155                 instance.setupRunned(false);
 156             }
 157             else {
 158                 this.drawPolygon(res, instance);
 159             }
 160
 161       //  }
 162
 163     }
 164
 165     drawPolygon(item, instance){
 166         let feature;
 167         let incoming: string;
 168         incoming = item.featureType.toLowerCase();
 169         switch(incoming){
 170             case "point":
 171                 feature = 'Point';
 172                 break;
 173             case "multi_polygon":
 174                 feature = 'MultiPolygon';
 175                 break;
 176              case "polygon":
 177                  feature = 'MultiPolygon';
 178                 break;
 179             default:
 180         }
 181           // TODO: test på feature og behandle type: NONE
 182         if(feature !== undefined) {
 183             let unit = {
 184                 "type": "Feature",
 185                 "geometry": {
 186                     "type": feature,
 187                     "coordinates": JSON.parse(item.coordinates)
 188                 },
 189                 "properties": {
 190                     "name": item.name,
 191                     "id": item.id,
 192
 193                 },
 194                 "style": null
 195             };
 196             if(unit.geometry.type == 'Point'){
 197                //ToDO: add en style på markeren !
 198
 199             }
 200             this.map.data.addGeoJson(unit);
 201
 202             this.map.data.addListener('click', function(event) {
 203                //TODO: spør om man vil ned/opp eller se info
 204
 205                 if(instance.runned == false && instance.LEVEL > 1){
 206                     instance.setRunned(true);
 207
 208
 209                     let infowindow = new google.maps.InfoWindow({
 210                         //TODO: Style this
 211                         content:'<div> <button >DrillUP</button>' +
 212                         ' <button ">DrillDOWN</button>' +
 213                         '<button ">SEEINFO</button></div>'
 214                     });
 215
 216
 217                     infowindow.setPosition(event.latlng);
 218                    // infowindow.open(instance.map);
 219
 220
 221                     let id = event.feature.O.id;
 222                     instance.setParent(id);
 223                     console.log(id);
 224
 225
 226                     instance.map.data.forEach(function(feature) {
 227                         instance.map.data.remove(feature);
 228                     });
 229                     instance.addLevel();
 230                     instance.getData('/' + id+'/children',instance);
 231                 }
 232
 233             });
 234
 235             this.map.data.addListener('rightclick', function(event) {
 236                 if(instance.uprunned == false) {
 237                     instance.setupRunned(true);
 238
 239                     instance.upLevel();
 240
 241                     if (instance.LEVEL >= 2) {
 242                         instance.map.data.forEach(function (feature) {
 243                             instance.map.data.remove(feature);
 244                         });
 245                         let parent = instance.getParent();
 246                         instance.getData('/'+parent, instance,true);
 247                     }/*else if(instance.LEVEL > 2){
 248                         instance.map.data.forEach(function (feature) {
 249                             instance.map.data.remove(feature);
 250                         });
 251                         let parent = instance.getParent();
 252                         console.log('/' + parent + '/children', instance);
 253                         instance.getData('/' + parent + '/children', instance);
 254
 255                     }*/
 256                     else {
 257                         //TODO skriv en warning om at man ikke kan gå opp
 258
 259                 }
 260
 261                 }
 262             });
 263
 264
 265         }else {
 266             // ToDO:
 267             console.log("fiks meg! gi warning på topp av kart");
 268         }
 269
 270
 271     }
 272
 273     addUnit(){
 274
 275         let parent = this.getParent();
 276         let pos = this.getcurrentPos();
 277         let lat = pos.lat();
 278         let lng = pos.lng()
 279         let location= {lat: lat, lng: lng};
 280         let event =  {location,parent};
 281         this.newOrg.next(event);
 282
 283     }
 284
 285     myFunction(){
 286         console.log("Inne i myfunksjonen");
 287     }
 288
 289     update(event){
 290         this.newactive.next(event);
 291     }
 292 }
 293
 294
 295
 296
 297