rest call for layer 2 and show it on map
[u/erikhf/frm.git] / src / components / map / map.ts
CommitLineData
a2d7d6b4
JHR
1import {Component, CORE_DIRECTIVES,} from 'angular2/angular2';
2import {Headers, Http} from 'angular2/http';
cb2c4ba8 3
1e6ce2f5 4
cb2c4ba8 5@Component({
28765058 6 selector: 'mou-map',
cb2c4ba8 7 directives: [CORE_DIRECTIVES],
28765058 8 templateUrl: './components/map/map.html'
cb2c4ba8
JHR
9})
10
11
28765058 12export class Map {
6ced1bc7 13
dd095993 14 map:Object;
dd095993 15 marker:Object;
6ced1bc7 16 http: Http;
dd095993
JHR
17
18 constructor(http:Http) {
6ced1bc7
JHR
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');
1e6ce2f5
EHF
25 }
26
a2d7d6b4 27
6ced1bc7 28 init() {
a2d7d6b4 29
6ced1bc7
JHR
30 let initMap = this.initMap;
31 let addMarker = this.addMarker;
32 let map = this.map;
dd095993
JHR
33 if (navigator.geolocation) {
34 navigator.geolocation.getCurrentPosition(function (position) {
6ced1bc7
JHR
35 let pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
36 initMap(pos,map,addMarker);
dd095993
JHR
37 }, function () {
38 //handleNoGeolocation(true);
39 }
40 );
41 } else {
42 alert("You do not support geolocation");
43 }
a2d7d6b4 44
cdcaf46c 45
a2d7d6b4
JHR
46 }
47
dd095993 48
6ced1bc7
JHR
49 initMap(location,map,addMarker){
50
51
52 map.setCenter(location,12);
53
54 addMarker(location,map,'This is YOU');
55
56
dd095993 57
6ced1bc7
JHR
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 }
dd095993 83
a2d7d6b4
JHR
84 logError(error) {
85 console.error(error);
86
cb2c4ba8 87 }
28765058 88
6ced1bc7
JHR
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 console.log(item);
111 console.log(item.featureType);
112 console.log(item.coordinates);
113 console.log(item.name);
114 let unit = {
115 "type": "Feature",
116 "geometry": {
117 "type": "MultiPolygon",
118 "coordinates": JSON.parse(item.coordinates)},
119 "properties": {
120 "name": item.name
121 }
122 };
123 this.map.data.addGeoJson(unit);
124 this.center(unit.geometry.coordinates);
125
126
127
128 }
129
130 center(coordinates){
131 // let bounds = new google.maps.LatLngBounds(coordinates);
132 /* console.log(coordinates.Array);
133 for (let i = 0; i < coordinates.length; i++) {
134 for(let j = 0; j < coordinates[i]; j++) {
135 console.log(coordinates.Array[j]);
136 bounds.extend(coordinates.Array[j]);
137 }
138
139 }*/
140 // for (let i = 0; i < coordinates.length; i++) {
141 // bounds.extend(new google.maps.LatLng(coordinates.[i][1], coordinates[i][2]));
142 // }
143 // console.log("center: " + bounds.getCenter());
144
145 }
146
dd095993 147
6ced1bc7
JHR
148 createOrgUnit(){
149 console.log('you just added a new organisation unit');
150 }
dd095993 151
6ced1bc7
JHR
152 deleteMarker(){
153 console.log('you just deleted the marker');
154 }
155 //Other map functions
156
157
158}
dd095993 159
dd095993
JHR
160
161
162
163