Added bike icons and logic to display bike icons

src/app/home/home.page.html

@@ -11,3 +11,22 @@
 <ion-content>
   <div #map style="width: 100%; height: 100%" id="mapContainer"></div>
 </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 i of tempArr">
+      <div class="bike-name">
+        Bike 1
+      </div>
+      <div class="battery-info">
+        <div><ion-icon class="battery-icon" name="battery-charging"></ion-icon></div>
+        <div>100%</div>
+      </div>
+      <div class="address-info">
+        <div class="disance">56m</div>
+        <div class="address">Schllingstrasse 129</div>
+      </div>
+    </div>
+  </div>
+</ion-footer>

src/app/home/home.page.scss

@@ -2,3 +2,85 @@
   max-height: 35vh;
   overflow: hidden;
 }
+
+ion-footer{
+  overflow-y: auto;
+  padding-top: 30px;
+}
+
+.bike-list-container{
+  position: relative;
+
+  .bike-list-expander{
+    position: absolute;
+    font-size: 32px;
+    color: gray;
+    z-index: 200;
+    left: 46%;
+    top: -32px;
+  }
+}
+
+.bike-container{
+  height: 60px;
+  width: 100%;
+  border: 1px solid #aaaaaa;
+  border-radius: 5px;
+  box-sizing: border-box;
+  float: left;
+    width: 100%;
+    clear: both;
+
+  div {
+    height: inherit;
+    float: left;
+  }
+}
+
+.bike-name, .battery-info{
+  height: inherit;
+  line-height: 45px;
+}
+
+.battery-info{
+  width: 20%;
+}
+
+.bike-name{
+  width: 30%!important;
+  line-height: 60px;
+  padding-left: 10px;
+}
+
+.battery-info{
+  line-height: 60px;
+
+  div{
+    float: left;
+  }
+}
+.battery-icon{
+  font-size: 20px;
+}
+
+.address-info{
+  float: right!important;
+  width: 50%!important;
+  font-size: 14px;
+  text-align: right;
+  padding-right: 10px;
+
+  div{
+    width: 100%;
+  }
+
+  .disance{
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .address{
+    height: 40px;
+    padding-top: 10px;
+  }
+}

src/app/home/home.page.ts

@@ -11,6 +11,12 @@ export class HomePage {
   private map: any;
   private currentLocation = {lat:0,lng:0};
 
+  public tempArr = [1,2];
+  public locationArr = [{lat:48.778409, lng:9.179252},
+    {lat:48.780926, lng:9.173456},
+    {lat:48.775174, lng:9.175459},
+    {lat:48.793704, lng:9.191112}]
+
   @ViewChild("map", { static: false })
   public mapElement: ElementRef;
   public constructor(private geolocation: Geolocation) {
@@ -44,6 +50,10 @@ export class HomePage {
     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
     var ui = H.ui.UI.createDefault(this.map, defaultLayers);
     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%2]);
+    }
   }
 
   getLocation(map) {
@@ -75,4 +85,19 @@ export class HomePage {
     map.addObject(marker);
     map.setCenter({ lat: lat, lng: lng });
   }
+
+  expandBikeList(){
+    for(let i=0; i<20; i++) {
+      this.tempArr.push(i+3);
+    }
+  }
+
+  addMarker(lat, lng, img){
+    var icon = new H.map.Icon(img);
+    // 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);
+  }
 }