fix: zoom to units layer on start

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

@@ -1,3 +1,6 @@
 hslayers {
-  height: 600px;
-}
+  display: block;
+  height: calc(100vh - 220px);
+  min-height: 300px;
+  width: 100%;
+}

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

@@ -1,7 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, AfterViewInit, SimpleChanges } from '@angular/core';
 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 as VectorSource } from 'ol/source';
+import { OSM, TileWMS, Vector, 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';
@@ -24,10 +25,12 @@ import {
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
-export class MapComponent implements OnInit, OnDestroy {
+export class MapComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
 
   @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>>;
 
   constructor(
     private confirmationService: ConfirmationService,
@@ -38,6 +41,16 @@ export class MapComponent implements OnInit, OnDestroy {
     public HsLayerEditorService: HsLayerEditorService,
     public HsEventBusService: HsEventBusService
   ) {
+  }
+
+  ngAfterViewInit(): void {
+  //  this.mapReady = true;
+
+  //  if (this.dataReady)
+  //    this.initMap()
+  }
+
+  ngOnInit(): void {
     this.HsConfig.update({
       assetsPath: 'https://unpkg.com/hslayers-ng-app@3.1.0/assets/',
       proxyPrefix: window.location.hostname.includes('localhost')
@@ -57,26 +70,7 @@ export class MapComponent implements OnInit, OnDestroy {
                 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,
-            }),
-            this.initUnitsLayer()
+            })
           ]
         })
       ],
@@ -96,16 +90,39 @@ export class MapComponent implements OnInit, OnDestroy {
         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
-      })
-    })
+      queryPoint: 'hidden',
+    //  default_view: new View({
+    //    center: [1873444.3416929364, 6286508.646897761], // Latitude longitude    to Spherical Mercator
+    //    extent: [1871197.0792499082, 6282949.4051418, 1873509.6915773677, 6287134.61866585],
+    //    multiWorld: false,
+    //    zoom: 6
+    //  })
+    });
   }
 
-  ngOnInit(): void {
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['units']) {
+      //this.dataReady = true;
+
+      //if (this.mapReady)
+      this.HsMapService.loaded().then((map) => {
+        this.initMap();
+
+        let unitsExtent: Extent = this.unitsLayer.getSource().getExtent();
+        this.HsMapService.map.getView().fit(unitsExtent, { size: this.HsMapService.map.getSize() });
+
+        this.HsMapService.map.on("pointermove", function (evt) {
+          var hit = this.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+            return true;
+          });
+          if (hit) {
+            this.getTargetElement().style.cursor = 'pointer';
+          } else {
+            this.getTargetElement().style.cursor = '';
+          }
+        });
+      });
+    }
   }
 
   /**
@@ -114,10 +131,15 @@ export class MapComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
   }
 
+  initMap(): void {
+    this.unitsLayer = this.initUnitsLayer(this.HsMapService.map);
+    this.HsMapService.map.addLayer(this.unitsLayer);
+  }
+
   /**
    * Crete vector layer from units positions
    */
-  initUnitsLayer(): any {
+  initUnitsLayer(map: any): any {
     var geoJsonUnits = {
       'type': 'FeatureCollection',
       'crs': {
@@ -127,11 +149,15 @@ export class MapComponent implements OnInit, OnDestroy {
         }
       }
     };
-    geoJsonUnits['features'] = this.units ? this.units.map(u => this.getUnitPos(u.lastpos)) : [];
+    geoJsonUnits['features'] = this.units ? this.units.filter(u => (u.lastpos.position.x > 0)).map(u => this.getUnitPos(u.lastpos)) : [];
 
     const vectorSource = new VectorSource({
       features: new GeoJSON().readFeatures(geoJsonUnits),
     });
+    vectorSource.on('addfeature', function () {
+      map.getView().fit(vectorSource.getExtent());
+    });
+
     const vectorLayer = new VectorLayer({
       source: vectorSource,
       style: this.styleFunction,
@@ -144,9 +170,14 @@ export class MapComponent implements OnInit, OnDestroy {
     return new Style({
       image: new CircleStyle({
         radius: 5,
-        fill: null,
-        stroke: new Stroke({ color: 'red', width: 1 }),
-      }),
+        fill: new Fill({
+          color: 'red'
+        }),
+        stroke: new Stroke({
+          color: 'blue',
+          width: 2
+        })
+      })
     })
   }
 

src/app/dashboard/components/unit-list/unit-list.component.html

@@ -1,10 +1,13 @@
-<div *ngIf="(units == null)" class="loading-progress">Loading sensor data<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar></div>
+<div *ngIf="(units == null)" class="loading-progress">
+  <div>Loading sensor data</div>
+  <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>
+</div>
 
 <p-accordion>
   <p-accordionTab *ngFor="let unit of units">
     <p-header [className]="'dashboard-unit-wrapper'">
       <div [className]="'row dashboard-unit'">
-        <div class="col-sm-5 col-md-7 col-xl-9"><h3 class="unitName">{{ unit.unit.description}}</h3></div>
+        <div class="col-sm-5 col-md-7 col-xl-9"><h3 class="unitName">{{ unit.unit.description }}</h3></div>
         <div class="col-sm-7 col-md-5 col-xl-3 dashboard-unit-heading">
           <button pButton type="button" label="Sensors graph" class="p-button-primary" icon="pi pi-chart-line" [id]="unit.unit.description" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></button>
           <div class="dashboard-button-separator"></div>