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
This commit is contained in:
parent
ba0f7b5e86
commit
3eb3570370
@ -14,7 +14,7 @@ export class MapComponent implements AfterViewInit {
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.service.initMap();
|
||||
this.service.makeStationsWithDummyData();
|
||||
this.service.makeStationMarkers();
|
||||
}
|
||||
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
public makeStationMarkers(): void {
|
||||
this.fetchStationGeoData().then((data) => {
|
||||
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));
|
||||
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);
|
||||
}
|
||||
|
||||
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();
|
||||
return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl: 'http://dummyUrl:1111'
|
||||
apiUrl: 'http://localhost:8080/api/'
|
||||
};
|
||||
|
||||
/*
|
||||
|
Loading…
Reference in New Issue
Block a user