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     marker:Object;
  17     http: Http;
  18
  19     constructor(http:Http) {
  20         this.newactive = new EventEmitter();
  21         this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
  22         this.init();
  23         this.http = http;
  24
  25         this.getData('?paging=false&level=2',this);
  26     }
  27
  28
  29     init() {
  30
  31         let initMap = this.initMap;
  32         let addMarker = this.addMarker;
  33         let map = this.map;
  34         if (navigator.geolocation) {
  35             navigator.geolocation.getCurrentPosition(function (position) {
  36                     let pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  37                     initMap(pos,map,addMarker);
  38                 }, function () {
  39                 //handleNoGeoLocation()
  40                 }
  41             );
  42         } else {
  43             alert("You do not support geolocation");
  44         }
  45
  46
  47     }
  48
  49
  50     initMap(location,map,addMarker){
  51
  52         map.setCenter(location,12);
  53         addMarker(location,map,'This is YOU');
  54
  55
  56
  57         map.addListener('click', function (event) {
  58                 addMarker(event.latLng,map, 'Want to add a new marker here ? <br> <button onclick=\"createOrgUnit()\">Yes</button> <button onclick=\"deleteMarker()">No</button> ');
  59             }
  60         );
  61
  62     }
  63
  64     addMarker(location, map, title) {
  65
  66         let marker = new google.maps.Marker({
  67             position: location,
  68             map: map
  69         });
  70
  71         let infowindow = new google.maps.InfoWindow({
  72             content: title
  73         });
  74
  75         marker.addListener('click', function () {
  76             console.log(marker);
  77             infowindow.open(map,marker);
  78         });
  79
  80     }
  81
  82     logError(error) {
  83         console.error(error);
  84
  85     }
  86
  87     getData(query,instance){
  88         console.log(instance.http);
  89         instance.http.get(dhisAPI+'/api/organisationUnits'+query)
  90             .map(res => res.json())
  91             .subscribe(
  92                 res => instance.parseResult(res),
  93                 error => instance.logError(error)
  94             );
  95
  96     }
  97
  98     parseResult(res){
  99
 100         if(res.organisationUnits) {
 101             for (let item in res.organisationUnits) {
 102                 this.getData('/' + res.organisationUnits[item].id,this);
 103             }
 104             //liten hack
 105         }//else if(res.name != false){
 106            // for (let item in res.children) {
 107              //   this.getData('/' + res.children[item].id,this);
 108             //}
 109         //}
 110         else {
 111
 112             this.drawPolygon(res);};
 113     }
 114     drawPolygon(item){
 115         let instance = this;
 116         let feature;
 117         let incoming: string;
 118         incoming = item.featureType.toLowerCase();
 119         switch(incoming){
 120             case "point":
 121                 feature = 'Point';
 122                 break;
 123             case "multi_polygon":
 124                 feature = 'MultiPolygon';
 125                 break;
 126              case "polygon":
 127                  feature = 'MultiPolygon';
 128                 break;
 129             default:
 130         }
 131           // TODO: test på feature og behandle type: NONE
 132         if(feature !== undefined) {
 133             let unit = {
 134                 "type": "Feature",
 135                 "geometry": {
 136                     "type": feature,
 137                     "coordinates": JSON.parse(item.coordinates)
 138                 },
 139                 "properties": {
 140                     "name": item.name,
 141                     "id": item.id
 142                 }
 143             };
 144             this.map.data.addGeoJson(unit);
 145
 146             this.map.data.addListener('click', function(event) {
 147                //TODO: spør om man vil ned/opp eller se info
 148
 149                 let id = event.feature.O.id;
 150                 console.log(id);
 151
 152                 instance.map.data.forEach(function(feature) {
 153                     instance.map.data.remove(feature);
 154                 });
 155                // instance.getData('/' + id+'/children',instance);
 156                 instance.getData('/' + id,instance);
 157
 158             });
 159
 160
 161         }else {
 162             // ToDO:
 163             console.log("fiks meg! gi warning på topp av kart");
 164         }
 165
 166
 167     }
 168
 169
 170     createOrgUnit(){
 171         console.log('you just added a new organisation unit');
 172     }
 173
 174     deleteMarker(){
 175         console.log('you just deleted the marker');
 176     }
 177
 178     update(event){
 179         this.newactive.next(event);
 180     }
 181 }
 182
 183
 184
 185
 186