add marker asset and make Marker call with dummy data for proof of concept

projects/project-3/frontend/angular.json

@@ -90,7 +90,12 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/leaflet/dist/images/",
+                "output": "./assets"
+              }
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",

projects/project-3/frontend/src/app/app.module.ts

@@ -9,6 +9,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import {MatButtonModule} from '@angular/material/button';
     MatToolbarModule,
     MatIconModule,
     MatButtonModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

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

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

@@ -1,5 +1,33 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import * as L from 'leaflet';
+import {HttpClient} from '@angular/common/http';
+import {environment} from '../../environments/environment';
+
+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',
+  iconSize: [60, 60],
+  iconAnchor: [30, 60],
+  popupAnchor: [0, -53]
+});
 
 @Injectable({
   providedIn: 'root'
@@ -7,7 +35,8 @@ import * as L from 'leaflet';
 export class MapService {
   private map;
 
-  constructor() { }
+  constructor(private client: HttpClient) {
+  }
 
   public initMap(): void {
     this.map = L.map('map').setView([51.509865, -0.118092], 13);
@@ -17,4 +46,26 @@ export class MapService {
       maxZoom: 19
     }));
   }
+
+  public makeStationsWithDummyData(): void {
+    for (const station of dummyData) {
+      L.marker([station.lat, station.lon], {icon: createIcon}).addTo(this.map);
+    }
+  }
+
+  public makeStationMarkers(): void {
+    this.fetchStationGeoData().then((data) => {
+      for (const station of data.features) {
+        const lat = station.geometry.coordinates[0];
+        const lon = station.geometry.coordinates[1];
+        L.marker([lon, lat]).addTo(this.map);
+      }
+    }).catch((error) => {
+      console.log('something went wrong: ' + JSON.stringify(error));
+    });
+  }
+
+  private async fetchStationGeoData(): Promise<any> {
+    return await this.client.get(environment.apiUrl).toPromise();
+  }
 }

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

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'http://dummyUrl:1111'
 };
 
 /*