Internal refactoring of the map transition stuff

src/app/map/map.component.html

@@ -14,7 +14,7 @@
 </div>
 <div class="map" #deckGlMap>
 </div>
-<div *ngIf="showLoader">
+<div *ngIf="showLoader$ | async">
     <div class="loader">
     </div>
     <div class="tile">

src/app/map/map.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { MapService } from './map.service';
 import { Subject, takeUntil } from 'rxjs';
 import { DeckMetrics } from '@deck.gl/core/typed/lib/deck';
@@ -8,27 +8,26 @@ import { DeckMetrics } from '@deck.gl/core/typed/lib/deck';
   templateUrl: './map.component.html',
   styleUrl: './map.component.scss'
 })
-export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
+export class MapComponent implements AfterViewInit, OnDestroy {
   @ViewChild('deckGlMap', { static: false }) private mapDiv?: ElementRef<HTMLDivElement>;
 
-  showLoader: boolean = false;
   showMetrics: boolean = true;
   loadedTileId: string = '';
 
+  showLoader$ = new Subject<boolean>();
+
   readonly metrics$: Subject<DeckMetrics> = new Subject<DeckMetrics>();
 
   private readonly onUnsubscribe$: Subject<boolean> = new Subject<boolean>();
 
   constructor(private mapService: MapService) {
     this.metrics$.pipe(takeUntil(this.onUnsubscribe$));
-  }
-
-  ngOnInit(): void {
-    this.initAllSubscriptions();
+    this.mapService.loading$.pipe(takeUntil(this.onUnsubscribe$)).subscribe(tileId => this.showHideLoader(tileId));
+    this.showLoader$.pipe(takeUntil(this.onUnsubscribe$)).subscribe();
   }
 
   ngAfterViewInit() {
-    this.mapService.initDeckGlMap(this.mapDiv!, this.metrics$);
+    this.mapService.initDeckGlMap(this.mapDiv!, this.metrics$, this.showLoader$);
   }
 
   ngOnDestroy(): void {
@@ -37,15 +36,13 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private initAllSubscriptions() {
     // prettier-ignore
-    this.mapService.loading$
-        .pipe(takeUntil(this.onUnsubscribe$))
-        .subscribe(tileId => this.showHideLoader(tileId));
+
   }
 
   private showHideLoader(tileId: string) {
     this.loadedTileId = tileId;
-    this.showLoader = true;
-    setTimeout(() => (this.showLoader = false), 1000);
+    this.showLoader$.next(true);
+    setTimeout(() => this.showLoader$.next(false), 1000);
   }
 
   private unsubscribeAll() {

src/app/map/map.constants.ts

@@ -43,7 +43,7 @@ export const CAPITOLS_LAYER = new ScatterplotLayer({
   visible: true,
 
   getRadius: () => 2000,
-  getPosition: d => [d.coordinates[1], d.coordinates[0], 9000], // only explicit syntax works, altitude needed for pitch map representation
+  getPosition: d => [d.coordinates[1], d.coordinates[0]],
   getLineColor: () => [255, 214, 23, 255],
   getFillColor: () => [255, 214, 23, 50],
   getLineWidth: () => 3000

src/app/map/map.service.ts

@@ -27,10 +27,11 @@ export class MapService {
   private readonly euBordersLayer: Promise<GeoJsonLayer>;
   private readonly layers: Promise<Layer[]>;
 
-  private currentViewState: Record<string, number> = INITIAL_VIEW_STATE;
+  private currentViewState = INITIAL_VIEW_STATE;
 
   private theMap?: Deck;
   private myLocation?: GeolocationCoordinates;
+  private loadingIndicator$?: Subject<boolean>;
 
   constructor(
     private readonly http: HttpClient,
@@ -57,19 +58,20 @@ export class MapService {
   }
 
   async resetMapToEuropeanCenter() {
-    this.transitionMapAnimated(MAP_CENTER.longitude, MAP_CENTER.latitude, DEFAULT_ZOOM);
+    return this.transitionMapAnimated(MAP_CENTER.longitude, MAP_CENTER.latitude, DEFAULT_ZOOM);
   }
 
   async moveMapToMyLocation() {
-    // TODO refactor: find a more elegant solution
-    if (!this.myLocation) {
-      firstValueFrom(this.geoService.myCurrentLocation()).then(coordinates => {
-        this.myLocation = coordinates;
-        this.transitionMapAnimated(coordinates.longitude, coordinates.latitude, FLY_TO_ZOOM);
-      });
-    } else {
-      this.transitionMapAnimated(this.myLocation.longitude, this.myLocation.latitude, FLY_TO_ZOOM);
+    if (this.myLocation) {
+      return this.transitionMapAnimated(this.myLocation.longitude, this.myLocation.latitude, FLY_TO_ZOOM);
     }
+
+    this.loadingIndicator$?.next(true);
+
+    return firstValueFrom(this.geoService.myCurrentLocation()).then(coordinates => {
+      this.myLocation = coordinates;
+      this.transitionMapAnimated(coordinates.longitude, coordinates.latitude, FLY_TO_ZOOM);
+    });
   }
 
   async doShowEuBorders(value: boolean) {
@@ -82,7 +84,9 @@ export class MapService {
     this.changeLayerVisibility(LayerIndices.CAPITOLS_LAYER, value).then(() => this.log.trace('Show capitols', value));
   }
 
-  initDeckGlMap(mapDiv: ElementRef<HTMLDivElement>, metricsRef: Subject<DeckMetrics>) {
+  initDeckGlMap(mapDiv: ElementRef<HTMLDivElement>, metricsRef: Subject<DeckMetrics>, showLoader$: Subject<boolean>) {
+    this.loadingIndicator$ = showLoader$;
+
     this.layers.then(layers => {
       this.theMap = new Deck({
         parent: mapDiv.nativeElement,
@@ -110,15 +114,21 @@ export class MapService {
     });
   }
 
-  private transitionMapAnimated(longitude: number, latitude: number, zoom: number) {
-    this.currentViewState = Object.assign({}, this.currentViewState, {
-      longitude: longitude,
-      latitude: latitude,
-      zoom: zoom,
-      transitionInterpolator: new FlyToInterpolator(),
-      transitionDuration: DEFAULT_TRANSITION_DURATION_MS
+  private async transitionMapAnimated(longitude: number, latitude: number, zoom: number) {
+    return new Promise(() => {
+      this.loadingIndicator$?.next(true);
+
+      this.currentViewState = Object.assign({}, this.currentViewState, {
+        longitude: longitude,
+        latitude: latitude,
+        zoom: zoom,
+        transitionInterpolator: new FlyToInterpolator(),
+        transitionDuration: DEFAULT_TRANSITION_DURATION_MS
+      });
+
+      this.theMap!.setProps({ viewState: this.currentViewState });
+      this.loadingIndicator$?.next(true);
     });
-    this.theMap!.setProps({ viewState: this.currentViewState });
   }
 
   private async initMapLayer() {