src/components/map/map.ts

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