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 f10b99b..15c5cbc 100644 --- a/projects/project-3/frontend/src/app/service/map.service.ts +++ b/projects/project-3/frontend/src/app/service/map.service.ts @@ -6,14 +6,13 @@ import {HttpClient} from '@angular/common/http'; import {environment} from '../../environments/environment'; import {PopUpService} from './pop-up.service'; import {IMapBikePoint} from './domain/map-bike-point'; -import {Router} from '@angular/router'; import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point'; const createIcon = color => L.icon({ iconUrl: `../../assets/bike-point-${color}.png`, iconSize: [45, 45], - iconAnchor: [21, 40], + iconAnchor: [23, 36], popupAnchor: [1, -35] }); @@ -28,13 +27,15 @@ export class MapService { mapOverlays: any = {}; miniMapMarker: L.layerGroup; markerLayer = []; + polylineLayer = []; dashBoardMarker = L.marker; + dashBoardBikePoint: IDashboardCommonBikePoint; layerControl = L.control(null); + legend = L.control({position: 'bottomleft'}); constructor( private client: HttpClient, - private popUpService: PopUpService, - private router: Router + private popUpService: PopUpService ) { } @@ -140,34 +141,56 @@ export class MapService { } public drawDashboardStationMarker(station: IDashboardCommonBikePoint): void { + this.dashBoardBikePoint = station; this.dashBoardMarker = L.marker([station.lat, station.lon], {icon: createIcon('blue')}).addTo(this.miniMap); this.dashBoardMarker.on('mouseover', e => e.target.bindPopup(`
${station.commonName}
`).openPopup()); this.dashBoardMarker.on('mouseout', e => e.target.closePopup()); } - public removeTableStationMarkerOnReload(): void { - if (this.markerLayer) { - this.markerLayer.forEach(marker => { - this.miniMap.removeLayer(marker); - }); - this.markerLayer = []; - } - } - public drawTableStationMarker(bikePoints: any[]): void { - if (this.markerLayer) { - this.markerLayer.forEach(marker => { - this.miniMap.removeLayer(marker); - }); - this.markerLayer = []; - } + this.removeOverlayOnMiniMap(); for (const point of bikePoints) { const marker = L.marker([point.stationLat, point.stationLon], {icon: createIcon(point.color)}).addTo(this.miniMap); marker.on('mouseover', e => e.target.bindPopup(`${point.stationName}
`).openPopup()); marker.on('mouseout', e => e.target.closePopup()); + this.drawLineOnMiniMap(marker, point); this.markerLayer.push(marker); this.miniMap.fitBounds(L.featureGroup([...this.markerLayer, this.dashBoardMarker]).getBounds()); } + this.drawLegend(); + } + + drawLegend(): void { + this.legend.onAdd = map => { + const div = L.DomUtil.create('div', 'legend'); + div.innerHTML += `