💄 use greyscale OSM

src/adjuster/adjuster.service.ts

@@ -1,10 +1,11 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 
+import {HsLayerManagerService} from 'hslayers-ng/components/layermanager';
 import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
 
 // import attractivity from '../Attractivity.json';
-import {obce} from '../app.config';
+import {obce, osmLayer} from '../app.config';
 
 @Injectable({providedIn: 'root'})
 export class AdjusterService {
@@ -13,10 +14,14 @@ export class AdjusterService {
   //attractivity;
   factors: any = [];
 
-  constructor(public hsUtilsService: HsUtilsService, public $http: HttpClient) {
+  constructor(
+    public hsLayerManagerService: HsLayerManagerService,
+    public hsUtilsService: HsUtilsService,
+    public $http: HttpClient
+  ) {
     this.serviceBaseUrl =
       window.location.hostname === 'localhost'
-        ? 'http://localhost:3000/' // 'https://jmacura.ml/ws/'
+        ? 'https://jmacura.ml/ws/' // 'http://localhost:3000/'
         : 'https://publish.lesprojekt.cz/nodejs/';
     this.init();
   }
@@ -145,6 +150,7 @@ export class AdjusterService {
             });
         });
         this.apply();
+        this.hsLayerManagerService.setGreyscale(osmLayer);
       })
       .catch((error) => {
         console.warn(`Web service at ${this.serviceBaseUrl} unavailable!`);

src/app.config.ts

@@ -26,6 +26,14 @@ function getHostname() {
   return urlArr[0] + '//' + domain;
 }
 
+export const osmLayer = new Tile({
+  source: new OSM(),
+  title: 'OpenStreetMap',
+  base: true,
+  editor: {editable: false},
+  removable: false,
+});
+
 const stroke = new Stroke({
   color: '#3399CC',
   width: 0.25,
@@ -87,7 +95,6 @@ const obceLayer = new VectorLayer({
 obceLayer.set('popUp', {
   attributes: [
     {attribute: 'text', label: 'Název'},
-    {attribute: 'nationalCode', label: 'LAU2 code'},
     {
       attribute: 'aggregate',
       label: 'RAI',
@@ -103,16 +110,7 @@ obceLayer.set('editable', false);
 
 export const AppConfig = {
   //proxyPrefix: '../8085/',
-  default_layers: [
-    new Tile({
-      source: new OSM(),
-      title: 'OpenStreetMap',
-      base: true,
-      editor: {editable: false},
-      removable: false,
-    }),
-    obceLayer,
-  ],
+  default_layers: [osmLayer, obceLayer],
   popUpDisplay: 'hover',
   project_name: 'erra/map',
   default_view: new View({

src/app.service.ts

@@ -1,6 +1,8 @@
 import {Injectable} from '@angular/core';
 
+import {HsEventBusService} from 'hslayers-ng/components/core/event-bus.service';
 import {HsLanguageService} from 'hslayers-ng/components/language/language.service';
+import {HsLayerManagerService} from 'hslayers-ng/components/layermanager';
 import {HsLayoutService} from 'hslayers-ng/components/layout/layout.service';
 import {HsPanelContainerService} from 'hslayers-ng/components/layout/panels/panel-container.service';
 import {HsSidebarService} from 'hslayers-ng/components/sidebar/sidebar.service';
@@ -10,25 +12,29 @@ import {AdjusterComponent} from './adjuster/adjuster.component';
 @Injectable({providedIn: 'root'})
 export class AppService {
   constructor(
+    public hsEventBus: HsEventBusService,
     public hsLanguageService: HsLanguageService,
+    public hsLayerManagerService: HsLayerManagerService,
     public hsLayoutService: HsLayoutService,
     public hsPanelContainerService: HsPanelContainerService,
     public hsSidebarService: HsSidebarService
   ) {
-    this.hsLanguageService.setLanguage('cs');
     this.init();
   }
 
   init(): void {
-    this.hsSidebarService.buttons.push({
-      panel: 'adjuster',
-      module: 'pra.adjuster',
-      order: 0,
-      title: 'Adjust factors',
-      description: 'Adjust factors for computation',
-      icon: 'icon-analytics-piechart',
+    this.hsEventBus.layoutLoads.subscribe(() => {
+      this.hsLanguageService.setLanguage('cs');
+      this.hsSidebarService.buttons.push({
+        panel: 'adjuster',
+        module: 'pra.adjuster',
+        order: 0,
+        title: 'Adjust factors',
+        description: 'Adjust factors for computation',
+        icon: 'icon-analytics-piechart',
+      });
+      this.hsPanelContainerService.create(AdjusterComponent, {});
+      this.hsLayoutService.setDefaultPanel('adjuster');
     });
-    this.hsPanelContainerService.create(AdjusterComponent, {});
-    this.hsLayoutService.setDefaultPanel('adjuster');
   }
 }