angular.json

@@ -25,6 +25,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "preserveSymlinks": true,
             "aot": true,
             "assets": [
               "src/favicon.ico",

package.json

@@ -12,33 +12,53 @@
   },
   "private": true,
   "dependencies": {
+    "@angular/cdk": "^12.2.12",
+    "@angular/localize": "^12.2.12",
     "@fortawesome/angular-fontawesome": "^0.9.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
     "bootstrap": "^4.6.0",
+    "d3": "^6.7.0",
+    "dayjs": "^1.10.7",
+    "deepmerge": "^4.2.2",
+    "geostyler-legend": "^2.1.1",
+    "geostyler-openlayers-parser": "^3.0.0",
+    "geostyler-sld-parser": "^3.0.1",
+    "geostyler-style": "^5.0.0",
+    "geotiff": "^1.0.8",
     "hslayers-ng": "c:/Projects/hslayers-ng/dist/hslayers/",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
+    "ngx-color": "^7.2.0",
     "ngx-cookie-service": "^12.0.3",
     "ol": "^6.9.0",
+    "ol-popup": "^4.0.0",
     "primeicons": "^4.1.0",
     "primeng": "^12.2.0",
-    "rxjs": "~6.6.0",
+    "proj4": "^2.7.5",
+    "queue": "^6.0.2",
+    "resumablejs": "^1.1.0",
+    "rxjs": "^6.6.7",
+    "share-api-polyfill": "^1.0.21",
     "tslib": "2.0.0",
     "vega": "^5.20.2",
     "vega-tooltip": "^0.25.1",
-    "zone.js": "~0.11.3"
+    "xml-js": "^1.6.11",
+    "zone.js": "^0.11.3"
   },
   "peerDependencies": {
     "@angular/animations": "~12.2.9",
-    "@angular/common": "~12.2.9",
-    "@angular/compiler": "~12.2.9",
-    "@angular/core": "~12.2.9",
-    "@angular/forms": "~12.2.9",
-    "@angular/platform-browser": "~12.2.9",
-    "@angular/platform-browser-dynamic": "~12.2.9",
+    "@angular/common": "^12.2.9",
+    "@angular/compiler": "^12.2.9",
+    "@angular/core": "^12.2.9",
+    "@angular/forms": "^12.2.9",
+    "@angular/platform-browser": "^12.2.9",
+    "@angular/platform-browser-dynamic": "^12.2.9",
     "@angular/router": "~12.2.9"
   },
   "devDependencies": {
@@ -60,4 +80,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"
   }
-}
+}

src/app/dashboard/components/map/map.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@
 import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
 import { Extent } from 'ol/extent';
 import { Group, Tile, Vector as VectorLayer } from 'ol/layer';
-import { OSM, TileWMS, Vector, Vector as VectorSource } from 'ol/source';
+import { OSM, TileWMS, Vector as VectorSource } from 'ol/source';
 import GeoJSON from 'ol/format/GeoJSON';
 import { transform, transformExtent } from 'ol/proj';
 import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
@@ -20,6 +20,7 @@ import {
   HsEventBusService
 } from 'hslayers-ng';
 import { environment } from '../../../../environments/environment';
+import Geometry from 'ol/geom/Geometry';
 
 @Component({
   selector: 'app-map',
@@ -31,7 +32,7 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
   @Input('units') units: Array<{ drivers?: Drivers; generalInfo?: GeneralInfo; holder?: any; lastpos?: Lastpos; sensors?: Array<Sensor>; unit?: Unit }>;
   mapReady: boolean = false;
   dataReady: boolean = false;
-  unitsLayer: VectorLayer<Vector<any>>;
+  unitsLayer: VectorLayer<VectorSource<Geometry>>;
 
   constructor(
     private confirmationService: ConfirmationService,

src/assets/scss/styles.scss

@@ -34,7 +34,7 @@
 @import "node_modules/bootstrap/scss/tooltip";
 @import "node_modules/bootstrap/scss/popover";
 @import "node_modules/bootstrap/scss/carousel";
-@import "node_modules/bootstrap/scss/spinners";
+/*@import "node_modules/bootstrap/scss/spinners";*/
 @import "node_modules/bootstrap/scss/utilities";
 @import "node_modules/bootstrap/scss/print";