From 72dfa80e2b0cb05b753554f82af013dd99eef3fe Mon Sep 17 00:00:00 2001
From: lsagona <loic.sagona@edu.univ-fcomte>
Date: Mon, 9 Nov 2020 14:06:51 +0100
Subject: [PATCH] eache vessel have different color on map

---
 src/app/component/list-vessel/list-vessel.component.ts |    8 --------
 src/app/component/map/map.component.ts                 |    6 +++---
 src/app/model/vessel.ts                                |    2 +-
 src/app/model/vessels.ts                               |    1 -
 4 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/app/component/list-vessel/list-vessel.component.ts b/src/app/component/list-vessel/list-vessel.component.ts
index feb356c..fecc274 100644
--- a/src/app/component/list-vessel/list-vessel.component.ts
+++ b/src/app/component/list-vessel/list-vessel.component.ts
@@ -32,12 +32,4 @@ export class ListVesselComponent implements OnInit {
     });
   }
 
-  // ngAfterViewInit(): void {
-  //   this.vesselsService.currentVessels.subscribe(vessels => {
-  //     setTimeout(() =>
-  //       this.vessels = vessels
-  //     );
-  //   });
-  // }
-
 }
diff --git a/src/app/component/map/map.component.ts b/src/app/component/map/map.component.ts
index e87884f..c1e3c97 100644
--- a/src/app/component/map/map.component.ts
+++ b/src/app/component/map/map.component.ts
@@ -13,6 +13,7 @@ import {Message} from '../../model/message';
 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) {
@@ -31,9 +32,7 @@ export class MapComponent implements OnInit {
   }
 
   initMap(): void {
-    this.map = L.map('map', {
-      preferCanvas: true
-    }).setView([0, 0], 1);
+    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);
@@ -42,6 +41,7 @@ export class MapComponent implements OnInit {
   addCircleMarker(message: Message, color: string): void {
     const circleMarker = L.circleMarker([+message.latitude, +message.longitude],
       {
+        renderer: this.renderer,
         radius: 0.1,
         color
       }).addTo(this.map);
diff --git a/src/app/model/vessel.ts b/src/app/model/vessel.ts
index 20567c2..cdff0f1 100644
--- a/src/app/model/vessel.ts
+++ b/src/app/model/vessel.ts
@@ -20,7 +20,7 @@ export class Vessel {
   }
 
   public getColor(): string {
-    return (+this.getMMSI()).toString(16);
+    return '#' + (+this.getMMSI()).toString(16).substr(0, 6);
   }
 
 }
diff --git a/src/app/model/vessels.ts b/src/app/model/vessels.ts
index a4f7b93..282f727 100644
--- a/src/app/model/vessels.ts
+++ b/src/app/model/vessels.ts
@@ -1,6 +1,5 @@
 import {Vessel} from './vessel';
 import {Message} from './message';
-import { delay } from 'rxjs/operators';
 
 export class Vessels {
   vessels: Map<number, Vessel>;
-- 
1.7.10.4