diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index 1b6e569..c2975fd 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -1,23 +1,23 @@
 <div class="metrics" *ngIf="showMetrics">
-  <div>
-    <span class="label">FPS</span><span>{{ metrics?.fps | number: '1.0-3' }}</span>
-  </div>
-  <div>
-    <span class="label">CPU time</span><span>{{ metrics?.cpuTime | number: '1.0-3' }}</span>
-  </div>
-  <div>
-    <span class="label">GPU time</span><span>{{ metrics?.gpuTime | number: '1.0-3' }}</span>
-  </div>
-  <div>
-    <span class="label">GPU memory</span><span>{{ metrics?.gpuMemory }}</span>
-  </div>
+    <div>
+        <span class="label">FPS</span><span>{{ (metrics$ | async)?.fps | number: '1.0-3' }}</span>
+    </div>
+    <div>
+        <span class="label">CPU time</span><span>{{ (metrics$ | async)?.cpuTime | number: '1.0-3' }}</span>
+    </div>
+    <div>
+        <span class="label">GPU time</span><span>{{ (metrics$ | async)?.gpuTime | number: '1.0-3' }}</span>
+    </div>
+    <div>
+        <span class="label">GPU memory</span><span>{{ (metrics$ | async)?.gpuMemory }}</span>
+    </div>
 </div>
 <div class="map" #deckGlMap>
 </div>
 <div *ngIf="showLoader">
-  <div class="loader">
-  </div>
-  <div class="tile">
-    T: {{ loadedTileId }}
-  </div>
+    <div class="loader">
+    </div>
+    <div class="tile">
+        T: {{ loadedTileId }}
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 939d116..904e033 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -3,7 +3,7 @@ import { MapService } from './map.service';
 import { NGXLogger } from 'ngx-logger';
 import { Subject, takeUntil } from 'rxjs';
 import { NotificationService } from '../notifications/notification.service';
-import { Deck, Layer } from '@deck.gl/core/typed';
+import { Deck } from '@deck.gl/core/typed';
 import { INITIAL_VIEW_STATE, LayerIndices } from './map.constants';
 import { DeckMetrics } from '@deck.gl/core/typed/lib/deck';
 
@@ -13,27 +13,22 @@ import { DeckMetrics } from '@deck.gl/core/typed/lib/deck';
   styleUrl: './map.component.scss'
 })
 export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
-  layers: Promise<Layer[]>;
-
   showLoader: boolean = false;
   showMetrics: boolean = true;
   loadedTileId: string = '';
 
-  metrics?: DeckMetrics;
+  readonly metrics$?: Subject<DeckMetrics> = new Subject<DeckMetrics>();
 
-  private onUnsubscribe$: Subject<boolean> = new Subject<boolean>();
+  private readonly onUnsubscribe$: Subject<boolean> = new Subject<boolean>();
 
   @ViewChild('deckGlMap', { static: false }) private mapDiv?: ElementRef<HTMLDivElement>;
-
   private map?: Deck;
 
   constructor(
     private log: NGXLogger,
     private mapService: MapService,
     private notificationService: NotificationService
-  ) {
-    this.layers = this.loadAllLayers();
-  }
+  ) {}
 
   ngOnInit(): void {
     this.initAllSubscriptions();
@@ -43,10 +38,15 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
     this.initDeckGlMap();
   }
 
-  private initDeckGlMap() {
-    this.layers.then(layers => {
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+    this.disposeMap();
+  }
+
+  initDeckGlMap() {
+    this.mapService.getLayers().then(layers => {
       this.map = new Deck({
-        parent: this.mapDiv?.nativeElement,
+        parent: this.mapDiv!.nativeElement,
         initialViewState: INITIAL_VIEW_STATE,
         style: { position: 'relative', top: '0', bottom: '0' },
         controller: true,
@@ -59,7 +59,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
         },
 
         _onMetrics: metrics => {
-          this.metrics = metrics;
+          this.metrics$!.next(metrics);
         }
       });
     });
@@ -81,41 +81,28 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
       this.notificationService.showWarn('Not implemented yet');
     });
 
-    // TODO deck.gl: maybe can be moved to service class
     this.mapService.showEuBorders$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(value => {
-      this.layers.then(layer => {
-        this.changeLayerVisibility(layer, LayerIndices.EU_LAYER_INDEX, value);
-      });
+      this.mapService.changeLayerVisibility(this.map!, LayerIndices.EU_LAYER_INDEX, value);
     });
 
-    // TODO deck.gl: maybe can be moved to service class
     this.mapService.showCapitols$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(value => {
-      this.layers.then(layers => {
-        this.changeLayerVisibility(layers, LayerIndices.CAPITOLS_LAYER_INDEX, value);
-      });
+      this.mapService.changeLayerVisibility(this.map!, LayerIndices.CAPITOLS_LAYER_INDEX, value);
     });
   }
 
-  private changeLayerVisibility(layers: Layer[], layerIndex: number, value: boolean) {
-    const clonedLayers = layers.slice();
-    clonedLayers[layerIndex] = layers[layerIndex].clone({ visible: value });
-    this.map!.setProps({ layers: clonedLayers });
-  }
-
   private showHideLoader(tileId: string) {
     this.loadedTileId = tileId;
     this.showLoader = true;
     setTimeout(() => (this.showLoader = false), 500);
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribeAll();
-    this.disposeMap();
-  }
-
   private unsubscribeAll() {
     this.onUnsubscribe$.next(true);
     this.onUnsubscribe$.complete();
+    this.onUnsubscribe$!.unsubscribe();
+
+    this.metrics$!.complete();
+    this.metrics$!.unsubscribe();
   }
 
   // TODO deck.gl: dispose deck map
@@ -131,18 +118,6 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   //   this.theZoom = map.getZoom();
   // }
 
-  private async loadAllLayers() {
-    return this.mapService.loadAllLayers().then(([mapLayer, euBorderLayer, capitolsLayer]) => {
-      const layers = new Array<Layer>(2);
-      layers[LayerIndices.MAP_LAYER_INDEX] = mapLayer;
-      layers[LayerIndices.EU_LAYER_INDEX] = euBorderLayer;
-      layers[LayerIndices.CAPITOLS_LAYER_INDEX] = capitolsLayer;
-
-      this.log.debug('Layers loaded', layers);
-      return layers;
-    });
-  }
-
   // TODO deck.gl: implement method
   // resetMap() {
   //   this.theMap!.flyTo(centerOfEurope, defaultZoom);
diff --git a/src/app/map/map.service.ts b/src/app/map/map.service.ts
index b8783aa..659b50f 100644
--- a/src/app/map/map.service.ts
+++ b/src/app/map/map.service.ts
@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { NGXLogger } from 'ngx-logger';
 import { CAPITOLS_LAYER, CENTER_OF_EUROPE } from './map.constants';
 import { NotificationService } from '../notifications/notification.service';
-import { Layer } from '@deck.gl/core/typed';
+import { Deck, Layer } from '@deck.gl/core/typed';
 import { BitmapLayer, GeoJsonLayer } from '@deck.gl/layers/typed';
 import { firstValueFrom } from 'rxjs';
 import { TileLayer } from '@deck.gl/geo-layers/typed';
@@ -19,6 +19,7 @@ export class MapService {
 
   private readonly mapLayer: Promise<TileLayer>;
   private readonly euBordersLayer: Promise<GeoJsonLayer>;
+  private readonly layers: Promise<Layer[]>;
 
   constructor(
     private readonly http: HttpClient,
@@ -27,6 +28,43 @@ export class MapService {
   ) {
     this.mapLayer = this.initMapLayer();
     this.euBordersLayer = this.initEuBordersLayer();
+    this.layers = this.loadAllLayers();
+  }
+
+  getLayers() {
+    return this.layers;
+  }
+
+  async loadAllLayers(): Promise<Layer[]> {
+    return Promise.all([this.getMapLayer(), this.getEuBordersLayer(), this.getCapitolsLayer()]);
+  }
+
+  changeLayerVisibility(map: Deck, layerIndex: number, value: boolean) {
+    this.layers.then(layers => {
+      const clonedLayers = layers.slice();
+      clonedLayers[layerIndex] = layers[layerIndex].clone({ visible: value });
+      map.setProps({ layers: clonedLayers });
+    });
+  }
+
+  async resetMapToEuropeanCenter() {
+    this.log.debug('Reset map');
+    this.resetMap$.emit();
+  }
+
+  async moveMapToMyLocation() {
+    this.log.debug('Move map to my location');
+    this.toMyLocation$.emit();
+  }
+
+  async doShowEuBorders(value: boolean) {
+    this.log.trace('Show EU borders', value);
+    this.showEuBorders$.emit(value);
+  }
+
+  async doShowCapitols(value: boolean) {
+    this.log.trace('Show capitols', value);
+    this.showCapitols$.emit(value);
   }
 
   private async initMapLayer() {
@@ -84,12 +122,13 @@ export class MapService {
   }
 
   // TODO deck.gl: do not forget this method
-  getCenterOfEurope() {
+  private async getCenterOfEurope() {
     return CENTER_OF_EUROPE;
   }
 
-  async loadAllLayers(): Promise<Layer[]> {
-    return Promise.all([this.getMapLayer(), this.getEuBordersLayer(), this.getCapitolsLayer()]);
+  // TODO feature: load capitols via HTTP and add population
+  private async getCapitolsLayer() {
+    return CAPITOLS_LAYER;
   }
 
   private getMapLayer() {
@@ -99,29 +138,4 @@ export class MapService {
   private async getEuBordersLayer() {
     return this.euBordersLayer;
   }
-
-  // TODO feature: load capitols via HTTP and add population
-  private async getCapitolsLayer() {
-    return CAPITOLS_LAYER;
-  }
-
-  async resetMapToEuropeanCenter() {
-    this.log.debug('Reset map');
-    this.resetMap$.emit();
-  }
-
-  async moveMapToMyLocation() {
-    this.log.debug('Move map to my location');
-    this.toMyLocation$.emit();
-  }
-
-  async doShowEuBorders(value: boolean) {
-    this.log.trace('Show EU borders', value);
-    this.showEuBorders$.emit(value);
-  }
-
-  async doShowCapitols(value: boolean) {
-    this.log.trace('Show capitols', value);
-    this.showCapitols$.emit(value);
-  }
 }