Commit 58c2be10 authored by Rron Jahja's avatar Rron Jahja
Browse files

Map shows the real position of the bikes.

Added new icons that shows current battery level of each bike.
parent 200d579e
master 10-show-bikes-from-api-response-on-map 13-show-bike-details 14-api-integration-for-registration 15-find-the-street-name-by-geo-location-data 16-create-search-location-functionality 17-create-toast-message-service 18-design-feedback-page 18-design-feedback-page-2 19-registration-page-validation 20-ride-history 20-ride-history-2 21-reservation-history 22-hire-reserved-bike 24-routing-from-users-current-position-to-the-bike 25-current-bike-reservation-workflow 28-routing-from-bike-location-to-user-s-destination 34-navigation-menu-is-getting-displayed-on-login-page 36-cancel-hired-bike 37-display-username-on-homepage 38-display-calculated-name-of-the-street-on-reservation-and-hire-page 39-validation-on-login-page 4-reserve-a-bike 40-map-performance-improvement-map-angle-doesn-t-change-when-selected-3d 41-display-live-location-of-user-on-map 42-add-log-in-button-on-registration-page-add-extra-messages-for-email-and-password-validation 42-add-log-in-button-on-registration-page-add-extra-messages-for-email-and-password-validation-2 45-show-stepwise-navigation-instructions-on-my-ride-page 46-show-bicycle-route-between-bike-and-user-s-destination 47-show-alternate-routes-for-bike-to-destination 48-create-a-common-service-for-getting-user-s-current-location-and-live-location 49-show-loading-page 50-add-dependencies-locally-to-improve-app-performance 51-while-navigating-between-pages-map-doesn-t-load-properly 52-page-loader-is-getting-displayed-everywhere 53-scrollining-in-ride-history 53-scrollining-in-ride-history-2 55-change-password 56-create-dummy-page-or-menu-for-hotline-contact 57-registration-not-working-from-app 58-add-flow-on-navigate-button-to-route-from-user-to-bike 6-user-registration 60-create-common-theming-styles-and-colors 61-chnage-styles-for-bike-list-and-bug-fixes 62-change-in-feedback-workflow 63-password-reset-api-integration 64-close-button-on-home-page-to-redirect-to-bike-list 66-highlight-selected-route-from-list-of-different-routes 67-deactivate-user-api-integration 68-display-no-go-areas-on-map 69-add-launcher-icon-for-application-on-android 70-add-validation-for-feedback-should-not-be-empty 71-prediction-ui-implementation-send-location-of-bike-to-backend 72-feedback-toast-message 73-removal-here-maps-api-key Show-Bike-details-when-bike-icon-is-clicked search_functionality
1 merge request!2Resolve "Show bikes from api response on map"
Showing with 32 additions and 10 deletions
+32 -10
......@@ -12,8 +12,8 @@ import { RestService } from '../../rest.service';
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
username = "";
password = "";
username = "Bob@mail.com";
password = "BobPassword";
correctCredentials = false;
loginApi: Observable<any>;
......
......@@ -26,7 +26,7 @@ export class HomePage {
{ lat: 48.780926, lng: 9.173456 },
{ lat: 48.775174, lng: 9.175459 },
{ lat: 48.793704, lng: 9.191112 }]
public arrayLanLon = { lat: 0, lng: 0 };
@ViewChild("mapElement2d", { static: false })
public mapElement2d: ElementRef;
......@@ -68,12 +68,15 @@ export class HomePage {
this.currentLocation.lat = resp.coords.latitude;
this.currentLocation.lng = resp.coords.longitude;
let url = 'http://193.196.52.237:8081/admin/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
const headers = new HttpHeaders().set("Authorization", "Bearer " + this.restService.getToken());
this.bikeApi = this.httpClient.get(url, {headers});
const headers = new HttpHeaders().set("Authorization", "Bearer " + this.restService.getToken());
this.bikeApi = this.httpClient.get(url, { headers });
this.bikeApi
.subscribe((resp) => {
console.log('my data: ', resp);
this.bikes = resp.data;
// console.log("rronjahja",this.bikes[0].lat);
}, (error) => console.log(error));
}, er => {
alert('Can not retrieve Location')
......@@ -82,6 +85,10 @@ export class HomePage {
});
}
loadmap(style) {
// Obtain the default map types from the platform object
var mapStyle = "raster";
......@@ -99,6 +106,7 @@ export class HomePage {
pixelRatio: window.devicePixelRatio || 1
}
);
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
var ui = H.ui.UI.createDefault(this.map, defaultLayers);
ui.removeControl("mapsettings");
......@@ -132,12 +140,26 @@ export class HomePage {
this.map.getViewModel().setLookAtData({ tilt: 60 });
}
this.getLocation(this.map);
var img = ['../../../assets/images/ic_high.png', '../../../assets/images/ic_medium.png', '../../../assets/images/ic_low.png'];
for (let i = 0; i < this.locationArr.length; i++) {
this.addMarker(this.locationArr[i].lat, this.locationArr[i].lng, img[i % 3]);
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){
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){
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){
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){
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);
}
getLocation(map) {
......@@ -161,7 +183,7 @@ export class HomePage {
moveMapToGiven(map, lat, lng) {
var icon = new H.map.Icon('../../../assets/images/ic_position.png');
var icon = new H.map.Icon('../../../assets/images/current_location.png');
// Create a marker using the previously instantiated icon:
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
......
src/assets/images/0_percent.png

5.03 KB

src/assets/images/100_percent.png

5.46 KB

src/assets/images/25_percent.png

5.19 KB

src/assets/images/50_percent.png

5.25 KB

src/assets/images/75_percent.png

5.29 KB

src/assets/images/current_location.png

2.19 KB

Supports Markdown
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