dynamically load all markers from backend

* make correct api-call (remove dummy url)
* make correct method-invocation in mapcomponent
* remove dummy-data
* add domain-object for bikestation

projects/project-3/frontend/src/app/map/map.component.ts

@@ -14,7 +14,7 @@ export class MapComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.service.initMap();
-    this.service.makeStationsWithDummyData();
+    this.service.makeStationMarkers();
   }
 
 

projects/project-3/frontend/src/app/service/domain/bike-station.ts

@@ -1,20 +1,24 @@
 export interface IBikeStation {
   id?: string;
-  url?: string;
   commonName?: string;
-  placeType?: string;
   lat?: number;
   lon?: number;
+  status?: BikePointStatus;
 }
 
 export class BikeStation implements IBikeStation {
   constructor(
     public id?: string,
-    public url?: string,
     public commonName?: string,
-    public placeType?: string,
     public lat?: number,
-    public lon?: number
+    public lon?: number,
+    public status?: BikePointStatus
   ) {
   }
 }
+
+export class BikePointStatus {
+  NbBikes?: number;
+  NbEmptyDocks?: number;
+  NbDocks?: number;
+}

projects/project-3/frontend/src/app/service/map.service.ts

@@ -3,26 +3,8 @@ import * as L from 'leaflet';
 import 'leaflet.markercluster';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
-import {PopupComponent} from '../map/popup/popup.component';
+import {PopUpService} from './pop-up.service';
 
-const dummyData = [
-  {
-    id: 'BikePoints_1',
-    url: '/Place/BikePoints_1',
-    commonName: 'River Street , Clerkenwell',
-    placeType: 'BikePoint',
-    lat: 51.529163,
-    lon: -0.10997
-  },
-  {
-    id: 'BikePoints_2',
-    url: '/Place/BikePoints_2',
-    commonName: 'Phillimore Gardens, Kensington',
-    placeType: 'BikePoint',
-    lat: 51.499606,
-    lon: -0.197574
-  }
-];
 
 const createIcon = L.icon({
   iconUrl: '../../assets/bike-point.png',
@@ -37,11 +19,14 @@ const createIcon = L.icon({
 export class MapService {
   private map;
 
-  constructor(private client: HttpClient) {
+  constructor(
+    private client: HttpClient,
+    private popUpService: PopUpService
+  ) {
   }
 
   public initMap(): void {
-    this.map = L.map('map').setView([51.509865, -0.118092], 13);
+    this.map = L.map('map').setView([51.509865, -0.118092], 14);
     this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
       minZoom: 0,
@@ -49,32 +34,24 @@ export class MapService {
     }));
   }
 
-  public makeStationsWithDummyData(): void {
-    const markerClusters = L.markerClusterGroup({
-      spiderflyOnMaxZoom: true,
-      showCoverageOnHover: true,
-      zoomToBoundsOnClick: true
-    });
-    for (const station of dummyData) {
-      const marker = L.marker([station.lat, station.lon], {icon: createIcon}).bindPopup(new PopupComponent().bindStation(station));
-      markerClusters.addLayer(marker);
-    }
-    this.map.addLayer(markerClusters);
-  }
-
   public makeStationMarkers(): void {
     this.fetchStationGeoData().then((data) => {
-      for (const station of data.features) {
+      const markerClusters = L.markerClusterGroup({
-        const lat = station.geometry.coordinates[0];
+        spiderflyOnMaxZoom: true,
-        const lon = station.geometry.coordinates[1];
+        showCoverageOnHover: true,
-        L.marker([lon, lat]).addTo(this.map);
+        zoomToBoundsOnClick: true
+      });
+      for (const station of data) {
+        const marker = L.marker([station.lat, station.lon], {icon: createIcon}).bindPopup(this.popUpService.makeAvailabilityPopUp(station));
+        markerClusters.addLayer(marker);
       }
+      this.map.addLayer(markerClusters);
     }).catch((error) => {
       console.log('something went wrong: ' + JSON.stringify(error));
     });
   }
 
   private async fetchStationGeoData(): Promise<any> {
-    return await this.client.get(environment.apiUrl).toPromise();
+    return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
   }
 }

projects/project-3/frontend/src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'http://dummyUrl:1111'
+  apiUrl: 'http://localhost:8080/api/'
 };
 
 /*