FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit b06d9edcbb4dfd85e82c6b8cdff2e2dab521f53c

Authored by lsagona
1 parent a77940a0e4
Exists in master

fix : remove markers from map when we remove the data set

Showing 1 changed file with 6 additions and 3 deletions Inline Diff

src/app/component/map/map.component.ts View file @ b06d9ed
import {Component, OnInit} from '@angular/core'; 1 1 import {Component, OnInit} from '@angular/core';
import * as L from 'leaflet'; 2 2 import * as L from 'leaflet';
import {CircleMarker} from 'leaflet'; 3 3 import {CircleMarker} from 'leaflet';
import {Vessels} from '../../model/vessels'; 4 4 import {Vessels} from '../../model/vessels';
import {VesselsService} from '../../service/vessels.service'; 5 5 import {VesselsService} from '../../service/vessels.service';
import {Message} from '../../model/message'; 6 6 import {Message} from '../../model/message';
import {SelectedVesselService} from '../../service/selected-vessel.service'; 7 7 import {SelectedVesselService} from '../../service/selected-vessel.service';
import {Vessel} from '../../model/vessel'; 8 8 import {Vessel} from '../../model/vessel';
9 9
@Component({ 10 10 @Component({
selector: 'app-map', 11 11 selector: 'app-map',
templateUrl: './map.component.html', 12 12 templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'] 13 13 styleUrls: ['./map.component.scss']
}) 14 14 })
export class MapComponent implements OnInit { 15 15 export class MapComponent implements OnInit {
vessels: Vessels; 16 16 vessels: Vessels;
selectedVessel: Vessel; 17 17 selectedVessel: Vessel;
public map: L.Map; 18 18 public map: L.Map;
renderer = L.canvas({padding: 0.5}); 19 19 renderer = L.canvas({padding: 0.5});
circleMarkers: Map<number, Array<CircleMarker>> = new Map<number, Array<CircleMarker>>(); 20 20 circleMarkers: Map<number, Array<CircleMarker>> = new Map<number, Array<CircleMarker>>();
highlightedMarkerId: number; 21 21 highlightedMarkerId: number;
22 22
constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) { 23 23 constructor(private vesselsService: VesselsService, private selectedVesselService: SelectedVesselService) {
} 24 24 }
25 25
ngOnInit(): void { 26 26 ngOnInit(): void {
this.initMap(); 27 27 this.initMap();
this.connectVesselObservable(); 28 28 this.connectVesselObservable();
this.connectSelectVesselObservable(); 29 29 this.connectSelectVesselObservable();
} 30 30 }
31 31
connectVesselObservable(): void { 32 32 connectVesselObservable(): void {
this.vesselsService.currentVessels.subscribe(vessels => { 33 33 this.vesselsService.currentVessels.subscribe(vessels => {
this.vessels = vessels; 34 34 this.vessels = vessels;
this.updateMap(); 35 35 this.updateMap();
}); 36 36 });
} 37 37 }
38 38
connectSelectVesselObservable(): void { 39 39 connectSelectVesselObservable(): void {
this.selectedVesselService.currentVessel.subscribe(vessels => { 40 40 this.selectedVesselService.currentVessel.subscribe(vessels => {
this.selectedVessel = vessels; 41 41 this.selectedVessel = vessels;
const mmsi = this.selectedVessel.getMMSI(); 42 42 const mmsi = this.selectedVessel.getMMSI();
if (mmsi !== undefined) { 43 43 if (mmsi !== undefined) {
this.highlightMarker(Number(this.selectedVessel.getMMSI())); 44 44 this.highlightMarker(Number(this.selectedVessel.getMMSI()));
} 45 45 }
}); 46 46 });
} 47 47 }
48 48
initMap(): void { 49 49 initMap(): void {
this.map = L.map('map').setView([0, 0], 1); 50 50 this.map = L.map('map').setView([0, 0], 1);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 51 51 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'map', 52 52 attribution: 'map',
}).addTo(this.map); 53 53 }).addTo(this.map);
} 54 54 }
55 55
addCircleMarker(message: Message, color: string): void { 56 56 addCircleMarker(message: Message, color: string): void {
let circleMarker; 57 57 let circleMarker;
if (message.mmsi === this.selectedVessel.getMMSI()) { 58 58 if (message.mmsi === this.selectedVessel.getMMSI()) {
circleMarker = L.circleMarker([+message.latitude, +message.longitude], 59 59 circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{ 60 60 {
renderer: this.renderer, 61 61 renderer: this.renderer,
radius: 4, 62 62 radius: 4,
color: '#ff0000', 63 63 color: '#ff0000',
}).addTo(this.map).bringToFront(); 64 64 }).addTo(this.map).bringToFront();
} else { 65 65 } else {
circleMarker = L.circleMarker([+message.latitude, +message.longitude], 66 66 circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{ 67 67 {
renderer: this.renderer, 68 68 renderer: this.renderer,
radius: 1, 69 69 radius: 1,
color 70 70 color
}).addTo(this.map); 71 71 }).addTo(this.map);
} 72 72 }
if (!this.circleMarkers.has(Number(message.mmsi))){ 73 73 if (!this.circleMarkers.has(Number(message.mmsi))) {
this.circleMarkers.set(Number(message.mmsi), new Array<CircleMarker>()); 74 74 this.circleMarkers.set(Number(message.mmsi), new Array<CircleMarker>());
} 75 75 }
this.circleMarkers.get(Number(message.mmsi)).push(circleMarker); 76 76 this.circleMarkers.get(Number(message.mmsi)).push(circleMarker);
} 77 77 }
78 78
highlightMarker(mmsi: number): void { 79 79 highlightMarker(mmsi: number): void {
if (this.highlightedMarkerId !== undefined) { 80 80 if (this.highlightedMarkerId !== undefined) {
const color = this.vessels.vessels.get(this.highlightedMarkerId).getColor(); 81 81 const color = this.vessels.vessels.get(this.highlightedMarkerId).getColor();
this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setStyle({color, fillColor: color})); 82 82 this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setStyle({color, fillColor: color}));
this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setRadius(1)); 83 83 this.circleMarkers.get(this.highlightedMarkerId).forEach(value => value.setRadius(1));
84 84
} 85 85 }
this.highlightedMarkerId = mmsi; 86 86 this.highlightedMarkerId = mmsi;
this.circleMarkers.get(mmsi).forEach(value => value.setStyle({fillColor: '#ff0000', color: '#ff0000', fillOpacity: 1})); 87 87 this.circleMarkers.get(mmsi).forEach(value => value.setStyle({fillColor: '#ff0000', color: '#ff0000', fillOpacity: 1}));
this.circleMarkers.get(mmsi).forEach(value => value.setRadius(4)); 88 88 this.circleMarkers.get(mmsi).forEach(value => value.setRadius(4));
} 89 89 }
90 90
updateMap(): void { 91 91 updateMap(): void {
this.circleMarkers.clear(); 92 92 this.renderer.remove();
this.vessels.vessels.forEach(((vessel, key) => { 93 93 this.renderer = L.canvas({padding: 0.5});
94 this.renderer.addTo(this.map);
95 this.circleMarkers.forEach(value => value.splice(0, value.length));
96 this.vessels.vessels.forEach(((vessel) => {