diff --git a/projects/project-3/frontend/angular.json b/projects/project-3/frontend/angular.json index 4e9d604..f8f4677 100644 --- a/projects/project-3/frontend/angular.json +++ b/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", @@ -131,4 +136,4 @@ "cli": { "analytics": false } -} \ No newline at end of file +} diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts index ad12c07..fb3ca8c 100644 --- a/projects/project-3/frontend/src/app/app.module.ts +++ b/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] diff --git a/projects/project-3/frontend/src/app/map/map.component.ts b/projects/project-3/frontend/src/app/map/map.component.ts index a3ac056..3cee918 100644 --- a/projects/project-3/frontend/src/app/map/map.component.ts +++ b/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(); } diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts index e4388a9..3b468b4 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/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 { + return await this.client.get(environment.apiUrl).toPromise(); + } } diff --git a/projects/project-3/frontend/src/assets/bike-point.png b/projects/project-3/frontend/src/assets/bike-point.png new file mode 100644 index 0000000..94ba92f Binary files /dev/null and b/projects/project-3/frontend/src/assets/bike-point.png differ diff --git a/projects/project-3/frontend/src/environments/environment.ts b/projects/project-3/frontend/src/environments/environment.ts index 7b4f817..161da85 100644 --- a/projects/project-3/frontend/src/environments/environment.ts +++ b/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' }; /*