diff --git a/src/app/component/import-vessels/import-vessels.component.ts b/src/app/component/import-vessels/import-vessels.component.ts
index e8936c9..4cb85ce 100644
--- a/src/app/component/import-vessels/import-vessels.component.ts
+++ b/src/app/component/import-vessels/import-vessels.component.ts
@@ -21,24 +21,14 @@ export class ImportVesselsComponent implements OnInit {
     this.vesselsService.currentVessels.subscribe(vessels => this.vessels = vessels);
   }
 
-  /**
-   * on file drop handler
-   */
   onFileDropped($event): void {
     this.prepareFilesList($event);
   }
 
-  /**
-   * handle file from browsing
-   */
   fileBrowseHandler(files): void {
     this.prepareFilesList(files);
   }
 
-  /**
-   * Delete file from files list
-   * @param index (File index)
-   */
   deleteFile(index: number): void {
     if (this.files[index].progress < 100) {
       return;
@@ -48,11 +38,10 @@ export class ImportVesselsComponent implements OnInit {
     this.files.splice(index, 1);
   }
 
-
   uploadFiles(index: number): void {
     const fileReader = new FileReader();
     let nbLine: number;
-    fileReader.onload = (e) => {
+    fileReader.onload = () => {
       this.vessels = new Vessels();
       const lines: string[] = (fileReader.result as string).split('\n');
       nbLine = lines.length;
diff --git a/src/app/component/list-vessel/list-vessel.component.ts b/src/app/component/list-vessel/list-vessel.component.ts
index 5ff9194..feb356c 100644
--- a/src/app/component/list-vessel/list-vessel.component.ts
+++ b/src/app/component/list-vessel/list-vessel.component.ts
@@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
 import {VesselsService} from '../../service/vessels.service';
 import {Vessels} from '../../model/vessels';
+
 declare var $: any;
 
 @Component({
@@ -11,13 +12,14 @@ declare var $: any;
 export class ListVesselComponent implements OnInit {
   vessels: Vessels;
 
-
   constructor(private vesselsService: VesselsService) {
   }
 
   ngOnInit(): void {
     this.vesselsService.currentVessels.subscribe(vessels => {
-      this.vessels = vessels;
+      setTimeout(() =>
+        this.vessels = vessels
+      );
     });
 
     $(document).ready(() => {
@@ -29,4 +31,13 @@ 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 add56e3..e87884f 100644
--- a/src/app/component/map/map.component.ts
+++ b/src/app/component/map/map.component.ts
@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+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',
@@ -10,25 +12,51 @@ import {VesselsService} from '../../service/vessels.service';
 })
 export class MapComponent implements OnInit {
   vessels: Vessels;
+  public map: L.Map;
+  circleMarkers: Map<number, CircleMarker> = new Map<number, CircleMarker>();
 
-  constructor(private vesselsService: VesselsService) { }
+  constructor(private vesselsService: VesselsService) {
+  }
 
   ngOnInit(): void {
-    this.connectVesselObservable();
     this.initMap();
+    this.connectVesselObservable();
   }
 
   connectVesselObservable(): void {
     this.vesselsService.currentVessels.subscribe(vessels => {
       this.vessels = vessels;
+      this.updateMap();
     });
   }
 
   initMap(): void {
-    const myMap = L.map('map').setView([0, 0], 1);
+    this.map = L.map('map', {
+      preferCanvas: true
+    }).setView([0, 0], 1);
     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-      attribution: 'map'
-    }).addTo(myMap);
+      attribution: 'map',
+    }).addTo(this.map);
+  }
+
+  addCircleMarker(message: Message, color: string): void {
+    const circleMarker = L.circleMarker([+message.latitude, +message.longitude],
+      {
+        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);
+      });
+    }));
   }
 
 }
diff --git a/src/app/model/vessel.ts b/src/app/model/vessel.ts
index 6530798..20567c2 100644
--- a/src/app/model/vessel.ts
+++ b/src/app/model/vessel.ts
@@ -19,4 +19,8 @@ export class Vessel {
     return this.messages[0].vesselName;
   }
 
+  public getColor(): string {
+    return (+this.getMMSI()).toString(16);
+  }
+
 }
diff --git a/src/app/model/vessels.ts b/src/app/model/vessels.ts
index 282f727..a4f7b93 100644
--- a/src/app/model/vessels.ts
+++ b/src/app/model/vessels.ts
@@ -1,5 +1,6 @@
 import {Vessel} from './vessel';
 import {Message} from './message';
+import { delay } from 'rxjs/operators';
 
 export class Vessels {
   vessels: Map<number, Vessel>;