diff --git a/src/app/component/map/map.component.ts b/src/app/component/map/map.component.ts index 0a8433f..43e05db 100644 --- a/src/app/component/map/map.component.ts +++ b/src/app/component/map/map.component.ts @@ -17,7 +17,8 @@ export class MapComponent implements OnInit { selectedVessel: Vessel; public map: L.Map; renderer = L.canvas({padding: 0.5}); - circleMarkers: Map = new Map(); + circleMarkers: Map> = new Map>(); + highlightedMarkerId: number; constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) { } @@ -38,7 +39,10 @@ export class MapComponent implements OnInit { connectSelectVesselObservable(): void { this.selectedVesselService.currentVessel.subscribe(vessels => { this.selectedVessel = vessels; - this.updateMap(); + const mmsi = this.selectedVessel.getMMSI(); + if (mmsi !== undefined) { + this.highlightMarker(Number(this.selectedVessel.getMMSI())); + } }); } @@ -58,15 +62,30 @@ export class MapComponent implements OnInit { radius: 4, color: '#ff0000', }).addTo(this.map).bringToFront(); - }else { + } else { circleMarker = L.circleMarker([+message.latitude, +message.longitude], { renderer: this.renderer, - radius: 0.01, + radius: 1, color }).addTo(this.map); } - this.circleMarkers.set(Number(message.mmsi), circleMarker); + if (!this.circleMarkers.has(Number(message.mmsi))){ + this.circleMarkers.set(Number(message.mmsi), new Array()); + } + this.circleMarkers.get(Number(message.mmsi)).push(circleMarker); + } + + highlightMarker(mmsi: number): void { + if (this.highlightedMarkerId !== undefined) { + const color = this.vessels.vessels.get(this.highlightedMarkerId).getColor(); + this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setStyle({color, fillColor: color})); + this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setRadius(1)); + + } + this.highlightedMarkerId = mmsi; + this.circleMarkers.get(mmsi).forEach(value => value.setStyle({fillColor: '#ff0000', color: '#ff0000', fillOpacity: 1})); + this.circleMarkers.get(mmsi).forEach(value => value.setRadius(4)); } updateMap(): void { diff --git a/src/app/model/vessel.ts b/src/app/model/vessel.ts index 15aad34..3c50780 100644 --- a/src/app/model/vessel.ts +++ b/src/app/model/vessel.ts @@ -15,7 +15,7 @@ export class Vessel { getMMSI(): string { if (this.messages.length === 0) { - return ''; + return undefined; } return this.messages[0].mmsi; }