♻️ ⬆️ upgrade HSL to 6.1

angular.json

@@ -25,7 +25,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/images/cropped-favicon-32x32.png",
               "src/assets",
@@ -38,7 +37,13 @@
             "preserveSymlinks": true,
             "styles": [
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -50,7 +55,6 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": true,
               "namedChunks": false,
               "statsJson": true,
               "extractLicenses": true,
@@ -69,7 +73,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",

environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

package.json

@@ -4,11 +4,11 @@
   "description": "Rural attractiveness aplication",
   "main": "build/index.html",
   "scripts": {
-    "build": "ng build --prod",
-    "build-dev": "ng build --aot",
+    "build": "ng build --configuration production",
+    "build-dev": "ng build",
     "serve": "npm run start-dev",
     "start": "npx http-server ./build -p 8080",
-    "start-dev": "ng serve --aot --disable-host-check",
+    "start-dev": "ng serve --configuration production --disable-host-check",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -25,31 +25,34 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@angular/cdk": "^11.2.13",
-    "@angular/common": "^11.2.14",
-    "@angular/compiler": "^11.2.14",
-    "@angular/core": "^11.2.14",
-    "@angular/forms": "^11.2.14",
-    "@angular/localize": "^11.2.14",
-    "@angular/platform-browser": "^11.2.14",
-    "@angular/platform-browser-dynamic": "^11.2.14",
-    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
+    "@angular/cdk": "^12.2.9",
+    "@angular/common": "^12.2.10",
+    "@angular/compiler": "^12.2.10",
+    "@angular/core": "^12.2.10",
+    "@angular/forms": "^12.2.10",
+    "@angular/localize": "^12.2.10",
+    "@angular/platform-browser": "^12.2.10",
+    "@angular/platform-browser-dynamic": "^12.2.10",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
     "@ngx-translate/http-loader": "^5.0.0",
     "bootstrap": "^4.5.3",
     "csvtojson": "^2.0.10",
     "dayjs": "^1.10.7",
     "deepmerge": "^4.2.2",
+    "file-loader": "^6.2.0",
     "geostyler-openlayers-parser": "^2.5.0",
     "geostyler-sld-parser": "^2.5.0",
     "geostyler-style": "^4.0.3",
-    "hslayers-ng": "^5.1.0",
+    "hslayers-ng": "^6.1.0",
     "hsv2rgb": "^1.1.0",
     "http-server": "^0.12.3",
-    "ngx-color": "^6.2.0",
-    "ngx-cookie-service": "^11.0.2",
-    "ol": "6.5",
+    "ngx-color": "^7.2.0",
+    "ngx-cookie-service": "^12.0.3",
+    "ol": "6.7",
     "ol-popup": "^4.0.0",
     "proj4": "2.7",
+    "queue": "^6.0.2",
+    "resumablejs": "^1.1.0",
     "rxjs": "6.6",
     "share-api-polyfill": "^1.0.20",
     "ts-sync-request": "^1.4.1",
@@ -58,11 +61,10 @@
     "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^11.1.1",
-    "@angular-devkit/build-angular": "^0.1102.14",
-    "@angular-devkit/build-ng-packagr": "^0.1002.0",
-    "@angular/cli": "^11.2.14",
-    "@angular/compiler-cli": "^11.2.14",
+    "@angular-builders/custom-webpack": "^12.1.3",
+    "@angular-devkit/build-angular": "^12.2.10",
+    "@angular/cli": "^12.2.10",
+    "@angular/compiler-cli": "^12.2.10",
     "@angularclass/hmr": "^3.0.0",
     "@ngx-translate/core": "^12.1.2",
     "eslint": "^7.10.0",
@@ -70,9 +72,9 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^12.2.3",
     "sass": "^1.32.7",
-    "typescript": "4.1.6",
+    "typescript": "4.2",
     "webpack": "^4.46.0",
     "webpack-dev-server": "^3.11.2"
   }

src/adjuster/adjuster.component.ts

@@ -14,6 +14,7 @@ import {AdjusterService} from './adjuster.service';
   styleUrls: ['./adjuster.component.scss'],
 })
 export class AdjusterComponent implements HsPanelComponent, OnInit {
+  name = 'adjuster';
   data: any;
   //descriptionVisible: boolean;
   errorMsg: string;

src/adjuster/adjuster.service.ts

@@ -409,7 +409,7 @@ export class AdjusterService {
 
 type MethodDescription = {
   codename: string;
-  layer?: VectorLayer;
+  layer?: VectorLayer<any>;
   name: string;
   type: string;
 };

src/app.config.ts

@@ -32,6 +32,12 @@ function getHostname() {
 }
 
 export const cartodbLayer = new Tile({
+  properties: {
+    title: 'OpenStreetMap světlá',
+    base: true,
+    editor: {editable: false},
+    removable: false,
+  },
   source: new XYZ({
     url:
       'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
@@ -40,23 +46,26 @@ export const cartodbLayer = new Tile({
       '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
     ],
   }),
-  title: 'OpenStreetMap světlá',
   visible: true,
-  base: true,
-  editor: {editable: false},
-  removable: false,
 });
 
 export const osmLayer = new Tile({
+  properties: {
+    title: 'OpenStreetMap barevná',
+    base: true,
+    editor: {editable: false},
+    removable: false,
+  },
   source: new OSM(),
-  title: 'OpenStreetMap barevná',
-  base: true,
   visible: false,
-  editor: {editable: false},
-  removable: false,
 });
 
 export const zm100Layer = new Tile({
+  properties: {
+    title: 'Mapa ČR 1:100 000',
+    base: true,
+    removable: false,
+  },
   source: new TileWMS({
     url: 'https://geoportal.cuzk.cz/WMS_ZM100_PUB/WMService.aspx',
     params: {
@@ -90,13 +99,15 @@ export const zm100Layer = new Tile({
       matrixIds: [1, 2, 3],
     }),
   }),*/
-  title: 'Mapa ČR 1:100 000',
-  base: true,
   visible: false,
-  removable: false,
 });
 
 export const mcr500Layer = new Tile({
+  properties: {
+    title: 'Mapa ČR 1:500 000',
+    base: true,
+    removable: false,
+  },
   source: new TileWMS({
     url: 'https://geoportal.cuzk.cz/WMS_MCR500/WMService.aspx',
     params: {
@@ -104,13 +115,17 @@ export const mcr500Layer = new Tile({
     },
     attributions: ['© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>'],
   }),
-  title: 'Mapa ČR 1:500 000',
-  base: true,
+  
   visible: false,
-  removable: false,
 });
 
 export const ortofotoLayer = new Tile({
+  properties: {
+    title: 'Ortofoto ČÚZK',
+    base: true,
+    removable: false,
+    thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
+  },
   source: new TileWMS({
     url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
     params: {
@@ -118,11 +133,7 @@ export const ortofotoLayer = new Tile({
     },
     attributions: ['© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>'],
   }),
-  title: 'Ortofoto ČÚZK',
-  base: true,
   visible: false,
-  removable: false,
-  thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
 });
 
 export const perc2color = (perc: number): string => {
@@ -182,12 +193,14 @@ export const obce = new VectorSource({
 });
 
 export const obceIndexLayer = new VectorLayer({
+  properties: {
+    editor: {editable: false},
+    autoLegend: false,
+    title: 'Obce ČR: Rural attractiveness index',
+  },
   source: obce,
-  editor: {editable: false},
-  autoLegend: false,
   visible: true,
   style: indexStyle,
-  title: 'Obce ČR: Rural attractiveness index',
 });
 obceIndexLayer.set('popUp', {
   attributes: [
@@ -237,22 +250,24 @@ const masStyle = (feature) =>
   });
 
 export const masLayer = new VectorLayer({
+  properties: {
+    editor: {editable: false},
+    title: 'MAS ČR',
+    attributions: ['&copy; NS MAS ČR, http://nsmascr.cz/o-nas/'],
+    popUp: {
+      attributes: [
+        /*{attribute: 'mas_type', label: 'člen NS MAS?', displayFunction: (attr) => {TODO:}}*/
+      ],
+    },
+  },
   source: new VectorSource({
     format: new TopoJSON({dataProjection: 'EPSG:5514'}),
     url: require('./data/mas_2021.topojson').default,
     overlaps: false,
   }),
-  editor: {editable: false},
   visible: false,
   opacity: 0.8,
   style: masStyle,
-  title: 'MAS ČR',
-  popUp: {
-    attributes: [
-      /*{attribute: 'mas_type', label: 'člen NS MAS?', displayFunction: (attr) => {TODO:}}*/
-    ],
-  },
-  attributions: ['&copy; NS MAS ČR, http://nsmascr.cz/o-nas/'],
 });
 
 const okresyStyle = new Style({
@@ -263,16 +278,18 @@ const okresyStyle = new Style({
 });
 
 export const okresyLayer = new VectorLayer({
+  properties: {
+    editor: {editable: false},
+    title: 'Okresy ČR',
+    attributions: ['CC-BY ČÚZK, 2021'],
+  },
   source: new VectorSource({
     format: new TopoJSON({dataProjection: 'EPSG:5514'}),
     url: require('./data/okresy_cr_20210310_5p_5514.topojson').default,
     overlaps: false,
   }),
-  editor: {editable: false},
   visible: false,
   style: okresyStyle,
-  title: 'Okresy ČR',
-  attributions: ['CC-BY ČÚZK, 2021'],
 });
 
 const krajeStyle = new Style({
@@ -283,16 +300,18 @@ const krajeStyle = new Style({
 });
 
 export const krajeLayer = new VectorLayer({
+  properties: {
+    editor: {editable: false},
+    title: 'Kraje ČR',
+    attributions: ['CC-BY ČÚZK, 2021'],
+  },
   source: new VectorSource({
     format: new TopoJSON({dataProjection: 'EPSG:5514'}),
     url: require('./data/kraje_cr_20210310_5p_5514.topojson').default,
     overlaps: false,
   }),
-  editor: {editable: false},
   visible: true,
   style: krajeStyle,
-  title: 'Kraje ČR',
-  attributions: ['CC-BY ČÚZK, 2021'],
 });
 
 export const AppConfig = {
@@ -307,7 +326,6 @@ export const AppConfig = {
     projection: sjtskProjection,
     center: transform([15.628, 49.864249], 'EPSG:4326', 'EPSG:5514'),
     zoom: 7.6,
-    units: 'm',
   }),
   advanced_form: true,
   datasources: [],

src/app.service.ts

@@ -1,6 +1,7 @@
 import hsv2rgb from 'hsv2rgb';
 import {Feature} from 'ol';
 import {Fill, Stroke, Style} from 'ol/style';
+import {Geometry} from 'ol/geom';
 import {Injectable} from '@angular/core';
 import {TopoJSON} from 'ol/format';
 import {Vector as VectorLayer} from 'ol/layer';
@@ -74,45 +75,47 @@ export class AppService {
   prepareLayers(): void {
     for (const method of this.adjusterService.methods) {
       method.layer = new VectorLayer({
+        properties: {
+          editor: {editable: false},
+          autoLegend: false,
+          title: `Obce ČR: ${method.name.replace(/\((.+?)\)/g, '')} clusters`,
+          attributions: ['CC-BY ČÚZK, 2021'],
+          popUp: {
+            attributes: [
+              {
+                attribute: method.codename,
+                label: 'ID shluku',
+              },
+            ],
+          },
+        },
         source: new VectorSource({
           format: new TopoJSON({dataProjection: 'EPSG:5514'}),
           url: require('./data/obce_cr_20210310_5p_5514.topojson').default,
           overlaps: false,
         }),
-        editor: {editable: false},
-        autoLegend: false,
         visible: true,
         style: this.generateStyle(method.codename),
-        title: `Obce ČR: ${method.name.replace(/\((.+?)\)/g, '')} clusters`,
-        attributions: ['CC-BY ČÚZK, 2021'],
-        popUp: {
-          attributes: [
-            {
-              attribute: method.codename,
-              label: 'ID shluku',
-            },
-          ],
-        },
       });
       method.layer
         .getSource()
         .on('featuresloadend', () =>
           this.adjusterEventService.layerReady.next({name: method.codename})
         );
-      AppConfig.default_layers.push(method.layer);
+      AppConfig.default_layers.push(method.layer as any);
     }
     // obceIndexLayer, okresyLayer and krajeLayer must be pushed in this order
     // so they will display in correct order
-    AppConfig.default_layers.push(obceIndexLayer);
+    AppConfig.default_layers.push(obceIndexLayer as any);
     obceIndexLayer
       .getSource()
       .on('featuresloadend', () =>
         this.adjusterEventService.layerReady.next({name: 'index'})
       );
-    obceIndexLayer.getSource().legend_categories = this.adjusterLegendService.createIndexLegend();
-    AppConfig.default_layers.push(masLayer);
-    AppConfig.default_layers.push(okresyLayer);
-    AppConfig.default_layers.push(krajeLayer);
+    (obceIndexLayer.getSource() as any).legend_categories = this.adjusterLegendService.createIndexLegend();
+    AppConfig.default_layers.push(masLayer as any);
+    AppConfig.default_layers.push(okresyLayer as any);
+    AppConfig.default_layers.push(krajeLayer as any);
     this.hsConfig.update(AppConfig);
   }
 
@@ -122,7 +125,7 @@ export class AppService {
    * are for at least a moment turned visible and thus loaded properly.
    * @param {VectorLayer} layer One of layers used to calculate index or clusters
    */
-  ensureLayerIsLoaded(layer: VectorLayer): void {
+  ensureLayerIsLoaded(layer: VectorLayer<VectorSource<Geometry>>): void {
     const layerVisible = layer.getVisible();
     if (!layerVisible) {
       layer.setVisible(true);
@@ -136,7 +139,7 @@ export class AppService {
    * @returns {function} style function
    */
   private generateStyle(method: string) {
-    return (feature: Feature): Style => {
+    return (feature: Feature<Geometry>): Style => {
       if (isNaN(feature.get(method))) {
         return new Style({
           fill: new Fill({

tsconfig.json

@@ -13,6 +13,7 @@
     "lib": ["es2018", "dom"],
     "resolveJsonModule": true,
     "sourceMap": true,
+    "skipLibCheck": true,
     "target": "es5",
   },
   "angularCompilerOptions": {