Commit a77940a0e4df24949acbc9367378018a6d2dad71
1 parent
99a1117739
Exists in
master
fix a bug when you select a boat it's now correctly displayed
Showing 2 changed files with 25 additions and 6 deletions Side-by-side Diff
src/app/component/map/map.component.ts
View file @
a77940a
| ... | ... | @@ -17,7 +17,8 @@ |
| 17 | 17 | selectedVessel: Vessel; |
| 18 | 18 | public map: L.Map; |
| 19 | 19 | renderer = L.canvas({padding: 0.5}); |
| 20 | - circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>(); | |
| 20 | + circleMarkers: Map<number, Array<CircleMarker>> = new Map<number, Array<CircleMarker>>(); | |
| 21 | + highlightedMarkerId: number; | |
| 21 | 22 | |
| 22 | 23 | constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) { |
| 23 | 24 | } |
| ... | ... | @@ -38,7 +39,10 @@ |
| 38 | 39 | connectSelectVesselObservable(): void { |
| 39 | 40 | this.selectedVesselService.currentVessel.subscribe(vessels => { |
| 40 | 41 | this.selectedVessel = vessels; |
| 41 | - this.updateMap(); | |
| 42 | + const mmsi = this.selectedVessel.getMMSI(); | |
| 43 | + if (mmsi !== undefined) { | |
| 44 | + this.highlightMarker(Number(this.selectedVessel.getMMSI())); | |
| 45 | + } | |
| 42 | 46 | }); |
| 43 | 47 | } |
| 44 | 48 | |
| 45 | 49 | |
| 46 | 50 | |
| ... | ... | @@ -58,15 +62,30 @@ |
| 58 | 62 | radius: 4, |
| 59 | 63 | color: '#ff0000', |
| 60 | 64 | }).addTo(this.map).bringToFront(); |
| 61 | - }else { | |
| 65 | + } else { | |
| 62 | 66 | circleMarker = L.circleMarker([+message.latitude, +message.longitude], |
| 63 | 67 | { |
| 64 | 68 | renderer: this.renderer, |
| 65 | - radius: 0.01, | |
| 69 | + radius: 1, | |
| 66 | 70 | color |
| 67 | 71 | }).addTo(this.map); |
| 68 | 72 | } |
| 69 | - this.circleMarkers.set(Number(message.mmsi), circleMarker); | |
| 73 | + if (!this.circleMarkers.has(Number(message.mmsi))){ | |
| 74 | + this.circleMarkers.set(Number(message.mmsi), new Array<CircleMarker>()); | |
| 75 | + } | |
| 76 | + this.circleMarkers.get(Number(message.mmsi)).push(circleMarker); | |
| 77 | + } | |
| 78 | + | |
| 79 | + highlightMarker(mmsi: number): void { | |
| 80 | + if (this.highlightedMarkerId !== undefined) { | |
| 81 | + const color = this.vessels.vessels.get(this.highlightedMarkerId).getColor(); | |
| 82 | + this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setStyle({color, fillColor: color})); | |
| 83 | + this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setRadius(1)); | |
| 84 | + | |
| 85 | + } | |
| 86 | + this.highlightedMarkerId = mmsi; | |
| 87 | + this.circleMarkers.get(mmsi).forEach(value => value.setStyle({fillColor: '#ff0000', color: '#ff0000', fillOpacity: 1})); | |
| 88 | + this.circleMarkers.get(mmsi).forEach(value => value.setRadius(4)); | |
| 70 | 89 | } |
| 71 | 90 | |
| 72 | 91 | updateMap(): void { |