Skip to content

GitLab

Commit 141c5ca9 authored by Ratnadeep Rajendra Kharade's avatar Ratnadeep Rajendra Kharade
Browse files

1. Added feature to show runtime live location of user. 

2. Refactored code.
parent bfceca3f
Hide whitespace changes
Inline Side-by-side
src/app/home/home.page.ts
View file @ 141c5ca9
...@@ -15,10 +15,12 @@ declare var H: any; ...@@ -15,10 +15,12 @@ declare var H: any;
styleUrls: ['home.page.scss'], styleUrls: ['home.page.scss'],
}) })
export class HomePage { export class HomePage implements OnInit {
private platform: any; private platform: any;
private map: any; private map: any;
private defaultLayers: any; private defaultLayers: any;
private locationsGroup: any;
private currentUserPosition = {lat: 0, lng: 0};
bikes = []; bikes = [];
bikeApi: Observable<any>; bikeApi: Observable<any>;
...@@ -28,6 +30,8 @@ export class HomePage { ...@@ -28,6 +30,8 @@ export class HomePage {
public selectedBike = { id: 0 }; public selectedBike = { id: 0 };
public isBikeReserved = false; public isBikeReserved = false;
public currentLocationMarker: any;
@ViewChild("mapElement", { static: false }) @ViewChild("mapElement", { static: false })
public mapElement: ElementRef; public mapElement: ElementRef;
...@@ -40,52 +44,33 @@ export class HomePage { ...@@ -40,52 +44,33 @@ export class HomePage {
this.platform = new H.service.Platform({ this.platform = new H.service.Platform({
'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k' 'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
}); });
let watch = this.geolocation.watchPosition({ enableHighAccuracy: true, maximumAge: 10000 });
watch.subscribe((position) => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
this.currentUserPosition.lat = position.coords.latitude;
this.currentUserPosition.lng = position.coords.longitude;
this.currentLocationMarker.setGeometry( {lat:position.coords.latitude, lng:position.coords.longitude})
}, (errorObj) => {
console.log(errorObj.code + ": " + errorObj.message);
});
} }
ngOnInit() { ngOnInit() {
this.getBikesList();
} }
ngAfterViewInit() { ngAfterViewInit() {
setTimeout(() => { this.initializeMap();
this.loadmap();
}, 700);
window.addEventListener('resize', () => this.map.getViewPort().resize()); window.addEventListener('resize', () => this.map.getViewPort().resize());
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
},100);
this.getUserLocation();
this.getBikesList();
} }
getBikesList() { initializeMap() {
this.geolocation.getCurrentPosition({
maximumAge: 1000, timeout: 4000,
enableHighAccuracy: true
}).then((resp) => {
let lat = resp.coords.latitude;
let lng = resp.coords.longitude;
this.currentLocation.lat = resp.coords.latitude;
this.currentLocation.lng = resp.coords.longitude;
this.storage.get('token').then((token) => {
let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + lat + '&lng=' + lng;
const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
this.bikeApi = this.httpClient.get(url, { headers });
this.bikeApi.subscribe((resp) => {
console.log("bikes response", resp);
this.bikes = resp;
for (let i = 0; i < this.bikes.length; i++) {
this.bikes[i].distance = this.bikes[i].distance.toFixed(2);;
this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
}
}, (error) => console.log(error));
});
}, er => {
alert('Can not retrieve location');
}).catch((error) => {
alert('Error getting location - ' + JSON.stringify(error));
});
}
loadmap() {
// Obtain the default map types from the platform object // Obtain the default map types from the platform object
this.defaultLayers = this.platform.createDefaultLayers(); this.defaultLayers = this.platform.createDefaultLayers();
this.map = new H.Map( this.map = new H.Map(
...@@ -128,7 +113,10 @@ export class HomePage { ...@@ -128,7 +113,10 @@ export class HomePage {
mapSettings.setAlignment('top-right'); mapSettings.setAlignment('top-right');
zoom.setAlignment('right-top'); zoom.setAlignment('right-top');
this.map.addEventListener('baselayerchange', (data) => { this.map.getViewPort().setPadding(30, 30, 30, 30);
// Listen for base layer change event (eg. from satellite to 3D)
this.map.addEventListener('baselayerchange', (evt) => {
let mapConfig = this.map.getBaseLayer().getProvider().getStyleInternal().getConfig(); let mapConfig = this.map.getBaseLayer().getProvider().getStyleInternal().getConfig();
if (mapConfig === null || (mapConfig && mapConfig.sources && mapConfig.sources.omv)) { if (mapConfig === null || (mapConfig && mapConfig.sources && mapConfig.sources.omv)) {
this.map.getViewModel().setLookAtData({ tilt: 60 }); this.map.getViewModel().setLookAtData({ tilt: 60 });
...@@ -136,8 +124,48 @@ export class HomePage { ...@@ -136,8 +124,48 @@ export class HomePage {
this.map.getViewModel().setLookAtData({ tilt: 0 }); this.map.getViewModel().setLookAtData({ tilt: 0 });
} }
}); });
this.getLocation(this.map);
// listen for map click event
this.map.addEventListener('tap', (event) =>{
console.log(event.type, event.currentPointer.type);
});
this.locationsGroup = new H.map.Group();
}
getBikesList() {
this.geolocation.getCurrentPosition({
maximumAge: 1000, timeout: 4000,
enableHighAccuracy: true
}).then((resp) => {
let lat = resp.coords.latitude;
let lng = resp.coords.longitude;
this.currentUserPosition.lat = resp.coords.latitude;
this.currentUserPosition.lng = resp.coords.longitude;
this.storage.get('token').then((token) => {
let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + lat + '&lng=' + lng;
const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
this.bikeApi = this.httpClient.get(url, { headers });
this.bikeApi.subscribe((resp) => {
console.log("bikes response", resp);
this.bikes = resp;
for (let i = 0; i < this.bikes.length; i++) {
this.bikes[i].distance = this.bikes[i].distance.toFixed(2);;
this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
}
this.showBikesOnMap();
}, (error) => console.log(error));
});
}, er => {
//alert('Can not retrieve location');
}).catch((error) => {
//alert('Error getting location - ' + JSON.stringify(error));
});
}
showBikesOnMap() {
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) {
...@@ -151,18 +179,28 @@ export class HomePage { ...@@ -151,18 +179,28 @@ export class HomePage {
} 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]);
} }
} }
this.map.addObject(this.locationsGroup);
this.setZoomLevelToPointersGroup();
} }
//TODO change this logic
getCurrentPosition() { getCurrentPosition() {
this.getLocation(this.map.setZoom(17)); this.map.setZoom(17);
this.map.setCenter({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng });
} }
getLocation(map) { setZoomLevelToPointersGroup() {
this.map.getViewModel().setLookAtData({
bounds: this.locationsGroup.getBoundingBox()
});
}
getUserLocation() {
this.geolocation.getCurrentPosition( this.geolocation.getCurrentPosition(
{ {
maximumAge: 1000, timeout: 2000, maximumAge: 1000, timeout: 4000,
enableHighAccuracy: true enableHighAccuracy: true
} }
).then((resp) => { ).then((resp) => {
...@@ -170,21 +208,32 @@ export class HomePage { ...@@ -170,21 +208,32 @@ export class HomePage {
let lng = resp.coords.longitude; let lng = resp.coords.longitude;
this.currentLocation.lat = resp.coords.latitude; this.currentLocation.lat = resp.coords.latitude;
this.currentLocation.lng = resp.coords.longitude; this.currentLocation.lng = resp.coords.longitude;
this.moveMapToGiven(map, lat, lng); this.showUserLocationOnMap(lat, lng);
}, er => { }, er => {
alert('Can not retrieve Location') //alert('Can not retrieve Location')
this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
}).catch((error) => { }).catch((error) => {
alert('Error getting location - ' + JSON.stringify(error)) this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
//alert('Error getting location - ' + JSON.stringify(error))
}); });
} }
moveMapToGiven(map, lat, lng) { showUserLocationOnMap(lat, lng) {
var icon = new H.map.Icon('../../../assets/images/current_location.png'); let svgMarkup = '<svg width="24" height="24" ' +
'xmlns="http://www.w3.org/2000/svg">' +
'<circle cx="10" cy="10" r="10" ' +
'fill="#007cff" stroke="white" stroke-width="2" />' +
'</svg>';
let icon = new H.map.Icon(svgMarkup);
//let icon = new H.map.Icon('../../../assets/images/current_location.png');
// Create a marker using the previously instantiated icon: // Create a marker using the previously instantiated icon:
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon }); this.currentLocationMarker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
// Add the marker to the map: // Add the marker to the map:
map.addObject(marker); this.locationsGroup.addObjects([this.currentLocationMarker]);
map.setCenter({ lat: lat, lng: lng }); this.setZoomLevelToPointersGroup();
//this.map.addObject(marker);
//this.map.setCenter({ lat: lat, lng: lng });
} }
addMarker(lat, lng, img) { addMarker(lat, lng, img) {
...@@ -192,7 +241,9 @@ export class HomePage { ...@@ -192,7 +241,9 @@ export class HomePage {
// Create a marker using the previously instantiated icon: // Create a marker using the previously instantiated icon:
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon }); var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
// Add the marker to the map: // Add the marker to the map:
this.map.addObject(marker); //this.map.addObject(marker);
this.locationsGroup.addObjects([marker]);
} }
enable3DMaps() { enable3DMaps() {
...@@ -210,7 +261,6 @@ export class HomePage { ...@@ -210,7 +261,6 @@ export class HomePage {
}; };
geocoder.reverseGeocode(parameters, result => { geocoder.reverseGeocode(parameters, result => {
console.log(result);
var streets = result.Response.View[0].Result[0].Location.Address.Street; var streets = result.Response.View[0].Result[0].Location.Address.Street;
var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber; var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode; var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
......
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal