refactor: Move layer definition stuff inside class

src/app-js.ts

@@ -20,8 +20,8 @@ import * as angular from 'angular';
 import {downgradeInjectable} from '@angular/upgrade/static';
 
 import './adjuster/';
-import {AppModule} from './app.module';
 import {AppConfig} from './app.config';
+import {AppModule} from './app.module';
 import {AppService} from './app.service';
 import {HsComponent} from './app.component';
 //import {downgrade} from 'hslayers-ng/common/downgrader';

src/app.component.ts

@@ -27,4 +27,3 @@ export const HsComponent = {
     }
   },
 };
-

src/app.config.ts

@@ -1,7 +1,6 @@
 import View from 'ol/View';
 import {OSM} from 'ol/source';
 import {Tile} from 'ol/layer';
-import {nuts2Layer, nuts3Layer} from './app.service';
 
 function getHostname() {
   const url = window.location.href;
@@ -27,8 +26,6 @@ export const AppConfig = {
       base: true,
       removable: false,
     }),
-    nuts3Layer,
-    nuts2Layer,
   ],
   popUpDisplay: 'hover',
   project_name: 'erra/map',
@@ -70,6 +67,6 @@ export const AppConfig = {
     legend: false,
   },
   sizeMode: 'fullscreen',
-}
+};
 
 export default AppConfig;

src/app.service.ts

@@ -1,10 +1,13 @@
 import * as hsv2rgb from 'hsv2rgb';
-import {Injectable} from '@angular/core';
+import {Feature} from 'ol';
 import {Fill, Stroke, Style} from 'ol/style';
+import {Injectable} from '@angular/core';
 import {Vector as VectorLayer} from 'ol/layer';
 
+import {HsConfig} from 'hslayers-ng/config.service';
 import {HsDialogContainerService} from 'hslayers-ng/components/layout/dialogs/dialog-container.service';
 import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
+import {HsMapService} from 'hslayers-ng/components/map/map.service';
 import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
 import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
 
@@ -15,18 +18,104 @@ import {nuts} from './nuts';
 
 @Injectable({providedIn: 'root'})
 export class AppService {
+  // https://colorbrewer2.org/?type=qualitative&scheme=Paired&n=12
+  colorPalette = [
+    '#a6cee3',
+    '#1f78b4',
+    '#b2df8a',
+    '#33a02c',
+    '#fb9a99',
+    '#e31a1c',
+    '#fdbf6f',
+    '#ff7f00',
+    '#cab2d6',
+    '#6a3d9a',
+    '#ffff99',
+    '#b15928',
+  ];
+  nuts2style = new Style({
+    stroke: new Stroke({
+      color: '#000000',
+      width: 0.5,
+    }),
+  });
+  nuts2Layer = new VectorLayer({
+    source: nuts.nuts2Source,
+    editor: {editable: false},
+    visible: false,
+    style: this.nuts2style,
+    title: 'NUTS2 regions',
+  });
+  nuts3style = (feature: Feature): Style => {
+    if (isNaN(feature.get(this.method))) {
+      return [
+        new Style({
+          fill: new Fill({
+            color: '#FFF',
+          }),
+          stroke: new Stroke({
+            color: '#3399CC',
+            width: 0.25,
+          }),
+        }),
+      ];
+    } else {
+      return [
+        new Style({
+          fill: new Fill({
+            color: this.colorPalette[feature.get(this.method) - 1],
+          }),
+          stroke: new Stroke({
+            color: '#FFF',
+            width: 0.25,
+          }),
+        }),
+      ];
+    }
+  };
+  nuts3Layer = new VectorLayer({
+    source: nuts.nuts3Source,
+    editor: {editable: false},
+    visible: true,
+    style: this.nuts3style,
+    title: 'NUTS3 regions',
+  });
+  // TODO: 'method' must be obtained from AdjusterService
+  method = 'haclustwd2';
+  serviceUrl = 'https://jmacura.ml/ws/georeport/';
   constructor(
     private adjusterService: AdjusterService,
+    private hsConfig: HsConfig,
     private hsDialogContainerService: HsDialogContainerService,
     private hsLayoutService: HsLayoutService,
+    private hsMapService: HsMapService,
     private hsSidebarService: HsSidebarService,
     private hsPanelContainerService: HsPanelContainerService
   ) {
+    this.nuts3Layer.set('popUp', {
+      attributes: [
+        {attribute: 'CNTR_CODE', label: 'Country'},
+        {attribute: 'NUTS_NAME', label: 'Name'},
+        {attribute: this.method, label: 'Cluster ID'},
+        {
+          attribute: 'NUTS_ID',
+          label: 'Detailed report',
+          displayFunction: (x) => {
+            return `<a href="${this.serviceUrl}${x}" target="_blank">in a new page</a>.`;
+          },
+        },
+      ],
+    });
     adjusterService.clustersLoaded.subscribe(() => {
-      colorPalette = generateRandomColorPalette(
+      this.colorPalette = this.generateRandomColorPalette(
         adjusterService.clusters.length
       );
     });
+    /* The order of pushes matter! */
+    this.hsConfig.default_layers.push(this.nuts3Layer);
+    this.hsConfig.default_layers.push(this.nuts2Layer);
+    //this.hsMapService.repopulateLayers([]);
+    /* */
     this.init();
   }
 
@@ -44,110 +133,26 @@ export class AppService {
     this.hsLayoutService.setDefaultPanel('adjuster');
     //this.hsLayoutService.sidebarRight = false;
   }
-}
-
-// https://colorbrewer2.org/?type=qualitative&scheme=Paired&n=12
-let colorPalette = [
-  '#a6cee3',
-  '#1f78b4',
-  '#b2df8a',
-  '#33a02c',
-  '#fb9a99',
-  '#e31a1c',
-  '#fdbf6f',
-  '#ff7f00',
-  '#cab2d6',
-  '#6a3d9a',
-  '#ffff99',
-  '#b15928',
-];
-
-const nuts2style = new Style({
-  stroke: new Stroke({
-    color: '#000000',
-    width: 0.5,
-  }),
-});
-
-// TODO: 'method' must be obtained from AdjusterService
-const method = 'haclustwd2';
-const serviceUrl = 'https://jmacura.ml/ws/georeport/';
-const nuts3style = function (feature) {
-  if (isNaN(feature.get(method))) {
-    return [
-      new Style({
-        fill: new Fill({
-          color: '#FFF',
-        }),
-        stroke: new Stroke({
-          color: '#3399CC',
-          width: 0.25,
-        }),
-      }),
-    ];
-  } else {
-    return [
-      new Style({
-        fill: new Fill({
-          color: colorPalette[feature.get(method) - 1],
-        }),
-        stroke: new Stroke({
-          color: '#FFF',
-          width: 0.25,
-        }),
-      }),
-    ];
-  }
-};
-
-export const nuts2Layer = new VectorLayer({
-  source: nuts.nuts2Source,
-  editor: {editable: false},
-  visible: false,
-  style: nuts2style,
-  title: 'NUTS2 regions',
-});
-
-export const nuts3Layer = new VectorLayer({
-  source: nuts.nuts3Source,
-  editor: {editable: false},
-  visible: true,
-  style: nuts3style,
-  title: 'NUTS3 regions',
-});
-nuts3Layer.set('popUp', {
-  attributes: [
-    {attribute: 'CNTR_CODE', label: 'Country'},
-    {attribute: 'NUTS_NAME', label: 'Name'},
-    {attribute: method, label: 'Cluster ID'},
-    {
-      attribute: 'NUTS_ID',
-      label: 'Detailed report',
-      displayFunction: (x) => {
-        return `<a href="${serviceUrl}${x}" target="_blank">in a new page</a>.`;
-      },
-    },
-  ],
-});
 
-/**
- * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
- * @private
- * @param {number} colorCount Number of colors to randomly generate
- * @returns {Array<Array<Number>>} Array of RGB colors
- */
-function generateRandomColorPalette(colorCount) {
-  const palette = colorPalette;
-  const goldenRatioConjugate = 0.618033988749895;
-  let i = palette.length;
-  while (i < colorCount) {
-    let h = Math.random();
-    h += goldenRatioConjugate;
-    h %= 1;
-    h *= 360;
-    palette.push(hsv2rgb(h, 0.5, 0.95));
-    i++;
+  /**
+   * https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
+   * @private
+   * @param {number} colorCount Number of colors to randomly generate
+   * @returns {Array<Array<Number>>} Array of RGB colors
+   */
+  private generateRandomColorPalette(colorCount) {
+    const palette = this.colorPalette;
+    const goldenRatioConjugate = 0.618033988749895;
+    let i = palette.length;
+    while (i < colorCount) {
+      let h = Math.random();
+      h += goldenRatioConjugate;
+      h %= 1;
+      h *= 360;
+      palette.push(hsv2rgb(h, 0.5, 0.95));
+      i++;
+    }
+    return palette;
+    //return `rgba(${r}, ${g}, ${b}, 0.7)`;
   }
-  return palette;
-  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
 }