Resolves #2087 - Do not allow overlapping layer on the same baselayer

IsraelHikingMap · Dec 25, 2024 · 09fa42d · 09fa42d
1 parent a990012
commit 09fa42d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 30 deletions.
diff --git a/IsraelHiking.Web/src/application/components/map/automatic-layer-presentation.component.ts b/IsraelHiking.Web/src/application/components/map/automatic-layer-presentation.component.ts
@@ -31,6 +31,7 @@ export class AutomaticLayerPresentationComponent implements OnInit, OnChanges, O
     public isBaselayer = input<boolean>();
     public layerData = input<EditableLayer>();
     public isMainMap = input<boolean>();
+    public isSameBaselayerOn = input<boolean>(false);
 
     private rasterSourceId: string;
     private rasterLayerId: string;
@@ -155,24 +156,25 @@ export class AutomaticLayerPresentationComponent implements OnInit, OnChanges, O
     }
 
     private updateSourcesAndLayers(layerData: LayerData, sources: {[_: string]: SourceSpecification}, layers: LayerSpecification[]) {
+        if (!this.visible()) {
+            return;
+        }
         let attributiuonUpdated = false;
         for (let sourceKey of Object.keys(sources)) {
-            if (Object.prototype.hasOwnProperty.call(sources, sourceKey) && this.visible()) {
-                const source = sources[sourceKey];
-                if (!this.isBaselayer()) {
-                    sourceKey = layerData.key + "_" + sourceKey;
-                }
-                if (source.type === "vector") {
-                    source.attribution = attributiuonUpdated === false ? AutomaticLayerPresentationComponent.ATTRIBUTION : "";
-                    attributiuonUpdated = true;
-                }
-
-                this.mapComponent.mapInstance.addSource(sourceKey, source);
-                this.jsonSourcesIds.push(sourceKey);
+            const source = sources[sourceKey];
+            if (!this.isBaselayer()) {
+                sourceKey = layerData.key + "_" + sourceKey;
             }
+            if (source.type === "vector") {
+                source.attribution = attributiuonUpdated === false ? AutomaticLayerPresentationComponent.ATTRIBUTION : "";
+                attributiuonUpdated = true;
+            }
+
+            this.mapComponent.mapInstance.addSource(sourceKey, source);
+            this.jsonSourcesIds.push(sourceKey);
         }
         for (const layer of layers) {
-            if (!this.visible() || (!this.isBaselayer() && layer.metadata && !(layer.metadata as any)["IHM:overlay"])) {
+            if (!this.isBaselayer() && layer.metadata && !(layer.metadata as any)["IHM:overlay"]) {
                 continue;
             }
             if (!this.isBaselayer()) {
@@ -226,7 +228,7 @@ export class AutomaticLayerPresentationComponent implements OnInit, OnChanges, O
             if (oldLayer != null) {
                 this.removeLayer(oldLayer);
             }
-            if (newLayer != null) {
+            if (newLayer != null && !this.isSameBaselayerOn()) {
                 await this.createLayer(newLayer);
             }
         });

diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.html b/IsraelHiking.Web/src/application/components/map/layers-view.component.html
@@ -9,7 +9,8 @@
                 [visible]="overlay.visible"
                 [before]="resources.endOfOverlays"
                 [isBaselayer]="false"
-                [isMainMap]="true">
+                [isMainMap]="true"
+                [isSameBaselayerOn]="isSameBaselayerOn(overlay)">
     </auto-layer>
 </div>
 <mgl-geojson-source #clusterSource

diff --git a/IsraelHiking.Web/src/application/components/map/layers-view.component.ts b/IsraelHiking.Web/src/application/components/map/layers-view.component.ts
@@ -172,4 +172,8 @@ export class LayersViewComponent implements OnInit {
         this.navigateHereService.addNavigationSegment(this.getSelectedFeatureLatlng());
         this.clearSelected();
     }
+
+    public isSameBaselayerOn(overlay: Overlay) {
+        return overlay.address === this.getBaseLayer()?.address;
+    }
 }
diff --git a/IsraelHiking.Web/src/application/services/layers.service.ts b/IsraelHiking.Web/src/application/services/layers.service.ts
@@ -6,12 +6,7 @@ import { Store } from "@ngxs/store";
 import type { Immutable } from "immer";
 
 import { ResourcesService } from "./resources.service";
-import { ToastService } from "./toast.service";
 import {
-    ISRAEL_HIKING_MAP,
-    ISRAEL_MTB_MAP,
-    HIKING_TRAILS,
-    BICYCLE_TRAILS,
     SPECIAL_BASELAYERS,
     SPECIAL_OVERLAYS
 } from "../reducers/initial-state";
@@ -56,7 +51,6 @@ export class LayersService {
 
     private readonly resources = inject(ResourcesService);
     private readonly httpClient = inject(HttpClient);
-    private readonly toastService = inject(ToastService);
     private readonly loggingService = inject(LoggingService);
     private readonly store = inject(Store);
 
@@ -288,7 +282,6 @@ export class LayersService {
     public selectBaseLayer(key: string) {
         this.loggingService.info(`[Layers] Selecting base layer ${key}`);
         this.store.dispatch(new SelectBaseLayerAction(key));
-        this.warnBaselayerOverlayOverlappingIfNeeded();
     }
 
     public toggleOverlay(overlay: Overlay) {
@@ -299,14 +292,6 @@ export class LayersService {
                 visible: newVisibility
             }
         ));
-        this.warnBaselayerOverlayOverlappingIfNeeded();
-    }
-
-    private warnBaselayerOverlayOverlappingIfNeeded() {
-        if ((this.overlays.find(o => o.key === HIKING_TRAILS).visible && this.selectedBaseLayerKey === ISRAEL_HIKING_MAP ||
-            this.overlays.find(o => o.key === BICYCLE_TRAILS).visible && this.selectedBaseLayerKey === ISRAEL_MTB_MAP)) {
-            this.toastService.warning(this.resources.baseLayerAndOverlayAreOverlapping);
-        }
     }
 
     public isAllOverlaysHidden() {