From 17d0a569870219767c4933be1d6e98037d67e22d Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Wed, 18 Dec 2024 13:00:54 +0100 Subject: [PATCH 1/4] feat(map-legend): add dynamic legend generation based on map context --- .../src/lib/map-view/map-view.component.html | 38 +++++++++++++++++++ .../src/lib/map-view/map-view.component.ts | 18 ++++++++- .../map-legend/map-legend.component.css | 3 ++ .../map-legend/map-legend.component.html | 1 + .../map-legend/map-legend.component.spec.ts | 21 ++++++++++ .../map-legend/map-legend.component.ts | 36 ++++++++++++++++++ package-lock.json | 6 +++ package.json | 1 + 8 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 libs/ui/map/src/lib/components/map-legend/map-legend.component.css create mode 100644 libs/ui/map/src/lib/components/map-legend/map-legend.component.html create mode 100644 libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts create mode 100644 libs/ui/map/src/lib/components/map-legend/map-legend.component.ts diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html index fb1da0662..09a42dd1d 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.html +++ b/libs/feature/record/src/lib/map-view/map-view.component.html @@ -31,8 +31,46 @@ > + + + + +
+
+
Legend
+ + + +
+ +
+ + + Legend + + diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts new file mode 100644 index 000000000..4e87823cb --- /dev/null +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { MapLegendComponent } from './map-legend.component' + +describe('MapLegendComponent', () => { + let component: MapLegendComponent + let fixture: ComponentFixture + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MapLegendComponent], + }) + fixture = TestBed.createComponent(MapLegendComponent) + component = fixture.componentInstance + fixture.detectChanges() + }) + + it('should create', () => { + expect(component).toBeTruthy() + }) +}) diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts new file mode 100644 index 000000000..11325d56d --- /dev/null +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts @@ -0,0 +1,36 @@ +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + ViewEncapsulation, +} from '@angular/core' +import { MapContext } from '@geospatial-sdk/core' +import { createLegendFromLayer } from '@geospatial-sdk/legend' +import { NgIf } from '@angular/common' + +@Component({ + selector: 'gn-ui-map-legend', + templateUrl: './map-legend.component.html', + standalone: true, + styleUrls: ['./map-legend.component.css'], + encapsulation: ViewEncapsulation.None, + imports: [NgIf], +}) +export class MapLegendComponent implements OnChanges { + @Input() context: MapContext | null + @Output() legendStatusChange = new EventEmitter() + legendHTML: HTMLElement | false + + async ngOnChanges(changes: SimpleChanges) { + if ('context' in changes && !changes['context'].isFirstChange()) { + const mapContectLayer = changes['context'].currentValue.layers[0] + console.log(mapContectLayer) + this.legendHTML = await createLegendFromLayer(mapContectLayer) + console.log(this.legendHTML) + this.legendStatusChange.emit(!!this.legendHTML) + } + } +} diff --git a/package-lock.json b/package-lock.json index 11cb74711..7bdfb5662 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc", "@geospatial-sdk/core": "0.0.5-dev.29", "@geospatial-sdk/geocoding": "0.0.5-dev.29", + "@geospatial-sdk/legend": "^0.0.5-dev.31", "@geospatial-sdk/openlayers": "0.0.5-dev.29", "@ltd/j-toml": "~1.35.2", "@messageformat/core": "^3.0.1", @@ -4510,6 +4511,11 @@ "resolved": "https://registry.npmjs.org/@geospatial-sdk/geocoding/-/geocoding-0.0.5-dev.29.tgz", "integrity": "sha512-WcxV6Ys6xN7AFLm4UOXkFspj/osCZ2f/OP3LiC63W/0MdwiAg3ajRldVX5pfDyPx2GTKv0ZYcxuFzi8P7ZLFaw==" }, + "node_modules/@geospatial-sdk/legend": { + "version": "0.0.5-dev.31", + "resolved": "https://registry.npmjs.org/@geospatial-sdk/legend/-/legend-0.0.5-dev.31.tgz", + "integrity": "sha512-pxy1bm6KSqkIH1KVSrBBz9fxxhzmv246bKQQDFXfkPmVaaRnNlpytq3QMQoTUb8XiOFP2p7gWR909wfmHfsNDQ==" + }, "node_modules/@geospatial-sdk/openlayers": { "version": "0.0.5-dev.29", "resolved": "https://registry.npmjs.org/@geospatial-sdk/openlayers/-/openlayers-0.0.5-dev.29.tgz", diff --git a/package.json b/package.json index ac758e4e4..be596d67a 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc", "@geospatial-sdk/core": "0.0.5-dev.29", "@geospatial-sdk/geocoding": "0.0.5-dev.29", + "@geospatial-sdk/legend": "^0.0.5-dev.31", "@geospatial-sdk/openlayers": "0.0.5-dev.29", "@ltd/j-toml": "~1.35.2", "@messageformat/core": "^3.0.1", From 24edd1503467d0093fbe82592a5703cfbe642f87 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Wed, 18 Dec 2024 14:23:12 +0100 Subject: [PATCH 2/4] Added tests --- .../src/e2e/datasetDetailPage.cy.ts | 4 +- .../lib/map-view/map-view.component.spec.ts | 22 ++- .../src/lib/map-view/map-view.component.ts | 9 +- libs/ui/map/src/index.ts | 1 + .../map-legend/map-legend.component.spec.ts | 137 +++++++++++++++++- 5 files changed, 164 insertions(+), 9 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 088b06fb4..4db6144c2 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -331,10 +331,12 @@ describe('dataset pages', () => { .children('button') .should('have.length.gt', 1) }) - it('should display the map', () => { + it('should display the map and the legend', () => { cy.get('@previewSection') .find('gn-ui-map-container') .should('be.visible') + + cy.get('@previewSection').find('gn-ui-map-legend').should('be.visible') }) it('should display the table', () => { cy.get('@previewSection') diff --git a/libs/feature/record/src/lib/map-view/map-view.component.spec.ts b/libs/feature/record/src/lib/map-view/map-view.component.spec.ts index 16ac47728..fe2257acf 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.spec.ts +++ b/libs/feature/record/src/lib/map-view/map-view.component.spec.ts @@ -22,6 +22,7 @@ import * as geoSdkCore from '@geospatial-sdk/core' import { MapContext } from '@geospatial-sdk/core' import { MapContainerComponent, + MapLegendComponent, prioritizePageScroll, } from '@geonetwork-ui/ui/map' import { MockBuilder } from 'ng-mocks' @@ -161,7 +162,7 @@ describe('MapViewComponent', () => { useClass: DataServiceMock, }, ], - imports: [TranslateModule.forRoot()], + imports: [TranslateModule.forRoot(), MapLegendComponent], }).compileComponents() mdViewFacade = TestBed.inject(MdViewFacade) }) @@ -768,6 +769,25 @@ describe('MapViewComponent', () => { }) }) + describe('display legend', () => { + it('should render the MapLegendComponent', () => { + const legendComponent = fixture.debugElement.query( + By.directive(MapLegendComponent) + ) + expect(legendComponent).toBeTruthy() + }) + it('should handle legendStatusChange event', () => { + const legendComponent = fixture.debugElement.query( + By.directive(MapLegendComponent) + ).componentInstance + const legendStatusChangeSpy = jest.spyOn( + component, + 'onLegendStatusChange' + ) + legendComponent.legendStatusChange.emit(true) + expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) + }) + }) describe('map view extent', () => { describe('if no record extent', () => { beforeEach(fakeAsync(() => { diff --git a/libs/feature/record/src/lib/map-view/map-view.component.ts b/libs/feature/record/src/lib/map-view/map-view.component.ts index 2ea87e968..adda44657 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.ts +++ b/libs/feature/record/src/lib/map-view/map-view.component.ts @@ -37,19 +37,22 @@ import { FeatureDetailComponent, MapContainerComponent, prioritizePageScroll, + MapLegendComponent, } from '@geonetwork-ui/ui/map' import { Feature } from 'geojson' import { NgIconComponent, provideIcons } from '@ng-icons/core' import { matClose } from '@ng-icons/material-icons/baseline' import { CommonModule } from '@angular/common' -import { ButtonComponent, DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs' +import { + ButtonComponent, + DropdownSelectorComponent, +} from '@geonetwork-ui/ui/inputs' import { TranslateModule } from '@ngx-translate/core' import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component' import { LoadingMaskComponent, PopupAlertComponent, } from '@geonetwork-ui/ui/widgets' -import { MapLegendComponent } from '../../../../../ui/map/src/lib/components/map-legend/map-legend.component' @Component({ selector: 'gn-ui-map-view', @@ -67,8 +70,8 @@ import { MapLegendComponent } from '../../../../../ui/map/src/lib/components/map LoadingMaskComponent, NgIconComponent, ExternalViewerButtonComponent, - MapLegendComponent, ButtonComponent, + MapLegendComponent, ], viewProviders: [provideIcons({ matClose })], }) diff --git a/libs/ui/map/src/index.ts b/libs/ui/map/src/index.ts index fb10d8a26..921923dda 100644 --- a/libs/ui/map/src/index.ts +++ b/libs/ui/map/src/index.ts @@ -1,4 +1,5 @@ export * from './lib/components/map-container/map-container.component' export * from './lib/components/map-container/map-settings.token' export * from './lib/components/feature-detail/feature-detail.component' +export * from './lib/components/map-legend/map-legend.component' export * from './lib/map-utils' diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts index 4e87823cb..97c17edf5 100644 --- a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts @@ -1,15 +1,23 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' - import { MapLegendComponent } from './map-legend.component' +import { MapContext } from '@geospatial-sdk/core' +import { createLegendFromLayer } from '@geospatial-sdk/legend' + +jest.mock('@geospatial-sdk/legend', () => ({ + createLegendFromLayer: jest.fn(), +})) describe('MapLegendComponent', () => { let component: MapLegendComponent let fixture: ComponentFixture + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MapLegendComponent], + }).compileComponents() + }) + beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [MapLegendComponent], - }) fixture = TestBed.createComponent(MapLegendComponent) component = fixture.componentInstance fixture.detectChanges() @@ -18,4 +26,125 @@ describe('MapLegendComponent', () => { it('should create', () => { expect(component).toBeTruthy() }) + + describe('Change of map-context', () => { + it('should not create legend on first change', async () => { + const mockContext: MapContext = { + layers: [ + { + id: 'test-layer', + }, + ], + } as MapContext + + const mockLegendElement = document.createElement('div') + ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) + + const legendStatusChangeSpy = jest.spyOn( + component.legendStatusChange, + 'emit' + ) + + await component.ngOnChanges({ + context: { + currentValue: mockContext, + previousValue: null, + firstChange: true, + isFirstChange: () => true, + }, + }) + + expect(createLegendFromLayer).not.toHaveBeenCalled() + expect(legendStatusChangeSpy).not.toHaveBeenCalled() + }) + + it('should create legend and emit status on subsequent context changes', async () => { + const mockContext: MapContext = { + layers: [ + { + id: 'test-layer', + }, + ], + } as MapContext + + const mockLegendElement = document.createElement('div') + ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) + + const legendStatusChangeSpy = jest.spyOn( + component.legendStatusChange, + 'emit' + ) + + await component.ngOnChanges({ + context: { + currentValue: mockContext, + previousValue: {}, + firstChange: false, + isFirstChange: () => false, + }, + }) + + expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) + expect(component.legendHTML).toBe(mockLegendElement) + expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) + }) + + it('should emit false when no legend is created', async () => { + const mockContext: MapContext = { + layers: [ + { + // mock layer properties + id: 'test-layer', + }, + ], + } as MapContext + + ;(createLegendFromLayer as jest.Mock).mockResolvedValue(false) + + const legendStatusChangeSpy = jest.spyOn( + component.legendStatusChange, + 'emit' + ) + + await component.ngOnChanges({ + context: { + currentValue: mockContext, + previousValue: {}, + firstChange: false, + isFirstChange: () => false, + }, + }) + + expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) + expect(component.legendHTML).toBe(false) + expect(legendStatusChangeSpy).toHaveBeenCalledWith(false) + }) + + it('should handle multiple layers', async () => { + const mockContext: MapContext = { + layers: [{ id: 'layer-1' }, { id: 'layer-2' }], + } as MapContext + + const mockLegendElement = document.createElement('div') + ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) + + const legendStatusChangeSpy = jest.spyOn( + component.legendStatusChange, + 'emit' + ) + + await component.ngOnChanges({ + context: { + currentValue: mockContext, + previousValue: {}, + firstChange: false, + isFirstChange: () => false, + }, + }) + + expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) + expect(component.legendHTML).toBe(mockLegendElement) + expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) + }) + }) }) From 40f40204695bf58a9f02d5ea3f84d13ab8b06e06 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Thu, 19 Dec 2024 11:44:51 +0100 Subject: [PATCH 3/4] Fix PR comments --- .../src/lib/map-view/map-view.component.html | 28 +++++++++++-------- .../map-legend/map-legend.component.css | 2 ++ .../map-legend/map-legend.component.spec.ts | 12 ++++---- .../map-legend/map-legend.component.ts | 15 ++++++---- package-lock.json | 16 +++++------ package.json | 4 +-- 6 files changed, 43 insertions(+), 34 deletions(-) diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html index 09a42dd1d..e85b3dee3 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.html +++ b/libs/feature/record/src/lib/map-view/map-view.component.html @@ -25,16 +25,15 @@ class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56" [class.hidden]="!selection" > - @@ -49,9 +48,14 @@
Legend
@@ -64,9 +68,9 @@ Legend diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.css b/libs/ui/map/src/lib/components/map-legend/map-legend.component.css index f55c49032..91a65cd49 100644 --- a/libs/ui/map/src/lib/components/map-legend/map-legend.component.css +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.css @@ -1,3 +1,5 @@ .geosdk--legend-container { overflow: auto; + white-space: normal; + word-wrap: break-word; } diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts index 97c17edf5..1c4cd1f51 100644 --- a/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts @@ -28,7 +28,7 @@ describe('MapLegendComponent', () => { }) describe('Change of map-context', () => { - it('should not create legend on first change', async () => { + it('should create legend on first change', async () => { const mockContext: MapContext = { layers: [ { @@ -54,8 +54,9 @@ describe('MapLegendComponent', () => { }, }) - expect(createLegendFromLayer).not.toHaveBeenCalled() - expect(legendStatusChangeSpy).not.toHaveBeenCalled() + expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) + expect(component.legendHTML).toBe(mockLegendElement) + expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) }) it('should create legend and emit status on subsequent context changes', async () => { @@ -89,11 +90,10 @@ describe('MapLegendComponent', () => { expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) }) - it('should emit false when no legend is created', async () => { + it('should emit nothing when no legend is created', async () => { const mockContext: MapContext = { layers: [ { - // mock layer properties id: 'test-layer', }, ], @@ -117,7 +117,7 @@ describe('MapLegendComponent', () => { expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) expect(component.legendHTML).toBe(false) - expect(legendStatusChangeSpy).toHaveBeenCalledWith(false) + expect(legendStatusChangeSpy).not.toHaveBeenCalled() }) it('should handle multiple layers', async () => { diff --git a/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts index 11325d56d..7f635f10e 100644 --- a/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts +++ b/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts @@ -25,12 +25,15 @@ export class MapLegendComponent implements OnChanges { legendHTML: HTMLElement | false async ngOnChanges(changes: SimpleChanges) { - if ('context' in changes && !changes['context'].isFirstChange()) { - const mapContectLayer = changes['context'].currentValue.layers[0] - console.log(mapContectLayer) - this.legendHTML = await createLegendFromLayer(mapContectLayer) - console.log(this.legendHTML) - this.legendStatusChange.emit(!!this.legendHTML) + if ('context' in changes) { + const mapContext = changes['context'].currentValue + if (mapContext.layers && mapContext.layers.length > 0) { + const mapContextLayer = mapContext.layers[0] + this.legendHTML = await createLegendFromLayer(mapContextLayer) + if (this.legendHTML) { + this.legendStatusChange.emit(true) + } + } } } } diff --git a/package-lock.json b/package-lock.json index 7bdfb5662..3bfd48281 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,8 +24,8 @@ "@bartholomej/ngx-translate-extract": "^8.0.2", "@biesbjerg/ngx-translate-extract-marker": "^1.0.0", "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc", - "@geospatial-sdk/core": "0.0.5-dev.29", - "@geospatial-sdk/geocoding": "0.0.5-dev.29", + "@geospatial-sdk/core": "0.0.5-dev.31", + "@geospatial-sdk/geocoding": "0.0.5-dev.31", "@geospatial-sdk/legend": "^0.0.5-dev.31", "@geospatial-sdk/openlayers": "0.0.5-dev.29", "@ltd/j-toml": "~1.35.2", @@ -4499,17 +4499,17 @@ } }, "node_modules/@geospatial-sdk/core": { - "version": "0.0.5-dev.29", - "resolved": "https://registry.npmjs.org/@geospatial-sdk/core/-/core-0.0.5-dev.29.tgz", - "integrity": "sha512-urGQ0glk8fTqK4SkdKpuAGGh4TlFbjm+uW7FmyZ47HEvAOTcE0kvZPOsg/LtNY2VovyXVrnyavdOlUt9Rvqgcg==", + "version": "0.0.5-dev.31", + "resolved": "https://registry.npmjs.org/@geospatial-sdk/core/-/core-0.0.5-dev.31.tgz", + "integrity": "sha512-A3U7GuGgyhFnSneqpqXh80lwNJwQT8lLYBdlvKZnLo9usldI0BSSRFQo+iKgkJ1NxWMTdfpcIbefAVpDdILuqw==", "dependencies": { "proj4": "^2.9.2" } }, "node_modules/@geospatial-sdk/geocoding": { - "version": "0.0.5-dev.29", - "resolved": "https://registry.npmjs.org/@geospatial-sdk/geocoding/-/geocoding-0.0.5-dev.29.tgz", - "integrity": "sha512-WcxV6Ys6xN7AFLm4UOXkFspj/osCZ2f/OP3LiC63W/0MdwiAg3ajRldVX5pfDyPx2GTKv0ZYcxuFzi8P7ZLFaw==" + "version": "0.0.5-dev.31", + "resolved": "https://registry.npmjs.org/@geospatial-sdk/geocoding/-/geocoding-0.0.5-dev.31.tgz", + "integrity": "sha512-z6Hkb+fktKmyymDt7yS7xpCptjehZJR+BHzn0mNuawuAP2vW4+jRBj78+/jkdEvi4jKBLM+PXs3Tg1WoP2isbQ==" }, "node_modules/@geospatial-sdk/legend": { "version": "0.0.5-dev.31", diff --git a/package.json b/package.json index be596d67a..e3ea18c7d 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,8 @@ "@bartholomej/ngx-translate-extract": "^8.0.2", "@biesbjerg/ngx-translate-extract-marker": "^1.0.0", "@camptocamp/ogc-client": "1.1.1-dev.3e2d3cc", - "@geospatial-sdk/core": "0.0.5-dev.29", - "@geospatial-sdk/geocoding": "0.0.5-dev.29", + "@geospatial-sdk/core": "0.0.5-dev.31", + "@geospatial-sdk/geocoding": "0.0.5-dev.31", "@geospatial-sdk/legend": "^0.0.5-dev.31", "@geospatial-sdk/openlayers": "0.0.5-dev.29", "@ltd/j-toml": "~1.35.2", From 692832e0a020e1071bf35088438d05a0512a0748 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Thu, 19 Dec 2024 17:44:47 +0100 Subject: [PATCH 4/4] fix: add shareReplay to prevent unnecessary extent computations --- libs/feature/record/src/lib/map-view/map-view.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/feature/record/src/lib/map-view/map-view.component.ts b/libs/feature/record/src/lib/map-view/map-view.component.ts index adda44657..bc7dfc2a4 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.ts +++ b/libs/feature/record/src/lib/map-view/map-view.component.ts @@ -22,6 +22,7 @@ import { distinctUntilChanged, finalize, map, + shareReplay, switchMap, tap, } from 'rxjs/operators' @@ -167,7 +168,8 @@ export class MapViewComponent implements AfterViewInit { ...context, view, } - }) + }), + shareReplay(1) ) constructor(