Get Current Position feature completed with custom icon on map.

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}}

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

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 });