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;
styleUrls: ['home.page.scss'],
})
export class HomePage {
export class HomePage implements OnInit {
private platform: any;
private map: any;
private defaultLayers: any;
private locationsGroup: any;
private currentUserPosition = {lat: 0, lng: 0};
bikes = [];
bikeApi: Observable<any>;
......@@ -28,6 +30,8 @@ export class HomePage {
public selectedBike = { id: 0 };
public isBikeReserved = false;
public currentLocationMarker: any;
@ViewChild("mapElement", { static: false })
public mapElement: ElementRef;
......@@ -40,52 +44,33 @@ export class HomePage {
this.platform = new H.service.Platform({
'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() {
this.getBikesList();
}
ngAfterViewInit() {
setTimeout(() => {
this.loadmap();
}, 700);
this.initializeMap();
window.addEventListener('resize', () => this.map.getViewPort().resize());
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
},100);
this.getUserLocation();
this.getBikesList();
}
getBikesList() {
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() {
initializeMap() {
// Obtain the default map types from the platform object
this.defaultLayers = this.platform.createDefaultLayers();
this.map = new H.Map(
......@@ -128,7 +113,10 @@ export class HomePage {
mapSettings.setAlignment('top-right');
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();
if (mapConfig === null || (mapConfig && mapConfig.sources && mapConfig.sources.omv)) {
this.map.getViewModel().setLookAtData({ tilt: 60 });
......@@ -136,8 +124,48 @@ export class HomePage {
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'];
for (let i = 0; i < this.bikes.length; i++) {
if (this.bikes[i].batteryPercentage < 100 && this.bikes[i].batteryPercentage >= 75) {
......@@ -151,18 +179,28 @@ export class HomePage {
} 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.map.addObject(this.locationsGroup);
this.setZoomLevelToPointersGroup();
}
//TODO change this logic
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(
{
maximumAge: 1000, timeout: 2000,
maximumAge: 1000, timeout: 4000,
enableHighAccuracy: true
}
).then((resp) => {
......@@ -170,21 +208,32 @@ export class HomePage {
let lng = resp.coords.longitude;
this.currentLocation.lat = resp.coords.latitude;
this.currentLocation.lng = resp.coords.longitude;
this.moveMapToGiven(map, lat, lng);
this.showUserLocationOnMap(lat, lng);
}, er => {
alert('Can not retrieve Location')
//alert('Can not retrieve Location')
this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
}).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) {
var icon = new H.map.Icon('../../../assets/images/current_location.png');
showUserLocationOnMap(lat, lng) {
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:
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:
map.addObject(marker);
map.setCenter({ lat: lat, lng: lng });
this.locationsGroup.addObjects([this.currentLocationMarker]);
this.setZoomLevelToPointersGroup();
//this.map.addObject(marker);
//this.map.setCenter({ lat: lat, lng: lng });
}
addMarker(lat, lng, img) {
......@@ -192,7 +241,9 @@ export class HomePage {
// Create a marker using the previously instantiated icon:
var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
// Add the marker to the map:
this.map.addObject(marker);
//this.map.addObject(marker);
this.locationsGroup.addObjects([marker]);
}
enable3DMaps() {
......@@ -210,7 +261,6 @@ export class HomePage {
};
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;
......
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