rest call for layer 2 and show it on map
authorJulie Hill Roa <julie.hill.roa@gmail.com>
Thu, 19 Nov 2015 15:21:32 +0000 (16:21 +0100)
committerJulie Hill Roa <julie.hill.roa@gmail.com>
Thu, 19 Nov 2015 15:21:32 +0000 (16:21 +0100)
src/components/map/map.ts

index 8bed45f..c69e370 100644 (file)
@@ -10,47 +10,30 @@ import {Headers, Http} from 'angular2/http';
 
 
 export class Map {
-    result:Object;
+
     map:Object;
-    pos:Object;
     marker:Object;
+    http: Http;
 
     constructor(http:Http) {
-        this.initMap();
-
-        var authHeader = new Headers();
-        authHeader.append('Authorization', 'Basic YWRtaW46ZGlzdHJpY3Q=');
-        this.result = {organisationUnits: []};
-        // http.get(dhisAPI+'/api/organisationUnits?paging=false', {headers: authHeader})
-        http.get('http://mydhis.com:8082/api/organisationUnits?paging=false', {headers: authHeader})
-            .map(res => res.json()).subscribe(
-            res => this.result = res,
-            error => this.logError(error)
-        );
+
+        this.map = new google.maps.Map(document.getElementById("map"),{center: {lat:0,lng:0}, zoom:12});
+        this.init();
+        this.http = http;
+
+        this.getData('?paging=false&level=2');
     }
 
 
-    initMap() {
+    init() {
 
+        let initMap = this.initMap;
+        let addMarker = this.addMarker;
+        let map = this.map;
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function (position) {
-                    this.pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-                    this.map = new google.maps.Map(document.getElementById("map"),
-                        {center: this.pos, zoom: 12});
-                    this.marker = new google.maps.Marker({
-                        position: this.pos,
-                        map: this.map,
-                        title: 'Me'
-                    });
-
-                    let infowindow = new google.maps.InfoWindow({
-                        content: "This is You"
-                    });
-                    this.marker.addListener('click', function () {
-                        infowindow.open(this.map, this.marker);
-                    });
-                   // this.map.addListener('click', this.addMarker(position.coords.latitude, position.coords.longitude));
-
+                    let pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+                    initMap(pos,map,addMarker);
                 }, function () {
                     //handleNoGeolocation(true);
                 }
@@ -63,36 +46,117 @@ export class Map {
     }
 
 
-    //Other map functions
-   // addMarker(lat, lng) {
+    initMap(location,map,addMarker){
+
+
+        map.setCenter(location,12);
+
+        addMarker(location,map,'This is YOU');
+
+
 
-     //   let marker = new google.maps.Marker({
-       //     position: {lat, lng},
-         //   map: this.map,
-        //    title: 'Me'
-        //});
-    //}
+        map.addListener('click', function (event) {
+                addMarker(event.latLng,map, 'Want to add a new marker here ? <br> <button onclick=\"createOrgUnit()\">Yes</button> <button onclick=\"deleteMarker()">No</button> ');
+            }
+        );
+
+    }
+
+    addMarker(location, map, title) {
+
+        let marker = new google.maps.Marker({
+            position: location,
+            map: map
+        });
+
+        let infowindow = new google.maps.InfoWindow({
+            content: title
+        });
+
+        marker.addListener('click', function () {
+            console.log(marker);
+            infowindow.open(map,marker);
+        });
+
+
+    }
 
     logError(error) {
         console.error(error);
 
     }
 
-}
+    getData(query){
+        this.http.get(dhisAPI+'/api/organisationUnits'+query)
+            .map(res => res.json())
+            .subscribe(
+                res => this.parseResult(res),
+                error => this.logError(error)
+            );
+
+    }
+
+    parseResult(res){
+
+        if(res.organisationUnits) {
+            for (let item in res.organisationUnits) {
+                this.getData('/' + res.organisationUnits[item].id);
+            }
+        } else {
+
+            this.drawPolygon(res);};
+    }
+    drawPolygon(item){
+        console.log(item);
+        console.log(item.featureType);
+        console.log(item.coordinates);
+        console.log(item.name);
+        let unit = {
+            "type": "Feature",
+            "geometry": {
+                "type": "MultiPolygon",
+                "coordinates": JSON.parse(item.coordinates)},
+            "properties": {
+                "name": item.name
+            }
+        };
+        this.map.data.addGeoJson(unit);
+        this.center(unit.geometry.coordinates);
+
+
+
+    }
+
+    center(coordinates){
+        // let bounds = new google.maps.LatLngBounds(coordinates);
+        /* console.log(coordinates.Array);
+         for (let i = 0; i < coordinates.length; i++) {
+         for(let j = 0; j < coordinates[i]; j++) {
+         console.log(coordinates.Array[j]);
+         bounds.extend(coordinates.Array[j]);
+         }
+
+         }*/
+        // for (let i = 0; i < coordinates.length; i++) {
+        //     bounds.extend(new google.maps.LatLng(coordinates.[i][1], coordinates[i][2]));
+        // }
+        // console.log("center: " + bounds.getCenter());
+
+    }
+
 
+    createOrgUnit(){
+        console.log('you just added a new organisation unit');
+    }
 
-/* showOnMap(){
- var bermudaTriangle = new google.maps.Polygon({
- paths: triangleCoords,
- strokeColor: '#FF0000',
- strokeOpacity: 0.8,
- strokeWeight: 2,
- fillColor: '#FF0000',
- fillOpacity: 0.35
- });
- bermudaTriangle.setMap(this.map);
+    deleteMarker(){
+        console.log('you just deleted the marker');
+    }
+    //Other map functions
+
+
+}
 
- }*/