Commit 4570f0af authored by Ratnadeep Rajendra Kharade's avatar Ratnadeep Rajendra Kharade
Browse files

Merge branch '10-show-bikes-from-api-response-on-map' into 'master'

Resolve "Show bikes from api response on map"

Closes #10

See merge request 92khra1mst/hft_awado_app!2
parents 1fe17923 c406aea1
......@@ -39,7 +39,7 @@ export class LoginPage implements OnInit {
console.log('my data: ', data);
this.restService.setToken(data.token);
this.router.navigateByUrl('/home');
}, (error) => {
}, (error) => {
console.log(error);
this.correctCredentials = true;
});
......
......@@ -13,14 +13,21 @@
</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-content>
<ion-footer>
<div class="bike-list-container">
<ion-icon class="bike-list-expander" name="arrow-dropup-circle" (click)="expandBikeList()"></ion-icon>
<div class="bike-container" *ngFor="let bike of bikes">
<div class="bike-name">
{{bike.name}}
......
......@@ -96,3 +96,7 @@ ion-footer{
.mapContainer{
background-color: white;
}
.get-position{
margin-bottom:10px;
}
\ No newline at end of file
......@@ -29,7 +29,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;
......@@ -69,6 +69,7 @@ export class HomePage {
}).then((resp) => {
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=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
......@@ -85,6 +86,10 @@ export class HomePage {
});
}
loadmap(style) {
// Obtain the default map types from the platform object
var mapStyle = "raster";
......@@ -102,6 +107,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");
......@@ -135,12 +141,28 @@ 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() {
this.getLocation(this.map);
}
getLocation(map) {
this.geolocation.getCurrentPosition(
{
......@@ -162,7 +184,7 @@ export class HomePage {
moveMapToGiven(map, lat, lng) {
var icon = new H.map.Icon('../../../assets/images/icon_map_currentLocation.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/ic_position.png

11.4 KB | W: | H:

src/assets/images/ic_position.png

3.97 KB | W: | H:

src/assets/images/ic_position.png
src/assets/images/ic_position.png
src/assets/images/ic_position.png
src/assets/images/ic_position.png
  • 2-up
  • Swipe
  • Onion skin
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