feat: add map component

src/app/app.module.ts

@@ -14,7 +14,8 @@ import {SensorModule} from './sensor/sensor.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {UnitModule} from './unit/unit.module';
 import {ConfirmationService, MessageService} from 'primeng/api';
-import {ToastModule} from 'primeng/toast';
+import { ToastModule } from 'primeng/toast';
+import { HslayersModule } from 'hslayers-ng'
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import {ToastModule} from 'primeng/toast';
     SensorModule,
     FontAwesomeModule,
     UnitModule,
-    ToastModule
+    ToastModule,
+    HslayersModule
   ],
   providers: [
     ConfirmationService,

src/app/map/map.component.html

@@ -0,0 +1,5 @@
+<!--<app-nav-bar (emitNewUnit)="addUnit($event)" [sensorTypes]="sensorTypes"></app-nav-bar>-->
+
+<div class="container map">
+  <hslayers></hslayers>
+</div>

src/app/map/map.component.ts

@@ -0,0 +1,126 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ConfirmationService, MenuItem, MessageService } from 'primeng/api';
+import { HttpResponse } from '@angular/common/http';
+import { Group, Tile } from 'ol/layer';
+import { OSM, TileWMS, ImageWMS, TileArcGISRest, Vector as VectorSource } from 'ol/source';
+import { transform, transformExtent } from 'ol/proj';
+import View from 'ol/View';
+import {
+  HsConfig,
+  HsMapService,
+  HsLayerManagerService,
+  HsLayerEditorService,
+  HsEventBusService
+} from 'hslayers-ng';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+
+
+  constructor(
+    private confirmationService: ConfirmationService,
+    private messageService: MessageService,
+    public HsConfig: HsConfig,
+    public HsMapService: HsMapService,
+    public HsLayerManagerService: HsLayerManagerService,
+    public HsLayerEditorService: HsLayerEditorService,
+    public HsEventBusService: HsEventBusService
+  ) {
+    this.initData();
+
+    this.HsConfig.update({
+      assetsPath: 'https://unpkg.com/hslayers-ng-app@3.1.0/assets/',
+      proxyPrefix: window.location.hostname.includes('localhost')
+        ? `${window.location.protocol}//${window.location.hostname}:8085/`
+        : '/proxy/',
+      box_layers: [
+        new Group({
+          properties: {
+            title: 'Base layer',
+          },
+          layers: [
+            new Tile({
+              source: new OSM(),
+              visible: true,
+              properties: {
+                title: 'OpenStreetMap',
+                base: true,
+                removable: false
+              }
+            }),
+            new Tile({
+              source: new TileWMS({
+                url: 'http://ags.cuzk.cz/arcgis/services/ortofoto/MapServer/WMSServer',
+                params: {
+                  LAYERS: '0',
+                  INFO_FORMAT: 'text/html',
+                  FORMAT: 'image/png; mode=8bit'
+                },
+                crossOrigin: null
+              }),
+              properties: {
+                title: 'Ortofoto ÈÚZK',
+                base: true,
+                thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
+                removable: false
+              },
+              visible: false,
+            }),
+            new Tile({
+              properties: {
+                title: 'Esri World',
+                base: true,
+                thumbnail: 'https://www.smartafrihub.com/hsl-ng/esri-world.jpg'
+              },
+              visible: false,
+              source: new TileArcGISRest({
+                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/'
+              })
+            })
+          ]
+        })
+      ],
+      //default_layers: this.loadLayers(),
+      componentsEnabled: {
+        sidebar: false,
+        toolbar: false,
+        guiOverlay: true,
+        drawToolbar: false,
+        searchToolbar: false,
+        measureToolbar: false,
+        sensors: false,
+        crossfilter: false,
+        geolocationButton: false,
+        tracking: false,
+        mapControls: true,
+        basemapGallery: true
+      },
+      sidebarPosition: 'invisible',
+      default_view: new View({
+        center: transform([15.628, 49.864249], 'EPSG:4326', 'EPSG:3857'), // Latitude longitude    to Spherical Mercator
+        extent: transformExtent([9.832275, 46.151428, 21.423828, 53.577070], 'EPSG:4326', 'EPSG:3857'),
+        multiWorld: false,
+        zoom: 6
+      })
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Unsubscribe after leaving
+   */
+  ngOnDestroy(): void {
+  }
+
+  /**
+   * Get necessary data from backend
+   */
+  initData() {
+  }
+}