map.component.ts
1.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import {Component, OnInit} from '@angular/core';
import * as L from 'leaflet';
import {CircleMarker} from 'leaflet';
import {Vessels} from '../../model/vessels';
import {VesselsService} from '../../service/vessels.service';
import {Message} from '../../model/message';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
vessels: Vessels;
public map: L.Map;
renderer = L.canvas({ padding: 0.5 });
circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>();
constructor(private vesselsService: VesselsService) {
}
ngOnInit(): void {
this.initMap();
this.connectVesselObservable();
}
connectVesselObservable(): void {
this.vesselsService.currentVessels.subscribe(vessels => {
this.vessels = vessels;
this.updateMap();
});
}
initMap(): void {
this.map = L.map('map').setView([0, 0], 1);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'map',
}).addTo(this.map);
}
addCircleMarker(message: Message, color: string): void {
const circleMarker = L.circleMarker([+message.latitude, +message.longitude],
{
renderer: this.renderer,
radius: 0.1,
color
}).addTo(this.map);
this.circleMarkers.set(Number(message.mmsi), circleMarker);
}
updateMap(): void {
let nbMessage = 0;
this.vessels.vessels.forEach(((vessel, key) => {
const color = vessel.getColor();
vessel.messages.forEach((message) => {
nbMessage++;
this.addCircleMarker(message, color);
});
}));
}
}