Commit 6579b622 authored by Rron Jahja's avatar Rron Jahja
Browse files

Zoom when is pressed get location button.

get address from geo location
parent e07d35f0
This diff is collapsed.
...@@ -21,12 +21,15 @@ ...@@ -21,12 +21,15 @@
"@angular/router": "~8.1.2", "@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0", "@ionic-native/core": "^5.0.0",
"@ionic-native/geolocation": "^5.17.0", "@ionic-native/geolocation": "^5.17.0",
"@ionic-native/native-geocoder": "^5.17.1",
"@ionic-native/splash-screen": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0", "@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1", "@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0", "@ionic/storage": "^2.2.0",
"cordova-android": "8.1.0", "cordova-android": "8.1.0",
"cordova-browser": "^6.0.0",
"cordova-plugin-geolocation": "^4.0.2", "cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-nativegeocoder": "^3.2.2",
"cordova-sqlite-storage": "^3.4.0", "cordova-sqlite-storage": "^3.4.0",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"rxjs": "~6.5.1", "rxjs": "~6.5.1",
...@@ -77,10 +80,12 @@ ...@@ -77,10 +80,12 @@
}, },
"cordova-plugin-ionic-keyboard": {}, "cordova-plugin-ionic-keyboard": {},
"cordova-plugin-geolocation": {}, "cordova-plugin-geolocation": {},
"cordova-sqlite-storage": {} "cordova-sqlite-storage": {},
"cordova-plugin-nativegeocoder": {}
}, },
"platforms": [ "platforms": [
"android" "android",
"browser"
] ]
} }
} }
\ No newline at end of file
...@@ -10,7 +10,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx'; ...@@ -10,7 +10,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx'; import { Geolocation } from '@ionic-native/geolocation/ngx';
import { IonicStorageModule } from '@ionic/storage'; import { IonicStorageModule } from '@ionic/storage';
import { NativeGeocoder, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
// custom dependencies // custom dependencies
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
...@@ -31,6 +31,7 @@ import { RestService } from './rest.service'; ...@@ -31,6 +31,7 @@ import { RestService } from './rest.service';
StatusBar, StatusBar,
SplashScreen, SplashScreen,
RestService, RestService,
NativeGeocoder,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
...@@ -12,8 +12,10 @@ import { RestService } from '../../rest.service'; ...@@ -12,8 +12,10 @@ import { RestService } from '../../rest.service';
styleUrls: ['./login.page.scss'], styleUrls: ['./login.page.scss'],
}) })
export class LoginPage implements OnInit { export class LoginPage implements OnInit {
username = ""; username = "Bob@mail.com";
password = ""; password = "BobPassword";
//username = "";
//password = "";
correctCredentials = false; correctCredentials = false;
loginApi: Observable<any>; loginApi: Observable<any>;
......
...@@ -7,39 +7,41 @@ ...@@ -7,39 +7,41 @@
Home Home
</ion-title> </ion-title>
<ion-item class="checkbox-wrapper"> <ion-item class="checkbox-wrapper">
<!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox--> <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
<ion-label class="text" (click)="enable3DMaps()">3D</ion-label> <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
</ion-item> </ion-item>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div> <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 #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
<!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div--> <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
<ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed"> <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
<ion-fab-button> <ion-fab-button>
<ion-icon name="locate"></ion-icon> <ion-icon name="locate"></ion-icon>
</ion-fab-button> </ion-fab-button>
</ion-fab> </ion-fab>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<div class="bike-list-container"> <div class="bike-list-container">
<div class="bike-container" *ngFor="let bike of bikes"> <div class="bike-container" *ngFor="let bike of bikes">
<div class="bike-name"> <div class="bike-name">
{{bike.name}} {{bike.name}}
</div> </div>
<div class="battery-info"> <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>{{bike.batteryPercentage + " %"}}</div>
</div> </div>
<div class="address-info"> <div class="address-info">
<div class="disance">{{bike.distance + "m"}}</div> <div class="disance">{{bike.distance + " km"}}</div>
<div class="address">{{bike.address}}</div> <div class="address">{{bike.address+" "+bike.HouseNumber+ ", " +bike.PostalCode}}</div>
</div> </div>
</div> </div>
</div> </div>
</ion-footer> </ion-footer>
\ No newline at end of file
...@@ -18,8 +18,10 @@ export class HomePage { ...@@ -18,8 +18,10 @@ export class HomePage {
private platform: any; private platform: any;
private map: any; private map: any;
bikes = []; bikes = [];
streets = [];
bikeApi: Observable<any>; bikeApi: Observable<any>;
private currentLocation = { lat: 0, lng: 0 }; private currentLocation = { lat: 0, lng: 0 };
public is3DChecked = false; public is3DChecked = false;
...@@ -37,8 +39,7 @@ export class HomePage { ...@@ -37,8 +39,7 @@ export class HomePage {
public mapElement3d: ElementRef; public mapElement3d: ElementRef;
//@ViewChild("mapElement", { static: false })
//public mapElement: ElementRef;
constructor(private geolocation: Geolocation, constructor(private geolocation: Geolocation,
public restService: RestService, public restService: RestService,
...@@ -57,14 +58,14 @@ export class HomePage { ...@@ -57,14 +58,14 @@ export class HomePage {
ngAfterViewInit() { ngAfterViewInit() {
setTimeout(() => { setTimeout(() => {
this.loadmap("2D"); this.loadmap("2D");
}, 1000); }, 200);
window.addEventListener('resize', () => this.map.getViewPort().resize()); window.addEventListener('resize', () => this.map.getViewPort().resize());
} }
getBikesList() { getBikesList() {
this.geolocation.getCurrentPosition({ this.geolocation.getCurrentPosition({
maximumAge: 1000, timeout: 5000, maximumAge: 1000, timeout: 1000,
enableHighAccuracy: true enableHighAccuracy: true
}).then((resp) => { }).then((resp) => {
this.currentLocation.lat = resp.coords.latitude; this.currentLocation.lat = resp.coords.latitude;
...@@ -77,6 +78,14 @@ export class HomePage { ...@@ -77,6 +78,14 @@ export class HomePage {
this.bikeApi.subscribe((resp) => { this.bikeApi.subscribe((resp) => {
console.log('my data: ', resp); console.log('my data: ', resp);
this.bikes = 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)); }, (error) => console.log(error));
}); });
}, er => { }, er => {
...@@ -136,38 +145,40 @@ export class HomePage { ...@@ -136,38 +145,40 @@ export class HomePage {
var zoom = ui.getControl('zoom'); var zoom = ui.getControl('zoom');
mapSettings.setAlignment('top-right'); mapSettings.setAlignment('top-right');
zoom.setAlignment('left-top'); zoom.setAlignment('right-top');
if (style === "3D") { if (style === "3D") {
this.map.getViewModel().setLookAtData({ tilt: 60 }); this.map.getViewModel().setLookAtData({ tilt: 60 });
} }
this.getLocation(this.map); 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++) { 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]); 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]); 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]); 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]); 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() { getCurrentPosition() {
this.getLocation(this.map); this.getLocation(this.map.setZoom(17));
} }
getLocation(map) { getLocation(map) {
this.geolocation.getCurrentPosition( this.geolocation.getCurrentPosition(
{ {
maximumAge: 1000, timeout: 5000, maximumAge: 1000, timeout: 2000,
enableHighAccuracy: true enableHighAccuracy: true
} }
).then((resp) => { ).then((resp) => {
let lat = resp.coords.latitude let lat = resp.coords.latitude
...@@ -193,11 +204,7 @@ export class HomePage { ...@@ -193,11 +204,7 @@ export class HomePage {
map.setCenter({ lat: lat, lng: lng }); map.setCenter({ lat: lat, lng: lng });
} }
expandBikeList() {
for (let i = 0; i < 20; i++) {
this.tempArr.push(i + 3);
}
}
addMarker(lat, lng, img) { addMarker(lat, lng, img) {
var icon = new H.map.Icon(img); var icon = new H.map.Icon(img);
...@@ -223,4 +230,38 @@ export class HomePage { ...@@ -223,4 +230,38 @@ export class HomePage {
this.loadmap("3D"); this.loadmap("3D");
}, 100); }, 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);
});
}
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment