[map] got contact with layer
[u/erikhf/frm.git] / 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