diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 1f9fafd8a9d15d9e251c18fc17a98b295532dc26..6681baeaf59dd6fb748cc706c37421618a477c77 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -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}} diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 1dc921606ec850ca2d6f7848d2f256c9d91d17ab..ad23a37ddafdd5afa5f7986772357fb31cf50969 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -96,3 +96,7 @@ ion-footer{ .mapContainer{ background-color: white; } +.get-position{ + margin-bottom:10px; + +} \ No newline at end of file diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index d9111a77ceb1841fbf11abc4bac469749b3b5907..06d49f37c0e6a52d317b2188921dc89a58571371 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -137,7 +137,9 @@ export class HomePage { this.addMarker(this.locationArr[i].lat, this.locationArr[i].lng, img[i % 3]); } } - + getCurrentPosition(){ + this.getLocation(this.map); + } getLocation(map) { this.geolocation.getCurrentPosition( { @@ -159,7 +161,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/ic_position.png'); // Create a marker using the previously instantiated icon: var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon }); diff --git a/src/assets/images/ic_position.png b/src/assets/images/ic_position.png index dd808a0d7cdd7c362e5834522edb9855f2b4f03c..def14a9f93e8dc50cd0acb9c4b5cf9aa734d8232 100644 Binary files a/src/assets/images/ic_position.png and b/src/assets/images/ic_position.png differ