diff --git a/angular.json b/angular.json
index d4cbf9e..78ae6c4 100644
--- a/angular.json
+++ b/angular.json
@@ -29,6 +29,7 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/leaflet/dist/leaflet.css",
               "src/styles.scss"
             ],
             "scripts": [
diff --git a/package-lock.json b/package-lock.json
index 5e21bfd..4269b02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1721,6 +1721,11 @@
         "semver-intersect": "1.4.0"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.7",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
+      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -1760,6 +1765,14 @@
       "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.5.19",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.19.tgz",
+      "integrity": "sha512-ZAKqfvdU/+KFoCpf8aUba09F8mfSc8R2esq++Cha3E2DgwS5K/I/4eJ+0JylrVHZivgY7PSAeXFv/izP+81/MQ==",
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -7097,6 +7110,11 @@
       "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
       "dev": true
     },
+    "leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
     "less": {
       "version": "3.12.2",
       "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
diff --git a/package.json b/package.json
index f692b2f..97bd2bf 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,11 @@
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
     "@types/jquery": "^3.5.3",
+    "@types/leaflet": "^1.5.19",
     "angular-split": "^4.0.0",
     "bootstrap": "^4.5.3",
     "jquery": "^3.5.1",
+    "leaflet": "^1.7.1",
     "ngx-bootstrap-icons": "^1.2.0",
     "ngx-dropzone": "^2.2.2",
     "ninja-splitter": "^1.1.3",
diff --git a/src/app/component/app.component.html b/src/app/component/app.component.html
index 5a44dbd..900e2cc 100644
--- a/src/app/component/app.component.html
+++ b/src/app/component/app.component.html
@@ -8,7 +8,7 @@
     <as-split-area size="80">
       <as-split direction="vertical">
         <as-split-area size="100">
-          map
+          <app-map></app-map>
         </as-split-area>
         <as-split-area size="100">
           Graph
@@ -18,3 +18,6 @@
   </as-split>
 </div>
 <router-outlet></router-outlet>
+
+
+<!--<app-map></app-map>-->
diff --git a/src/app/component/import-vessels/import-vessels.component.ts b/src/app/component/import-vessels/import-vessels.component.ts
index 2a56aba..e8936c9 100644
--- a/src/app/component/import-vessels/import-vessels.component.ts
+++ b/src/app/component/import-vessels/import-vessels.component.ts
@@ -1,7 +1,6 @@
 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {VesselsService} from '../../service/vessels.service';
 import {Message} from '../../model/message';
-import {Vessel} from '../../model/vessel';
 import {Vessels} from '../../model/vessels';
 
 @Component({
@@ -44,11 +43,13 @@ export class ImportVesselsComponent implements OnInit {
     if (this.files[index].progress < 100) {
       return;
     }
+    this.vessels = new Vessels();
+    this.vesselsService.changeVesselsSet(this.vessels);
     this.files.splice(index, 1);
   }
 
 
-  uploadFilesSimulator(index: number): void {
+  uploadFiles(index: number): void {
     const fileReader = new FileReader();
     let nbLine: number;
     fileReader.onload = (e) => {
@@ -67,7 +68,7 @@ export class ImportVesselsComponent implements OnInit {
       this.vesselsService.changeVesselsSet(this.vessels);
     };
 
-    fileReader.onprogress = (e ) => {
+    fileReader.onprogress = (e) => {
       if (e.lengthComputable) {
         this.files[index].progress = Math.round(((e.loaded / e.total) * 100));
       }
@@ -77,12 +78,13 @@ export class ImportVesselsComponent implements OnInit {
   }
 
   prepareFilesList(files: Array<any>): void {
+    this.files = [];
     for (const item of files) {
       item.progress = 0;
       this.files.push(item);
     }
     this.fileDropEl.nativeElement.value = '';
-    this.uploadFilesSimulator(0);
+    this.uploadFiles(0);
   }
 
   formatBytes(bytes, decimals = 2): string {
diff --git a/src/app/component/map/map.component.html b/src/app/component/map/map.component.html
index 088f942..919fd02 100644
--- a/src/app/component/map/map.component.html
+++ b/src/app/component/map/map.component.html
@@ -1 +1 @@
-<p>map works!</p>
+<div style="width: 100%; height: 100%" id="map"></div>
diff --git a/src/app/component/map/map.component.ts b/src/app/component/map/map.component.ts
index 0a3a763..add56e3 100644
--- a/src/app/component/map/map.component.ts
+++ b/src/app/component/map/map.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import * as L from 'leaflet';
+import {Vessels} from '../../model/vessels';
+import {VesselsService} from '../../service/vessels.service';
 
 @Component({
   selector: 'app-map',
@@ -6,10 +9,26 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./map.component.scss']
 })
 export class MapComponent implements OnInit {
+  vessels: Vessels;
 
-  constructor() { }
+  constructor(private vesselsService: VesselsService) { }
 
   ngOnInit(): void {
+    this.connectVesselObservable();
+    this.initMap();
+  }
+
+  connectVesselObservable(): void {
+    this.vesselsService.currentVessels.subscribe(vessels => {
+      this.vessels = vessels;
+    });
+  }
+
+  initMap(): void {
+    const myMap = L.map('map').setView([0, 0], 1);
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      attribution: 'map'
+    }).addTo(myMap);
   }
 
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 82d91dc..73a7296 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "leaflet"
+    ]
   },
   "files": [
     "src/main.ts",