Skip to content

Commit

Permalink
Move layer model from component to service
Browse files Browse the repository at this point in the history 
- Also made metrics object observable for async pipe
  • Loading branch information
@holgerstolzenberg
holgerstolzenberg committed Mar 6, 2024
1 parent 9b290a2 commit efb5ff4
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 90 deletions.
34 changes: 17 additions & 17 deletions src/app/map/map.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
63 changes: 19 additions & 44 deletions src/app/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();
Expand All @@ -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,
Expand All @@ -59,7 +59,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
},

_onMetrics: metrics => {
this.metrics = metrics;
this.metrics$!.next(metrics);
}
});
});
Expand All @@ -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
Expand All @@ -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);
Expand Down
72 changes: 43 additions & 29 deletions src/app/map/map.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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() {
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
}
}

0 comments on commit efb5ff4

Please sign in to comment.