Zoom when is pressed get location button.

get address from geo location

package.json

@@ -21,12 +21,15 @@
     "@angular/router": "~8.1.2",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/geolocation": "^5.17.0",
+    "@ionic-native/native-geocoder": "^5.17.1",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
     "@ionic/storage": "^2.2.0",
     "cordova-android": "8.1.0",
+    "cordova-browser": "^6.0.0",
     "cordova-plugin-geolocation": "^4.0.2",
+    "cordova-plugin-nativegeocoder": "^3.2.2",
     "cordova-sqlite-storage": "^3.4.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
@@ -77,10 +80,12 @@
       },
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-geolocation": {},
-      "cordova-sqlite-storage": {}
+      "cordova-sqlite-storage": {},
+      "cordova-plugin-nativegeocoder": {}
     },
     "platforms": [
-      "android"
+      "android",
+      "browser"
     ]
   }
-}
+}
\ No newline at end of file

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { IonicStorageModule } from '@ionic/storage';
-
+import { NativeGeocoder, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
 // custom dependencies
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -31,6 +31,7 @@ import { RestService } from './rest.service';
     StatusBar,
     SplashScreen,
     RestService,
+    NativeGeocoder,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

src/app/auth/login/login.page.ts

@@ -12,8 +12,10 @@ import { RestService } from '../../rest.service';
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
-  username = "";
-  password = "";
+  username = "Bob@mail.com";
+  password = "BobPassword";
+  //username = "";
+  //password = "";
   correctCredentials = false;
   loginApi: Observable<any>;
 

src/app/home/home.page.html

@@ -7,39 +7,41 @@
       Home
     </ion-title>
     <ion-item class="checkbox-wrapper">
-        <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
-        <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
-      </ion-item>
+      <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
+      <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
+    </ion-item>
   </ion-toolbar>
 </ion-header>
 <ion-content>
-    
+
   <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
   <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
   <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
-  <ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
-      <ion-fab-button>
-        <ion-icon name="locate"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
+  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="locate"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>
 
 <ion-footer>
-    
+
   <div class="bike-list-container">
-    
+
     <div class="bike-container" *ngFor="let bike of bikes">
       <div class="bike-name">
         {{bike.name}}
       </div>
       <div class="battery-info">
-        <div><ion-icon class="battery-icon" name="battery-charging"></ion-icon></div>
+        <div>
+          <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+        </div>
         <div>{{bike.batteryPercentage + " %"}}</div>
       </div>
       <div class="address-info">
-        <div class="disance">{{bike.distance + "m"}}</div>
-        <div class="address">{{bike.address}}</div>
+        <div class="disance">{{bike.distance + " km"}}</div>
+        <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
       </div>
     </div>
   </div>
-</ion-footer>
+</ion-footer>
\ No newline at end of file

src/app/home/home.page.ts

@@ -18,8 +18,10 @@ export class HomePage {
   private platform: any;
   private map: any;
   bikes = [];
+  streets = [];
   bikeApi: Observable<any>;
 
+
   private currentLocation = { lat: 0, lng: 0 };
 
   public is3DChecked = false;
@@ -37,8 +39,7 @@ export class HomePage {
   public mapElement3d: ElementRef;
 
 
-  //@ViewChild("mapElement", { static: false })
-  //public mapElement: ElementRef;
+ 
 
   constructor(private geolocation: Geolocation,
     public restService: RestService,
@@ -57,14 +58,14 @@ export class HomePage {
   ngAfterViewInit() {
     setTimeout(() => {
       this.loadmap("2D");
-    }, 1000);
+    }, 200);
 
     window.addEventListener('resize', () => this.map.getViewPort().resize());
   }
 
   getBikesList() {
     this.geolocation.getCurrentPosition({
-      maximumAge: 1000, timeout: 5000,
+      maximumAge: 1000, timeout: 1000,
       enableHighAccuracy: true
     }).then((resp) => {
       this.currentLocation.lat = resp.coords.latitude;
@@ -77,6 +78,14 @@ export class HomePage {
         this.bikeApi.subscribe((resp) => {
           console.log('my data: ', resp);
           this.bikes = resp;
+          for (let i = 0; i < this.bikes.length; i++) {
+            var beforeDotStr = ''+this.bikes[i].distance;
+            var beforeDot = beforeDotStr.split('.')[0];
+            var afterDotArr = beforeDotStr.split('.')[1].split('');
+            var afterDot = afterDotArr[0] + afterDotArr[1];
+            this.bikes[i].distance = beforeDot + '.' + afterDot; 
+            this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
+          }
         }, (error) => console.log(error));
       });
     }, er => {
@@ -136,38 +145,40 @@ export class HomePage {
     var zoom = ui.getControl('zoom');
 
     mapSettings.setAlignment('top-right');
-    zoom.setAlignment('left-top');
+    zoom.setAlignment('right-top');
     if (style === "3D") {
       this.map.getViewModel().setLookAtData({ tilt: 60 });
     }
     this.getLocation(this.map);
-    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png','../../../assets/images/25_percent.png','../../../assets/images/0_percent.png'];
+
+
+    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png', '../../../assets/images/25_percent.png', '../../../assets/images/0_percent.png'];
     for (let i = 0; i < this.bikes.length; i++) {
-      if(this.bikes[i].batteryPercentage<100 &&this.bikes[i].batteryPercentage>=75){
+      if (this.bikes[i].batteryPercentage < 100 && this.bikes[i].batteryPercentage >= 75) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
       }
-      else if(this.bikes[i].batteryPercentage<75 &&this.bikes[i].batteryPercentage>=50){
+      else if (this.bikes[i].batteryPercentage < 75 && this.bikes[i].batteryPercentage >= 50) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[1]);
       }
-      else if(this.bikes[i].batteryPercentage<50 &&this.bikes[i].batteryPercentage>=25){
+      else if (this.bikes[i].batteryPercentage < 50 && this.bikes[i].batteryPercentage >= 25) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[2]);
-      }else if(this.bikes[i].batteryPercentage<25 &&this.bikes[i].batteryPercentage>=0){
+      } else if (this.bikes[i].batteryPercentage < 25 && this.bikes[i].batteryPercentage >= 0) {
         this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[3]);
       }
-      //console.log("rroni", this.bikes[i].lat);
-     // this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
-      // this.addMarker(Number(48.78077362), 9.17782398, img[i % 3]);
-      //alert(this.bikes[i].lat);
+    
     }
   }
   getCurrentPosition() {
-    this.getLocation(this.map);
+    this.getLocation(this.map.setZoom(17));
+    
   }
+  
   getLocation(map) {
     this.geolocation.getCurrentPosition(
       {
-        maximumAge: 1000, timeout: 5000,
+        maximumAge: 1000, timeout: 2000,
         enableHighAccuracy: true
+        
       }
     ).then((resp) => {
       let lat = resp.coords.latitude
@@ -193,11 +204,7 @@ export class HomePage {
     map.setCenter({ lat: lat, lng: lng });
   }
 
-  expandBikeList() {
-    for (let i = 0; i < 20; i++) {
-      this.tempArr.push(i + 3);
-    }
-  }
+
 
   addMarker(lat, lng, img) {
     var icon = new H.map.Icon(img);
@@ -223,4 +230,38 @@ export class HomePage {
       this.loadmap("3D");
     }, 100);
   }
+
+  reverseGeocode(platform, lat, lng, index) {
+    var prox = lat + ',' + lng + ',56';
+    var geocoder = platform.getGeocodingService(),
+      parameters = {
+        prox: prox,
+        mode: 'retrieveAddresses',
+        maxresults: '1',
+        gen: '9'
+      };
+
+    geocoder.reverseGeocode(parameters, result => {
+      console.log(result);
+      var streets = result.Response.View[0].Result[0].Location.Address.Street;
+      var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
+      var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
+     
+      this.bikes[index].address = streets;
+      this.bikes[index].HouseNumber = houseNumber;
+      this.bikes[index].PostalCode = zipcode;
+
+    }, (error) => {
+      alert(error);
+    });
+  }
+
+
+
+
+
+
+
+
+
 }