FDITeam / visualisation-maritime2

Download as
Browse Code ยป

Commit c4e00deb95454790dc9c206804b235ecdc9c3e48

Authored by lsagona
1 parent de59ffef8b
Exists in master

add map

Showing 8 changed files with 55 additions and 8 deletions Side-by-side Diff

angular.json View file @ c4e00de
... ... @@ -29,6 +29,7 @@
29 29 ],
30 30 "styles": [
31 31 "node_modules/bootstrap/dist/css/bootstrap.css",
  32 + "node_modules/leaflet/dist/leaflet.css",
32 33 "src/styles.scss"
33 34 ],
34 35 "scripts": [
package-lock.json View file @ c4e00de
... ... @@ -1721,6 +1721,11 @@
1721 1721 "semver-intersect": "1.4.0"
1722 1722 }
1723 1723 },
  1724 + "@types/geojson": {
  1725 + "version": "7946.0.7",
  1726 + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
  1727 + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
  1728 + },
1724 1729 "@types/glob": {
1725 1730 "version": "7.1.3",
1726 1731 "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
... ... @@ -1760,6 +1765,14 @@
1760 1765 "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
1761 1766 "dev": true
1762 1767 },
  1768 + "@types/leaflet": {
  1769 + "version": "1.5.19",
  1770 + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.19.tgz",
  1771 + "integrity": "sha512-ZAKqfvdU/+KFoCpf8aUba09F8mfSc8R2esq++Cha3E2DgwS5K/I/4eJ+0JylrVHZivgY7PSAeXFv/izP+81/MQ==",
  1772 + "requires": {
  1773 + "@types/geojson": "*"
  1774 + }
  1775 + },
1763 1776 "@types/minimatch": {
1764 1777 "version": "3.0.3",
1765 1778 "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
... ... @@ -7096,6 +7109,11 @@
7096 7109 "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
7097 7110 "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
7098 7111 "dev": true
  7112 + },
  7113 + "leaflet": {
  7114 + "version": "1.7.1",
  7115 + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
  7116 + "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
7099 7117 },
7100 7118 "less": {
7101 7119 "version": "3.12.2",
package.json View file @ c4e00de
... ... @@ -20,9 +20,11 @@
20 20 "@angular/platform-browser-dynamic": "~10.2.0",
21 21 "@angular/router": "~10.2.0",
22 22 "@types/jquery": "^3.5.3",
  23 + "@types/leaflet": "^1.5.19",
23 24 "angular-split": "^4.0.0",
24 25 "bootstrap": "^4.5.3",
25 26 "jquery": "^3.5.1",
  27 + "leaflet": "^1.7.1",
26 28 "ngx-bootstrap-icons": "^1.2.0",
27 29 "ngx-dropzone": "^2.2.2",
28 30 "ninja-splitter": "^1.1.3",
src/app/component/app.component.html View file @ c4e00de
... ... @@ -8,7 +8,7 @@
8 8 <as-split-area size="80">
9 9 <as-split direction="vertical">
10 10 <as-split-area size="100">
11   - map
  11 + <app-map></app-map>
12 12 </as-split-area>
13 13 <as-split-area size="100">
14 14 Graph
... ... @@ -18,4 +18,7 @@
18 18 </as-split>
19 19 </div>
20 20 <router-outlet></router-outlet>
  21 +
  22 +
  23 +<!--<app-map></app-map>-->
src/app/component/import-vessels/import-vessels.component.ts View file @ c4e00de
1 1 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
2 2 import {VesselsService} from '../../service/vessels.service';
3 3 import {Message} from '../../model/message';
4   -import {Vessel} from '../../model/vessel';
5 4 import {Vessels} from '../../model/vessels';
6 5  
7 6 @Component({
8 7  
... ... @@ -44,11 +43,13 @@
44 43 if (this.files[index].progress < 100) {
45 44 return;
46 45 }
  46 + this.vessels = new Vessels();
  47 + this.vesselsService.changeVesselsSet(this.vessels);
47 48 this.files.splice(index, 1);
48 49 }
49 50  
50 51  
51   - uploadFilesSimulator(index: number): void {
  52 + uploadFiles(index: number): void {
52 53 const fileReader = new FileReader();
53 54 let nbLine: number;
54 55 fileReader.onload = (e) => {
... ... @@ -67,7 +68,7 @@
67 68 this.vesselsService.changeVesselsSet(this.vessels);
68 69 };
69 70  
70   - fileReader.onprogress = (e ) => {
  71 + fileReader.onprogress = (e) => {
71 72 if (e.lengthComputable) {
72 73 this.files[index].progress = Math.round(((e.loaded / e.total) * 100));
73 74 }
74 75  
... ... @@ -77,12 +78,13 @@
77 78 }
78 79  
79 80 prepareFilesList(files: Array<any>): void {
  81 + this.files = [];
80 82 for (const item of files) {
81 83 item.progress = 0;
82 84 this.files.push(item);
83 85 }
84 86 this.fileDropEl.nativeElement.value = '';
85   - this.uploadFilesSimulator(0);
  87 + this.uploadFiles(0);
86 88 }
87 89  
88 90 formatBytes(bytes, decimals = 2): string {
src/app/component/map/map.component.html View file @ c4e00de
1   -<p>map works!</p>
  1 +<div style="width: 100%; height: 100%" id="map"></div>
src/app/component/map/map.component.ts View file @ c4e00de
1 1 import { Component, OnInit } from '@angular/core';
  2 +import * as L from 'leaflet';
  3 +import {Vessels} from '../../model/vessels';
  4 +import {VesselsService} from '../../service/vessels.service';
2 5  
3 6 @Component({
4 7 selector: 'app-map',
5 8  
6 9  
... ... @@ -6,10 +9,26 @@
6 9 styleUrls: ['./map.component.scss']
7 10 })
8 11 export class MapComponent implements OnInit {
  12 + vessels: Vessels;
9 13  
10   - constructor() { }
  14 + constructor(private vesselsService: VesselsService) { }
11 15  
12 16 ngOnInit(): void {
  17 + this.connectVesselObservable();
  18 + this.initMap();
  19 + }
  20 +
  21 + connectVesselObservable(): void {
  22 + this.vesselsService.currentVessels.subscribe(vessels => {
  23 + this.vessels = vessels;
  24 + });
  25 + }
  26 +
  27 + initMap(): void {
  28 + const myMap = L.map('map').setView([0, 0], 1);
  29 + L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  30 + attribution: 'map'
  31 + }).addTo(myMap);
13 32 }
14 33  
15 34 }
tsconfig.app.json View file @ c4e00de
... ... @@ -3,7 +3,9 @@
3 3 "extends": "./tsconfig.json",
4 4 "compilerOptions": {
5 5 "outDir": "./out-tsc/app",
6   - "types": []
  6 + "types": [
  7 + "leaflet"
  8 + ]
7 9 },
8 10 "files": [
9 11 "src/main.ts",