From 10fbed02f1a616d072f25e4abd86e7e977a18d66 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 20 Nov 2023 08:51:34 +0100
Subject: [PATCH 01/60] WIP: Show unavailable layers in TOC UI (#6)

---
 src/packages/map/api/layers/base.ts     |  5 +++
 src/packages/map/model/AbstractLayer.ts | 32 +++++++++++++++---
 src/packages/toc/LayerList.tsx          | 43 ++++++++++++++++++++++++-
 3 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index f899340b4..261c019f7 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -139,6 +139,11 @@ export interface LayerConfig extends LayerBaseConfig {
      * Defaults to `false`.
      */
     isBaseLayer?: boolean;
+
+    /**
+     * An optional URL to check the availability of the layer.
+     */
+    readonly healthCheckURL?: string;
 }
 
 /**
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index b97fe7a90..10a13c538 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -23,6 +23,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 {
     #olLayer: OlBaseLayer;
     #isBaseLayer: boolean;
+    #healthCheckURL?: string;
     #visible: boolean;
 
     #loadState: LayerLoadState;
@@ -32,10 +33,11 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
         super(config);
         this.#olLayer = config.olLayer;
         this.#isBaseLayer = config.isBaseLayer ?? false;
+        this.#healthCheckURL = config.healthCheckURL;
         this.#visible = config.visible ?? true;
 
         const { initial: initialState, resource: stateWatchResource } = watchLoadState(
-            this.#olLayer,
+            config,
             (state) => {
                 this.#loadState = state;
                 this.__emitChangeEvent("changed:loadState");
@@ -104,10 +106,24 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
     }
 }
 
+// TODO move to a service?
+function healthCheck(config: SimpleLayerConfig): LayerLoadState {
+    return (Math.random() < 0.5) ? "loaded" : "error"; // TODO random error for tests
+
+    if (config.healthCheckURL) {
+        // TODO test request to URL in healthCheckURL
+        return "error";
+    } else {
+        return "loaded";
+    }
+}
+
 function watchLoadState(
-    olLayer: OlBaseLayer,
+    config: SimpleLayerConfig,
     onChange: (newState: LayerLoadState) => void
 ): { initial: LayerLoadState; resource: Resource } {
+    const olLayer = config.olLayer;
+
     if (!(olLayer instanceof OlLayer)) {
         // Some layers don't have a source (such as group)
         return {
@@ -121,9 +137,17 @@ function watchLoadState(
     }
 
     let currentSource = olLayer?.getSource() as Source | null;
-    let currentLoadState = mapState(currentSource?.getState());
+    const currentOlLayerState = mapState(currentSource?.getState());
+    const currentHealthState = healthCheck(config);
+    let currentLoadState: LayerLoadState = (currentOlLayerState === "error" || currentHealthState === "error")
+        ? "error" : currentOlLayerState;
+
     const updateState = () => {
-        const nextLoadState = mapState(currentSource?.getState());
+        const olLayerState = mapState(currentSource?.getState());
+        const healthState = healthCheck(config);
+        const nextLoadState: LayerLoadState = (olLayerState === "error" || healthState === "error")
+            ? "error" : olLayerState;
+
         if (currentLoadState !== nextLoadState) {
             currentLoadState = nextLoadState;
             onChange(currentLoadState);
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 26b4735fc..5d80fabe9 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -15,6 +15,7 @@ import {
     PopoverHeader,
     PopoverTrigger,
     Portal,
+    Spacer,
     Text
 } from "@open-pioneer/chakra-integration";
 import { LayerBase, MapModel, Sublayer } from "@open-pioneer/map";
@@ -22,7 +23,7 @@ import { PackageIntl } from "@open-pioneer/runtime";
 import classNames from "classnames";
 import { useIntl } from "open-pioneer:react-hooks";
 import { useCallback, useRef, useSyncExternalStore } from "react";
-import { FiMoreVertical } from "react-icons/fi";
+import { FiAlertTriangle, FiMoreVertical } from "react-icons/fi";
 
 /**
  * Lists the (top level) operational layers in the map.
@@ -71,6 +72,7 @@ function LayerItem(props: { layer: LayerBase; intl: PackageIntl }): JSX.Element
     const title = useTitle(layer);
     const { isVisible, setVisible } = useVisibility(layer);
     const sublayers = useSublayers(layer);
+    const isAvailable = useLoadState(layer) !== "error";
 
     let nestedChildren;
     if (sublayers?.length) {
@@ -92,10 +94,17 @@ function LayerItem(props: { layer: LayerBase; intl: PackageIntl }): JSX.Element
             >
                 <Checkbox
                     isChecked={isVisible}
+                    isDisabled={!isAvailable}
                     onChange={(event) => setVisible(event.target.checked)}
                 >
                     {title}
                 </Checkbox>
+                {!isAvailable && (
+                    // TODO Tooltip?
+                    // TODO Aria Label
+                    <FiAlertTriangle color={"red"} aria-label={"Layer nicht verfügbar"} />
+                )}
+                <Spacer></Spacer>
                 {layer.description && (
                     <LayerItemDescriptor layer={layer} title={title} intl={intl} />
                 )}
@@ -113,11 +122,13 @@ function LayerItemDescriptor(props: {
     const { layer, title, intl } = props;
     const buttonLabel = intl.formatMessage({ id: "descriptionLabel" });
     const description = useLayerDescription(layer);
+    const isAvailable = useLoadState(layer) !== "error";
 
     return (
         <Popover>
             <PopoverTrigger>
                 <Button
+                    isDisabled={!isAvailable}
                     className="toc-layer-item-details-button"
                     aria-label={buttonLabel}
                     borderRadius="full"
@@ -231,6 +242,36 @@ function useSublayers(layer: LayerBase): Sublayer[] | undefined {
     return useCachedExternalStore(subscribe, getValue);
 }
 
+/** Returns the layers current state. */
+function useLoadState(layer: LayerBase): string {
+    // TODO also necessary to update sublayers
+    const subscribe = useCallback(
+        (cb: () => void) => {
+            const resource = layer.on("changed:loadState", cb);
+            return () => resource.destroy();
+        },
+        [layer]
+    );
+
+    const getSnapshot = useCallback(
+        () => {
+            // for sublayers, use the state of the parent
+            let operationalLayer: Layer;
+            if ("loadState" in layer) {
+                operationalLayer = layer as Layer;
+            } else {
+                const sl = layer as Sublayer;
+                operationalLayer = sl.parentLayer;
+            }
+            
+            return operationalLayer.loadState;
+        },
+        [layer]
+    );
+
+    return useSyncExternalStore(subscribe, getSnapshot);
+}
+
 /**
  * This hooks wraps an external store that does not cache its own values, i.e.
  * it may return a different value each time from `getValue()`.

From 6207de67adf153d3571463d13566f1362065881d Mon Sep 17 00:00:00 2001
From: Antonia van Eek <a.vaneek@conterra.de>
Date: Tue, 21 Nov 2023 12:27:32 +0100
Subject: [PATCH 02/60] prettier and add sample in app

---
 src/packages/map/model/AbstractLayer.ts       | 12 +++++----
 src/packages/toc/LayerList.tsx                | 27 +++++++++----------
 .../ol-app/MapConfigProviderImpl.ts           |  2 ++
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 10a13c538..edc797600 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -108,7 +108,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 
 // TODO move to a service?
 function healthCheck(config: SimpleLayerConfig): LayerLoadState {
-    return (Math.random() < 0.5) ? "loaded" : "error"; // TODO random error for tests
+    return Math.random() < 0.5 ? "loaded" : "error"; // TODO random error for tests
 
     if (config.healthCheckURL) {
         // TODO test request to URL in healthCheckURL
@@ -139,14 +139,16 @@ function watchLoadState(
     let currentSource = olLayer?.getSource() as Source | null;
     const currentOlLayerState = mapState(currentSource?.getState());
     const currentHealthState = healthCheck(config);
-    let currentLoadState: LayerLoadState = (currentOlLayerState === "error" || currentHealthState === "error")
-        ? "error" : currentOlLayerState;
+    let currentLoadState: LayerLoadState =
+        currentOlLayerState === "error" || currentHealthState === "error"
+            ? "error"
+            : currentOlLayerState;
 
     const updateState = () => {
         const olLayerState = mapState(currentSource?.getState());
         const healthState = healthCheck(config);
-        const nextLoadState: LayerLoadState = (olLayerState === "error" || healthState === "error")
-            ? "error" : olLayerState;
+        const nextLoadState: LayerLoadState =
+            olLayerState === "error" || healthState === "error" ? "error" : olLayerState;
 
         if (currentLoadState !== nextLoadState) {
             currentLoadState = nextLoadState;
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 5d80fabe9..3649aaaea 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -253,21 +253,18 @@ function useLoadState(layer: LayerBase): string {
         [layer]
     );
 
-    const getSnapshot = useCallback(
-        () => {
-            // for sublayers, use the state of the parent
-            let operationalLayer: Layer;
-            if ("loadState" in layer) {
-                operationalLayer = layer as Layer;
-            } else {
-                const sl = layer as Sublayer;
-                operationalLayer = sl.parentLayer;
-            }
-            
-            return operationalLayer.loadState;
-        },
-        [layer]
-    );
+    const getSnapshot = useCallback(() => {
+        // for sublayers, use the state of the parent
+        let operationalLayer: Layer;
+        if ("loadState" in layer) {
+            operationalLayer = layer as Layer;
+        } else {
+            const sl = layer as Sublayer;
+            operationalLayer = sl.parentLayer;
+        }
+
+        return operationalLayer.loadState;
+    }, [layer]);
 
     return useSyncExternalStore(subscribe, getSnapshot);
 }
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index a0ac9132d..bc7d8cbfb 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -28,6 +28,8 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                     title: "TopPlus Open",
                     isBaseLayer: true,
                     visible: true,
+                    healthCheckURL:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
                     olLayer: createTopPlusOpenLayer("web")
                 }),
                 new SimpleLayer({

From 02a6b575d1ab61422b9678f6a4974c6a25d00e43 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 21 Nov 2023 12:57:26 +0100
Subject: [PATCH 03/60] Remove readonly from healthCheckURL

---
 src/packages/map/api/layers/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index 261c019f7..6405bf1b0 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -143,7 +143,7 @@ export interface LayerConfig extends LayerBaseConfig {
     /**
      * An optional URL to check the availability of the layer.
      */
-    readonly healthCheckURL?: string;
+    healthCheckURL?: string;
 }
 
 /**

From b742a870dfd32f06f0c5bc2eeee737f05985e75c Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 21 Nov 2023 14:21:58 +0100
Subject: [PATCH 04/60] Simplify if

---
 src/packages/map/model/AbstractLayer.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index edc797600..3a58a3089 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -140,15 +140,12 @@ function watchLoadState(
     const currentOlLayerState = mapState(currentSource?.getState());
     const currentHealthState = healthCheck(config);
     let currentLoadState: LayerLoadState =
-        currentOlLayerState === "error" || currentHealthState === "error"
-            ? "error"
-            : currentOlLayerState;
+        currentHealthState === "error" ? "error" : currentOlLayerState;
 
     const updateState = () => {
         const olLayerState = mapState(currentSource?.getState());
         const healthState = healthCheck(config);
-        const nextLoadState: LayerLoadState =
-            olLayerState === "error" || healthState === "error" ? "error" : olLayerState;
+        const nextLoadState: LayerLoadState = healthState === "error" ? "error" : olLayerState;
 
         if (currentLoadState !== nextLoadState) {
             currentLoadState = nextLoadState;

From 8c6d664270a2955195ee7686d9a2e67bdc7d0ade Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 21 Nov 2023 14:59:31 +0100
Subject: [PATCH 05/60] Health check only once during initialization

---
 src/packages/map/model/AbstractLayer.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 3a58a3089..09a5507ab 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -138,14 +138,14 @@ function watchLoadState(
 
     let currentSource = olLayer?.getSource() as Source | null;
     const currentOlLayerState = mapState(currentSource?.getState());
-    const currentHealthState = healthCheck(config);
+    const currentHealthState = healthCheck(config); // check only once during initialization
     let currentLoadState: LayerLoadState =
         currentHealthState === "error" ? "error" : currentOlLayerState;
 
     const updateState = () => {
         const olLayerState = mapState(currentSource?.getState());
-        const healthState = healthCheck(config);
-        const nextLoadState: LayerLoadState = healthState === "error" ? "error" : olLayerState;
+        const nextLoadState: LayerLoadState =
+            currentHealthState === "error" ? "error" : olLayerState;
 
         if (currentLoadState !== nextLoadState) {
             currentLoadState = nextLoadState;

From 2ce22d1191c02b0fa6faf47e3f6c85177af9f715 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 21 Nov 2023 15:38:05 +0100
Subject: [PATCH 06/60] Health check not needed when OL already returning error

---
 src/packages/map/model/AbstractLayer.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 09a5507ab..62e11bdf7 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -138,12 +138,14 @@ function watchLoadState(
 
     let currentSource = olLayer?.getSource() as Source | null;
     const currentOlLayerState = mapState(currentSource?.getState());
-    const currentHealthState = healthCheck(config); // check only once during initialization
+    // custom health check not needed when OL already returning an error state
+    const currentHealthState = currentOlLayerState !== "error" ? healthCheck(config) : "error";
     let currentLoadState: LayerLoadState =
         currentHealthState === "error" ? "error" : currentOlLayerState;
 
     const updateState = () => {
         const olLayerState = mapState(currentSource?.getState());
+        // health check only once during initialization
         const nextLoadState: LayerLoadState =
             currentHealthState === "error" ? "error" : olLayerState;
 

From 0f69b055f556864da22fd3b3c08161bd17795dc9 Mon Sep 17 00:00:00 2001
From: Antonia van Eek <a.vaneek@conterra.de>
Date: Tue, 21 Nov 2023 15:36:33 +0100
Subject: [PATCH 07/60] fix WMSLayerConfig interface: now extends
 LayerBaseConfig

---
 src/packages/map/api/layers/WMSLayer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/map/api/layers/WMSLayer.ts b/src/packages/map/api/layers/WMSLayer.ts
index 9837b4d3b..3ca8233db 100644
--- a/src/packages/map/api/layers/WMSLayer.ts
+++ b/src/packages/map/api/layers/WMSLayer.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import type { Options as WMSSourceOptions } from "ol/source/ImageWMS";
 import { WMSLayerImpl } from "../../model/layers/WMSLayerImpl";
-import type { LayerBaseConfig, Layer, SublayersCollection } from "./base";
+import type { LayerBaseConfig, Layer, SublayersCollection, LayerConfig } from "./base";
 
 /**
  * Configuration options to construct a WMS layer.
  */
-export interface WMSLayerConfig extends LayerBaseConfig {
+export interface WMSLayerConfig extends LayerConfig {
     /** URL of the WMS service. */
     url: string;
 

From 18c7868d1e1dfc0ab7e613bc35bbce57c126f5ab Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 21 Nov 2023 17:05:42 +0100
Subject: [PATCH 08/60] Enable providing a function for health check

---
 src/packages/map/api/layers/base.ts           |  9 +++++++--
 src/packages/map/model/AbstractLayer.ts       | 19 +++++++++++++------
 .../ol-app/MapConfigProviderImpl.ts           |  3 ++-
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index 6405bf1b0..9f4680f74 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -4,6 +4,7 @@ import type { EventSource } from "@open-pioneer/core";
 import type OlBaseLayer from "ol/layer/Base";
 import type { MapModel } from "../MapModel";
 import type { LayerRetrievalOptions } from "../shared";
+import { SimpleLayerConfig } from "./SimpleLayer";
 
 /** Events emitted by the {@link Layer} and other layer types. */
 export interface LayerBaseEvents {
@@ -18,6 +19,8 @@ export interface LayerBaseEvents {
 
 /** The load state of a layer. */
 export type LayerLoadState = "not-loaded" | "loading" | "loaded" | "error";
+/** Custom function to check the state of a layer and returning a {@link LayerLoadState} */
+export type HealthCheckFunction = (config: SimpleLayerConfig) => LayerLoadState;
 
 /**
  * Configuration options supported by all layer types (layers and sublayers).
@@ -141,9 +144,11 @@ export interface LayerConfig extends LayerBaseConfig {
     isBaseLayer?: boolean;
 
     /**
-     * An optional URL to check the availability of the layer.
+     * Optional to check the availability of the layer. It is possible to provide
+     * * either a URL which indicates the state of the service
+     * * or a {@link HealthCheckFunction} performing a custom check and returning the state
      */
-    healthCheckURL?: string;
+    healthCheck?: string | HealthCheckFunction;
 }
 
 /**
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 62e11bdf7..f0e24fe23 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -6,7 +6,7 @@ import { EventsKey } from "ol/events";
 import OlBaseLayer from "ol/layer/Base";
 import OlLayer from "ol/layer/Layer";
 import Source, { State as OlSourceState } from "ol/source/Source";
-import { Layer, LayerLoadState, SimpleLayerConfig } from "../api";
+import { HealthCheckFunction, Layer, LayerLoadState, SimpleLayerConfig } from "../api";
 import { AbstractLayerBase } from "./AbstractLayerBase";
 import { MapModelImpl } from "./MapModelImpl";
 
@@ -23,7 +23,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 {
     #olLayer: OlBaseLayer;
     #isBaseLayer: boolean;
-    #healthCheckURL?: string;
+    #healthCheck?: string | HealthCheckFunction;
     #visible: boolean;
 
     #loadState: LayerLoadState;
@@ -33,7 +33,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
         super(config);
         this.#olLayer = config.olLayer;
         this.#isBaseLayer = config.isBaseLayer ?? false;
-        this.#healthCheckURL = config.healthCheckURL;
+        this.#healthCheck = config.healthCheck;
         this.#visible = config.visible ?? true;
 
         const { initial: initialState, resource: stateWatchResource } = watchLoadState(
@@ -110,12 +110,19 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 function healthCheck(config: SimpleLayerConfig): LayerLoadState {
     return Math.random() < 0.5 ? "loaded" : "error"; // TODO random error for tests
 
-    if (config.healthCheckURL) {
+    if (!("healthCheck" in config)) {
+        return "loaded";
+    }
+
+    if (typeof config.healthCheck === "function") {
+        return config.healthCheck(config);
+    }
+    if (typeof config.healthCheck === "string") {
         // TODO test request to URL in healthCheckURL
-        return "error";
-    } else {
         return "loaded";
     }
+
+    return "error";
 }
 
 function watchLoadState(
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index bc7d8cbfb..bd778352d 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -28,7 +28,7 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                     title: "TopPlus Open",
                     isBaseLayer: true,
                     visible: true,
-                    healthCheckURL:
+                    healthCheck:
                         "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
                     olLayer: createTopPlusOpenLayer("web")
                 }),
@@ -37,6 +37,7 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                     title: "TopPlus Open (Grau)",
                     isBaseLayer: true,
                     visible: false,
+                    healthCheck: () => "error",
                     olLayer: createTopPlusOpenLayer("web_grau")
                 }),
                 new SimpleLayer({

From 06566989994e29d89d36e81eff65ed79459c506a Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Wed, 22 Nov 2023 13:18:25 +0100
Subject: [PATCH 09/60] Make health check async

---
 src/packages/map/model/AbstractLayer.ts       | 42 ++++++++++++-------
 .../ol-app/MapConfigProviderImpl.ts           |  2 +-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index f0e24fe23..2be79465c 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -107,22 +107,24 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 }
 
 // TODO move to a service?
-function healthCheck(config: SimpleLayerConfig): LayerLoadState {
-    return Math.random() < 0.5 ? "loaded" : "error"; // TODO random error for tests
+function healthCheck(config: SimpleLayerConfig): Promise<LayerLoadState> {
+    return new Promise((resolve, reject) => {
+        if (!("healthCheck" in config)) {
+            //resolve(Math.random() < 0.5 ? "loaded" : "error"); // TODO random error for tests
+            resolve("loaded");
+        }
 
-    if (!("healthCheck" in config)) {
-        return "loaded";
-    }
+        if (typeof config.healthCheck === "function") {
+            resolve(config.healthCheck(config));
+        }
+        if (typeof config.healthCheck === "string") {
+            // TODO test request to URL in healthCheckURL
 
-    if (typeof config.healthCheck === "function") {
-        return config.healthCheck(config);
-    }
-    if (typeof config.healthCheck === "string") {
-        // TODO test request to URL in healthCheckURL
-        return "loaded";
-    }
+            resolve("loaded");
+        }
 
-    return "error";
+        reject();
+    });
 }
 
 function watchLoadState(
@@ -145,14 +147,22 @@ function watchLoadState(
 
     let currentSource = olLayer?.getSource() as Source | null;
     const currentOlLayerState = mapState(currentSource?.getState());
-    // custom health check not needed when OL already returning an error state
-    const currentHealthState = currentOlLayerState !== "error" ? healthCheck(config) : "error";
+
+    let currentHealthState = "loading"; // initial state loading until health check finished
     let currentLoadState: LayerLoadState =
         currentHealthState === "error" ? "error" : currentOlLayerState;
 
+    // custom health check not needed when OL already returning an error state
+    if (currentOlLayerState !== "error") {
+        // health check only once during initialization
+        healthCheck(config).then((state: LayerLoadState) => {
+            currentHealthState = state;
+            updateState();
+        });
+    }
+
     const updateState = () => {
         const olLayerState = mapState(currentSource?.getState());
-        // health check only once during initialization
         const nextLoadState: LayerLoadState =
             currentHealthState === "error" ? "error" : olLayerState;
 
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index bd778352d..33202e247 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -37,7 +37,6 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                     title: "TopPlus Open (Grau)",
                     isBaseLayer: true,
                     visible: false,
-                    healthCheck: () => "error",
                     olLayer: createTopPlusOpenLayer("web_grau")
                 }),
                 new SimpleLayer({
@@ -58,6 +57,7 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                 new SimpleLayer({
                     title: "Haltestellen Stadt Rostock",
                     visible: true,
+                    healthCheck: () => "error",
                     description:
                         "Haltestellen des öffentlichen Personenverkehrs in der Hanse- und Universitätsstadt Rostock.",
                     olLayer: createHaltestellenLayer()

From 3d5cf17ac4c6b009760ed26651c7337f8b5ef142 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Thu, 23 Nov 2023 14:26:09 +0100
Subject: [PATCH 10/60] Implement health check by requesting URL

---
 src/packages/map/model/AbstractLayer.ts         | 17 +++++++++--------
 .../map-sample/ol-app/MapConfigProviderImpl.ts  |  2 ++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 2be79465c..d4573a03a 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -110,20 +110,21 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
 function healthCheck(config: SimpleLayerConfig): Promise<LayerLoadState> {
     return new Promise((resolve, reject) => {
         if (!("healthCheck" in config)) {
-            //resolve(Math.random() < 0.5 ? "loaded" : "error"); // TODO random error for tests
             resolve("loaded");
         }
 
         if (typeof config.healthCheck === "function") {
             resolve(config.healthCheck(config));
+        } else if (typeof config.healthCheck === "string") {
+            // TODO replace by fetch from HttpService
+            fetch(config.healthCheck)
+                .then((response) => {
+                    response.ok ? resolve("loaded") : resolve("error");
+                })
+                .catch(() => resolve("error"));
+        } else {
+            reject();
         }
-        if (typeof config.healthCheck === "string") {
-            // TODO test request to URL in healthCheckURL
-
-            resolve("loaded");
-        }
-
-        reject();
     });
 }
 
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index 33202e247..efe677d91 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -65,6 +65,8 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                 new SimpleLayer({
                     title: "Kindertagesstätten",
                     visible: true,
+                    healthCheck:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
                     olLayer: createKitasLayer()
                 }),
                 createSchulenLayer(),

From 7815f17d37abeab4836537014457d05ac1970a73 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 24 Nov 2023 10:38:39 +0100
Subject: [PATCH 11/60] Make custom health check really async

---
 src/packages/map/api/layers/base.ts                    |  2 +-
 src/packages/map/model/AbstractLayer.ts                |  2 +-
 src/samples/map-sample/ol-app/MapConfigProviderImpl.ts | 10 +++++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index 9f4680f74..70f29b91a 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -20,7 +20,7 @@ export interface LayerBaseEvents {
 /** The load state of a layer. */
 export type LayerLoadState = "not-loaded" | "loading" | "loaded" | "error";
 /** Custom function to check the state of a layer and returning a {@link LayerLoadState} */
-export type HealthCheckFunction = (config: SimpleLayerConfig) => LayerLoadState;
+export type HealthCheckFunction = (config: SimpleLayerConfig) => Promise<LayerLoadState>;
 
 /**
  * Configuration options supported by all layer types (layers and sublayers).
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index d4573a03a..010774a6f 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -114,7 +114,7 @@ function healthCheck(config: SimpleLayerConfig): Promise<LayerLoadState> {
         }
 
         if (typeof config.healthCheck === "function") {
-            resolve(config.healthCheck(config));
+            config.healthCheck(config).then((result) => resolve(result));
         } else if (typeof config.healthCheck === "string") {
             // TODO replace by fetch from HttpService
             fetch(config.healthCheck)
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index efe677d91..65947af57 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -57,7 +57,6 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                 new SimpleLayer({
                     title: "Haltestellen Stadt Rostock",
                     visible: true,
-                    healthCheck: () => "error",
                     description:
                         "Haltestellen des öffentlichen Personenverkehrs in der Hanse- und Universitätsstadt Rostock.",
                     olLayer: createHaltestellenLayer()
@@ -165,6 +164,15 @@ function createSchulenLayer() {
         title: "Schulstandorte",
         description: `Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.`,
         visible: true,
+        // example for a custom health check running async
+        healthCheck: async () => {
+            function wait(milliseconds: number): Promise<void> {
+                return new Promise((resolve) => setTimeout(resolve, milliseconds));
+            }
+
+            await wait(3000);
+            return "error";
+        },
         url: "https://www.wms.nrw.de/wms/wms_nw_inspire-schulen",
         sublayers: [
             {

From 38ed731fa6adb814f1a6533f6385138482f3a328 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 24 Nov 2023 12:10:16 +0100
Subject: [PATCH 12/60] Updating sublayers already working, remove comment

---
 src/packages/toc/LayerList.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 3649aaaea..aa87bf4c4 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -244,7 +244,6 @@ function useSublayers(layer: LayerBase): Sublayer[] | undefined {
 
 /** Returns the layers current state. */
 function useLoadState(layer: LayerBase): string {
-    // TODO also necessary to update sublayers
     const subscribe = useCallback(
         (cb: () => void) => {
             const resource = layer.on("changed:loadState", cb);

From 325d46eff89011bc4ce8965bbb7cf17660d12e38 Mon Sep 17 00:00:00 2001
From: Antonia van Eek <a.vaneek@conterra.de>
Date: Fri, 24 Nov 2023 12:12:48 +0100
Subject: [PATCH 13/60] introduce type for layer types used in the toc; remove
 filtering of LayerGroups layers

---
 src/packages/toc/LayerList.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index aa87bf4c4..55afe664f 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -25,6 +25,8 @@ import { useIntl } from "open-pioneer:react-hooks";
 import { useCallback, useRef, useSyncExternalStore } from "react";
 import { FiAlertTriangle, FiMoreVertical } from "react-icons/fi";
 
+type TocLayer = Layer | Sublayer;
+
 /**
  * Lists the (top level) operational layers in the map.
  *
@@ -47,7 +49,7 @@ export function LayerList(props: { map: MapModel; "aria-labelledby"?: string }):
     });
 }
 
-function createList(layers: LayerBase[], intl: PackageIntl, listProps: ListProps) {
+function createList(layers: TocLayer[], intl: PackageIntl, listProps: ListProps) {
     const items = layers.map((layer) => <LayerItem key={layer.id} layer={layer} intl={intl} />);
     return (
         <List
@@ -67,7 +69,7 @@ function createList(layers: LayerBase[], intl: PackageIntl, listProps: ListProps
  *
  * The item may have further nested list items if there are sublayers present.
  */
-function LayerItem(props: { layer: LayerBase; intl: PackageIntl }): JSX.Element {
+function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
     const { layer, intl } = props;
     const title = useTitle(layer);
     const { isVisible, setVisible } = useVisibility(layer);
@@ -115,7 +117,7 @@ function LayerItem(props: { layer: LayerBase; intl: PackageIntl }): JSX.Element
 }
 
 function LayerItemDescriptor(props: {
-    layer: LayerBase;
+    layer: TocLayer;
     title: string;
     intl: PackageIntl;
 }): JSX.Element {
@@ -204,7 +206,7 @@ function useVisibility(layer: LayerBase): {
 }
 
 /** Returns the top level operation layers (without LayerGroups). */
-function useLayers(map: MapModel): LayerBase[] {
+function useLayers(map: MapModel): Layer[] {
     const subscribe = useCallback(
         (cb: () => void) => {
             const resource = map.layers.on("changed", cb);
@@ -243,7 +245,7 @@ function useSublayers(layer: LayerBase): Sublayer[] | undefined {
 }
 
 /** Returns the layers current state. */
-function useLoadState(layer: LayerBase): string {
+function useLoadState(layer: TocLayer): string {
     const subscribe = useCallback(
         (cb: () => void) => {
             const resource = layer.on("changed:loadState", cb);
@@ -253,16 +255,14 @@ function useLoadState(layer: LayerBase): string {
     );
 
     const getSnapshot = useCallback(() => {
-        // for sublayers, use the state of the parent
-        let operationalLayer: Layer;
         if ("loadState" in layer) {
-            operationalLayer = layer as Layer;
+            return layer.loadState;
+        } else if ("parentLayer" in layer) {
+            // for sublayers, use the state of the parent
+            return layer.parentLayer.loadState;
         } else {
-            const sl = layer as Sublayer;
-            operationalLayer = sl.parentLayer;
+            return "loaded";
         }
-
-        return operationalLayer.loadState;
     }, [layer]);
 
     return useSyncExternalStore(subscribe, getSnapshot);

From 1f0b6c278f0bcbedcca38d40e9c76d4a6a69952c Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 27 Nov 2023 14:23:59 +0100
Subject: [PATCH 14/60] Show tooltip in toc and add aria-label

---
 src/packages/toc/LayerList.tsx | 12 ++++++++----
 src/packages/toc/i18n/de.yaml  |  1 +
 src/packages/toc/i18n/en.yaml  |  1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 55afe664f..aa508c371 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -16,7 +16,8 @@ import {
     PopoverTrigger,
     Portal,
     Spacer,
-    Text
+    Text,
+    Tooltip
 } from "@open-pioneer/chakra-integration";
 import { LayerBase, MapModel, Sublayer } from "@open-pioneer/map";
 import { PackageIntl } from "@open-pioneer/runtime";
@@ -75,6 +76,7 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
     const { isVisible, setVisible } = useVisibility(layer);
     const sublayers = useSublayers(layer);
     const isAvailable = useLoadState(layer) !== "error";
+    const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
 
     let nestedChildren;
     if (sublayers?.length) {
@@ -102,9 +104,11 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
                     {title}
                 </Checkbox>
                 {!isAvailable && (
-                    // TODO Tooltip?
-                    // TODO Aria Label
-                    <FiAlertTriangle color={"red"} aria-label={"Layer nicht verfügbar"} />
+                    <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
+                        <span>
+                            <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
+                        </span>
+                    </Tooltip>
                 )}
                 <Spacer></Spacer>
                 {layer.description && (
diff --git a/src/packages/toc/i18n/de.yaml b/src/packages/toc/i18n/de.yaml
index 9fc69a7c5..6b5885fa2 100644
--- a/src/packages/toc/i18n/de.yaml
+++ b/src/packages/toc/i18n/de.yaml
@@ -4,3 +4,4 @@ messages:
   operationalLayerLabel: "Layer"
   missingLayers: "Es sind keine Layer vorhanden."
   error: "Beim Erstellen des Karteninhalts ist ein Fehler aufgetreten."
+  layerNotAvailable: "Layer nicht verfügbar"
diff --git a/src/packages/toc/i18n/en.yaml b/src/packages/toc/i18n/en.yaml
index e1feeae77..c8b46094a 100644
--- a/src/packages/toc/i18n/en.yaml
+++ b/src/packages/toc/i18n/en.yaml
@@ -4,3 +4,4 @@ messages:
   operationalLayerLabel: "Operational layers"
   missingLayers: "There are no layers to display."
   error: "Error while creating map content."
+  layerNotAvailable: "Layer not available"

From 65452f66588e8881aee5af82025c0080cca7feb2 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 27 Nov 2023 15:38:20 +0100
Subject: [PATCH 15/60] Consider not available layers in basemap switcher

---
 .../basemap-switcher/BasemapSwitcher.tsx      | 28 ++++++++++++++++---
 src/packages/basemap-switcher/i18n/de.yaml    |  1 +
 src/packages/basemap-switcher/i18n/en.yaml    |  1 +
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 32a11de01..7273f09af 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -5,6 +5,7 @@ import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
 import { FC, useCallback, useMemo, useRef, useSyncExternalStore } from "react";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
+import { PackageIntl } from "@open-pioneer/runtime";
 
 /*
     Exported for tests. Feels a bit hacky but should be fine for now.
@@ -24,6 +25,14 @@ interface SelectOption {
      * The label of the basemap for the select option.
      */
     label: string;
+    /**
+     * Is the layer available and can be selected?
+     */
+    isAvailable: boolean;
+    /**
+     * Tooltip to show when hovering the option. Mainly used for indicating not available layers.
+     */
+    tooltip: string;
 }
 
 /**
@@ -76,7 +85,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
     const { map } = useMapModel(mapId);
     const baseLayers = useBaseLayers(map);
     const { selectOptions, selectedId } = useMemo(() => {
-        return createOptions({ baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel });
+        return createOptions({ baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel, intl });
     }, [baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel]);
     const activateLayer = (layerId: string) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
@@ -93,7 +102,12 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     onChange={(e) => activateLayer(e.target.value)}
                 >
                     {selectOptions.map((opt) => (
-                        <option key={opt.id} value={opt.id}>
+                        <option
+                            key={opt.id}
+                            value={opt.id}
+                            disabled={!opt.isAvailable}
+                            title={opt.tooltip}
+                        >
                             {opt.label}
                         </option>
                     ))}
@@ -140,11 +154,15 @@ function createOptions(params: {
     baseLayers: Layer[];
     allowSelectingEmptyBasemap: boolean | undefined;
     emptyBasemapLabel: string;
+    intl: PackageIntl;
 }): { selectOptions: SelectOption[]; selectedId: string } {
     const { baseLayers = [], allowSelectingEmptyBasemap = false, emptyBasemapLabel } = params;
     const selectOptions: SelectOption[] = baseLayers.map((item) => ({
         id: item.id,
-        label: item.title
+        label: item.title,
+        isAvailable: item.loadState !== "error",
+        tooltip:
+            item.loadState === "error" ? params.intl.formatMessage({ id: "layerNotAvailable" }) : ""
     }));
 
     let selectedId = baseLayers.find((layer) => layer.visible)?.id;
@@ -160,6 +178,8 @@ function createOptions(params: {
 function getNonBaseMapConfig(label: string) {
     return {
         id: NO_BASEMAP_ID,
-        label
+        label,
+        isAvailable: true,
+        tooltip: ""
     };
 }
diff --git a/src/packages/basemap-switcher/i18n/de.yaml b/src/packages/basemap-switcher/i18n/de.yaml
index 2def2a6a9..5297bb20a 100644
--- a/src/packages/basemap-switcher/i18n/de.yaml
+++ b/src/packages/basemap-switcher/i18n/de.yaml
@@ -1,2 +1,3 @@
 messages:
   emptyBasemapLabel: Ohne Hintergrundkarte
+  layerNotAvailable: Layer nicht verfügbar
diff --git a/src/packages/basemap-switcher/i18n/en.yaml b/src/packages/basemap-switcher/i18n/en.yaml
index 77d1eee9b..6dad90f3d 100644
--- a/src/packages/basemap-switcher/i18n/en.yaml
+++ b/src/packages/basemap-switcher/i18n/en.yaml
@@ -1,2 +1,3 @@
 messages:
   emptyBasemapLabel: Without basemap
+  layerNotAvailable: Layer not available

From 921c4d2f5e05e6ad3ed00fc5ce025380fa82cd04 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 27 Nov 2023 17:17:13 +0100
Subject: [PATCH 16/60] Hide unavailable layers

---
 src/packages/map/model/AbstractLayer.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 010774a6f..1c7e3fc47 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -40,6 +40,12 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
             config,
             (state) => {
                 this.#loadState = state;
+                // hide layer when it becomes unavailable
+                // avoid that the layer is displayed again, but shown as unavailable when the map 
+                // service is available again after initial health check
+                if (state === "error") {
+                    this.setVisible(false);
+                }
                 this.__emitChangeEvent("changed:loadState");
             }
         );

From 9c592ddccfc15b8cb338d8076419c52abdb7ac61 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 28 Nov 2023 15:47:12 +0100
Subject: [PATCH 17/60] Fix whitespace at end of line

---
 src/packages/map/model/AbstractLayer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 1c7e3fc47..1c4e34abc 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -41,7 +41,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
             (state) => {
                 this.#loadState = state;
                 // hide layer when it becomes unavailable
-                // avoid that the layer is displayed again, but shown as unavailable when the map 
+                // avoid that the layer is displayed again, but shown as unavailable when the map
                 // service is available again after initial health check
                 if (state === "error") {
                     this.setVisible(false);

From f848ce6da16ebc564c910cbbecc84cd1869895f9 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 28 Nov 2023 15:47:51 +0100
Subject: [PATCH 18/60] Fix passing intl string to function

---
 .../basemap-switcher/BasemapSwitcher.tsx      | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 7273f09af..58ce3c78e 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -5,7 +5,6 @@ import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
 import { FC, useCallback, useMemo, useRef, useSyncExternalStore } from "react";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
-import { PackageIntl } from "@open-pioneer/runtime";
 
 /*
     Exported for tests. Feels a bit hacky but should be fine for now.
@@ -81,11 +80,17 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
     } = props;
     const { containerProps } = useCommonComponentProps("basemap-switcher", props);
     const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
+    const layerNotAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
 
     const { map } = useMapModel(mapId);
     const baseLayers = useBaseLayers(map);
     const { selectOptions, selectedId } = useMemo(() => {
-        return createOptions({ baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel, intl });
+        return createOptions({
+            baseLayers,
+            allowSelectingEmptyBasemap,
+            emptyBasemapLabel,
+            layerNotAvailableLabel
+        });
     }, [baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel]);
     const activateLayer = (layerId: string) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
@@ -154,15 +159,19 @@ function createOptions(params: {
     baseLayers: Layer[];
     allowSelectingEmptyBasemap: boolean | undefined;
     emptyBasemapLabel: string;
-    intl: PackageIntl;
+    layerNotAvailableLabel: string;
 }): { selectOptions: SelectOption[]; selectedId: string } {
-    const { baseLayers = [], allowSelectingEmptyBasemap = false, emptyBasemapLabel } = params;
+    const {
+        baseLayers = [],
+        allowSelectingEmptyBasemap = false,
+        emptyBasemapLabel,
+        layerNotAvailableLabel
+    } = params;
     const selectOptions: SelectOption[] = baseLayers.map((item) => ({
         id: item.id,
         label: item.title,
         isAvailable: item.loadState !== "error",
-        tooltip:
-            item.loadState === "error" ? params.intl.formatMessage({ id: "layerNotAvailable" }) : ""
+        tooltip: item.loadState === "error" ? layerNotAvailableLabel : ""
     }));
 
     let selectedId = baseLayers.find((layer) => layer.visible)?.id;

From 285b6992c7abb2a2e632b22a03791e772c2c2440 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 28 Nov 2023 15:51:05 +0100
Subject: [PATCH 19/60] Switch baselayer when current baselayer becomes
 unavailable

---
 src/packages/map/model/LayerCollectionImpl.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/packages/map/model/LayerCollectionImpl.ts b/src/packages/map/model/LayerCollectionImpl.ts
index 468a8b47d..4a1dcbaba 100644
--- a/src/packages/map/model/LayerCollectionImpl.ts
+++ b/src/packages/map/model/LayerCollectionImpl.ts
@@ -144,6 +144,22 @@ export class LayerCollectionImpl
             } else {
                 model.__setVisible(false);
             }
+
+            model?.on("changed:loadState", () => {
+                // if active baselayer is not available, switch to alternative basemap
+                if (this.#activeBaseLayer === model && model.loadState === "error") {
+                    const baseLayers = this.getBaseLayers();
+                    const fallbackBaseLayers = baseLayers.filter(
+                        (layer) => layer.loadState !== "error"
+                    );
+
+                    if (fallbackBaseLayers.length > 0) {
+                        this.#updateBaseLayer(fallbackBaseLayers.at(0));
+                    } else {
+                        this.#updateBaseLayer(undefined); // empty background as fallback
+                    }
+                }
+            });
         } else {
             olLayer.setZIndex(this.#nextIndex++);
             model.__setVisible(model.visible);

From 83476686b48e6688d9799f8fb356f219fcf88e2e Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 28 Nov 2023 17:02:17 +0100
Subject: [PATCH 20/60] Rebuild basemap switcher: options as separate
 components to update on events

---
 .../basemap-switcher/BasemapSwitcher.tsx      | 141 ++++++++----------
 1 file changed, 63 insertions(+), 78 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 58ce3c78e..a97cbe78d 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -3,8 +3,9 @@
 import { Box, Select } from "@open-pioneer/chakra-integration";
 import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
-import { FC, useCallback, useMemo, useRef, useSyncExternalStore } from "react";
+import { FC, useCallback, useRef, useSyncExternalStore } from "react";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
+import { PackageIntl } from "@open-pioneer/runtime";
 
 /*
     Exported for tests. Feels a bit hacky but should be fine for now.
@@ -12,28 +13,6 @@ import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/rea
 */
 export const NO_BASEMAP_ID = "___NO_BASEMAP___";
 
-/**
- * These are special properties for the `Select`.
- */
-interface SelectOption {
-    /**
-     * The id of the basemap for the select option.
-     */
-    id: string;
-    /**
-     * The label of the basemap for the select option.
-     */
-    label: string;
-    /**
-     * Is the layer available and can be selected?
-     */
-    isAvailable: boolean;
-    /**
-     * Tooltip to show when hovering the option. Mainly used for indicating not available layers.
-     */
-    tooltip: string;
-}
-
 /**
  * These are special properties for the BasemapSwitcher.
  */
@@ -52,7 +31,7 @@ export interface BasemapSwitcherProps extends CommonComponentProps {
      * Specifies whether an option to deactivate all basemap layers is available in the BasemapSwitcher.
      * Defaults to `false`.
      */
-    allowSelectingEmptyBasemap?: boolean;
+    allowSelectingEmptyBasemap?: boolean | undefined;
 
     /**
      * Optional aria-labelledby property.
@@ -74,28 +53,31 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
     const intl = useIntl();
     const {
         mapId,
-        allowSelectingEmptyBasemap,
+        allowSelectingEmptyBasemap = false,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy
     } = props;
     const { containerProps } = useCommonComponentProps("basemap-switcher", props);
     const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
-    const layerNotAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
 
     const { map } = useMapModel(mapId);
     const baseLayers = useBaseLayers(map);
-    const { selectOptions, selectedId } = useMemo(() => {
-        return createOptions({
-            baseLayers,
-            allowSelectingEmptyBasemap,
-            emptyBasemapLabel,
-            layerNotAvailableLabel
-        });
-    }, [baseLayers, allowSelectingEmptyBasemap, emptyBasemapLabel]);
     const activateLayer = (layerId: string) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
     };
 
+    const options = baseLayers.map((layer) => (
+        <BasemapSelectOption key={layer.id} layer={layer} intl={intl} />
+    ));
+
+    let selectedId = baseLayers.find((layer) => layer.visible && layer.loadState !== "error")?.id;
+    if (allowSelectingEmptyBasemap || selectedId == null) {
+        options.push(<EmptyBasemapSelectOption key={NO_BASEMAP_ID} label={emptyBasemapLabel} />);
+    }
+    if (selectedId == null) {
+        selectedId = NO_BASEMAP_ID;
+    }
+
     return (
         <Box {...containerProps}>
             {map ? (
@@ -106,16 +88,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     value={selectedId}
                     onChange={(e) => activateLayer(e.target.value)}
                 >
-                    {selectOptions.map((opt) => (
-                        <option
-                            key={opt.id}
-                            value={opt.id}
-                            disabled={!opt.isAvailable}
-                            title={opt.tooltip}
-                        >
-                            {opt.label}
-                        </option>
-                    ))}
+                    {options}
                 </Select>
             ) : (
                 ""
@@ -155,40 +128,52 @@ function useBaseLayers(mapModel: MapModel | undefined): Layer[] {
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 
-function createOptions(params: {
-    baseLayers: Layer[];
-    allowSelectingEmptyBasemap: boolean | undefined;
-    emptyBasemapLabel: string;
-    layerNotAvailableLabel: string;
-}): { selectOptions: SelectOption[]; selectedId: string } {
-    const {
-        baseLayers = [],
-        allowSelectingEmptyBasemap = false,
-        emptyBasemapLabel,
-        layerNotAvailableLabel
-    } = params;
-    const selectOptions: SelectOption[] = baseLayers.map((item) => ({
-        id: item.id,
-        label: item.title,
-        isAvailable: item.loadState !== "error",
-        tooltip: item.loadState === "error" ? layerNotAvailableLabel : ""
-    }));
-
-    let selectedId = baseLayers.find((layer) => layer.visible)?.id;
-    if (allowSelectingEmptyBasemap || selectedId == null) {
-        selectOptions.push(getNonBaseMapConfig(emptyBasemapLabel));
-    }
-    if (selectedId == null) {
-        selectedId = NO_BASEMAP_ID;
-    }
-    return { selectOptions, selectedId };
+function BasemapSelectOption(props: { layer: Layer; intl: PackageIntl }): JSX.Element {
+    const { layer, intl } = props;
+    const layerId = layer.id;
+    const label = useTitle(layer);
+    const isAvailable = useLoadState(layer) !== "error";
+    const tooltip = !isAvailable ? intl.formatMessage({ id: "layerNotAvailable" }) : "";
+
+    return (
+        <option value={layerId} disabled={!isAvailable} title={tooltip}>
+            {label}
+        </option>
+    );
 }
 
-function getNonBaseMapConfig(label: string) {
-    return {
-        id: NO_BASEMAP_ID,
-        label,
-        isAvailable: true,
-        tooltip: ""
-    };
+function EmptyBasemapSelectOption(props: { label: string }): JSX.Element {
+    const { label } = props;
+
+    return (
+        <option value={NO_BASEMAP_ID} disabled={false} title={""}>
+            {label}
+        </option>
+    );
+}
+
+function useTitle(layer: Layer): string {
+    const getSnapshot = useCallback(() => layer.title, [layer]);
+    const subscribe = useCallback(
+        (cb: () => void) => {
+            const resource = layer.on("changed:title", cb);
+            return () => resource.destroy();
+        },
+        [layer]
+    );
+
+    return useSyncExternalStore(subscribe, getSnapshot);
+}
+
+function useLoadState(layer: Layer): string {
+    const getSnapshot = useCallback(() => layer.loadState, [layer]);
+    const subscribe = useCallback(
+        (cb: () => void) => {
+            const resource = layer.on("changed:loadState", cb);
+            return () => resource.destroy();
+        },
+        [layer]
+    );
+
+    return useSyncExternalStore(subscribe, getSnapshot);
 }

From f8cff618ba1e4ccdd0d340fbf4d3acea9fa630b8 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 28 Nov 2023 17:03:27 +0100
Subject: [PATCH 21/60] Emit event after switching to another basemap to update
 basemap switcher

---
 src/packages/map/model/LayerCollectionImpl.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/packages/map/model/LayerCollectionImpl.ts b/src/packages/map/model/LayerCollectionImpl.ts
index 4a1dcbaba..ed0590205 100644
--- a/src/packages/map/model/LayerCollectionImpl.ts
+++ b/src/packages/map/model/LayerCollectionImpl.ts
@@ -158,6 +158,7 @@ export class LayerCollectionImpl
                     } else {
                         this.#updateBaseLayer(undefined); // empty background as fallback
                     }
+                    this.emit("changed");
                 }
             });
         } else {

From d04d276869429ead3dc4437b4e57196447ab4af0 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 5 Dec 2023 08:23:19 +0100
Subject: [PATCH 22/60] Replace HTML select by react-select in BasemapSwitcher

---
 pnpm-lock.yaml                                |   3 +
 .../basemap-switcher/BasemapSwitcher.tsx      | 112 +++++++++++-------
 src/packages/basemap-switcher/package.json    |   1 +
 3 files changed, 75 insertions(+), 41 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35d2ad989..b3832b691 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -284,6 +284,9 @@ importers:
       '@open-pioneer/runtime':
         specifier: ^1.1.0
         version: 1.1.0(@formatjs/intl@2.9.9)(@open-pioneer/base-theme@0.1.0)(@open-pioneer/chakra-integration@1.1.0)(@open-pioneer/core@1.1.0)(@open-pioneer/runtime-react-support@1.0.0)(react-dom@18.2.0)(react@18.2.0)
+      chakra-react-select:
+        specifier: ^4.7.6
+        version: 4.7.6(@chakra-ui/form-control@2.1.0)(@chakra-ui/icon@3.1.0)(@chakra-ui/layout@2.3.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.0)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.0)(@emotion/react@11.11.1)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
       ol:
         specifier: ^8.2.0
         version: 8.2.0
diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index a97cbe78d..5145986c5 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -1,11 +1,12 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { Box, Select } from "@open-pioneer/chakra-integration";
+import { Box, Tooltip } from "@open-pioneer/chakra-integration";
 import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
 import { FC, useCallback, useRef, useSyncExternalStore } from "react";
+import { Select, OptionProps, chakraComponents } from "chakra-react-select";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
-import { PackageIntl } from "@open-pioneer/runtime";
+import { FiAlertTriangle } from "react-icons/fi";
 
 /*
     Exported for tests. Feels a bit hacky but should be fine for now.
@@ -46,6 +47,14 @@ export interface BasemapSwitcherProps extends CommonComponentProps {
     "aria-label"?: string;
 }
 
+export interface SearchOption {
+    /** Layer ID. */
+    value: string;
+
+    /** Layer object. */
+    layer: Layer | undefined;
+}
+
 /**
  * The `BasemapSwitcher` component can be used in an app to switch between the different basemaps.
  */
@@ -58,38 +67,48 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
         "aria-labelledby": ariaLabelledBy
     } = props;
     const { containerProps } = useCommonComponentProps("basemap-switcher", props);
-    const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
 
     const { map } = useMapModel(mapId);
     const baseLayers = useBaseLayers(map);
+
     const activateLayer = (layerId: string) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
     };
 
-    const options = baseLayers.map((layer) => (
-        <BasemapSelectOption key={layer.id} layer={layer} intl={intl} />
-    ));
+    const emptyOption: SearchOption = { value: NO_BASEMAP_ID, layer: undefined };
+    const options: SearchOption[] = baseLayers.map<SearchOption>((layer) => {
+        return { value: layer.id, layer: layer };
+    });
 
-    let selectedId = baseLayers.find((layer) => layer.visible && layer.loadState !== "error")?.id;
-    if (allowSelectingEmptyBasemap || selectedId == null) {
-        options.push(<EmptyBasemapSelectOption key={NO_BASEMAP_ID} label={emptyBasemapLabel} />);
-    }
-    if (selectedId == null) {
-        selectedId = NO_BASEMAP_ID;
+    const selectedLayer = options.find(
+        (option) =>
+            option.layer !== undefined && option.layer.visible && option.layer.loadState !== "error"
+    );
+    if (allowSelectingEmptyBasemap || selectedLayer == undefined) {
+        options.push(emptyOption);
     }
+    const defaultLayer: SearchOption = selectedLayer === undefined ? emptyOption : selectedLayer;
 
     return (
         <Box {...containerProps}>
             {map ? (
-                <Select
+                <Select<SearchOption>
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
                     className="basemap-switcher-select"
-                    value={selectedId}
-                    onChange={(e) => activateLayer(e.target.value)}
-                >
-                    {options}
-                </Select>
+                    isClearable={false}
+                    isSearchable={false}
+                    value={defaultLayer}
+                    getOptionLabel={(option) =>
+                        option.layer !== undefined
+                            ? option.layer.title
+                            : intl.formatMessage({ id: "emptyBasemapLabel" })
+                    }
+                    isOptionDisabled={(option) => option?.layer?.loadState === "error"}
+                    onChange={(option) => option && activateLayer(option.value)}
+                    components={{ Option: BasemapSelectOption }}
+                    options={options}
+                />
             ) : (
                 ""
             )}
@@ -128,36 +147,42 @@ function useBaseLayers(mapModel: MapModel | undefined): Layer[] {
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 
-function BasemapSelectOption(props: { layer: Layer; intl: PackageIntl }): JSX.Element {
-    const { layer, intl } = props;
-    const layerId = layer.id;
+function BasemapSelectOption(props: OptionProps<SearchOption>): JSX.Element {
+    const { layer } = props.data;
+    const intl = useIntl();
+    const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
     const label = useTitle(layer);
     const isAvailable = useLoadState(layer) !== "error";
-    const tooltip = !isAvailable ? intl.formatMessage({ id: "layerNotAvailable" }) : "";
 
     return (
-        <option value={layerId} disabled={!isAvailable} title={tooltip}>
+        <chakraComponents.Option {...props} isDisabled={!isAvailable}>
             {label}
-        </option>
+            &nbsp;
+            {!isAvailable && (
+                <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
+                    <span>
+                        <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
+                    </span>
+                </Tooltip>
+            )}
+        </chakraComponents.Option>
     );
 }
 
-function EmptyBasemapSelectOption(props: { label: string }): JSX.Element {
-    const { label } = props;
-
-    return (
-        <option value={NO_BASEMAP_ID} disabled={false} title={""}>
-            {label}
-        </option>
-    );
-}
+function useTitle(layer: Layer | undefined): string {
+    const intl = useIntl();
+    const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
 
-function useTitle(layer: Layer): string {
-    const getSnapshot = useCallback(() => layer.title, [layer]);
+    const getSnapshot = useCallback(() => {
+        return layer === undefined ? emptyBasemapLabel : layer.title; // undefined == empty basemap
+    }, [layer, emptyBasemapLabel]);
     const subscribe = useCallback(
         (cb: () => void) => {
-            const resource = layer.on("changed:title", cb);
-            return () => resource.destroy();
+            if (layer !== undefined) {
+                const resource = layer.on("changed:title", cb);
+                return () => resource.destroy();
+            }
+            return () => {};
         },
         [layer]
     );
@@ -165,12 +190,17 @@ function useTitle(layer: Layer): string {
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 
-function useLoadState(layer: Layer): string {
-    const getSnapshot = useCallback(() => layer.loadState, [layer]);
+function useLoadState(layer: Layer | undefined): string {
+    const getSnapshot = useCallback(() => {
+        return layer === undefined ? "loaded" : layer.loadState; // undefined == empty basemap
+    }, [layer]);
     const subscribe = useCallback(
         (cb: () => void) => {
-            const resource = layer.on("changed:loadState", cb);
-            return () => resource.destroy();
+            if (layer !== undefined) {
+                const resource = layer.on("changed:loadState", cb);
+                return () => resource.destroy();
+            }
+            return () => {};
         },
         [layer]
     );
diff --git a/src/packages/basemap-switcher/package.json b/src/packages/basemap-switcher/package.json
index de5952edb..7d34428fa 100644
--- a/src/packages/basemap-switcher/package.json
+++ b/src/packages/basemap-switcher/package.json
@@ -11,6 +11,7 @@
         "@open-pioneer/map": "workspace:^",
         "@open-pioneer/runtime": "^1.1.0",
         "@open-pioneer/react-utils": "workspace:^",
+        "chakra-react-select": "^4.7.6",
         "ol": "^8.2.0",
         "react": "^18.2.0"
     },

From 85a79253dc2366641ad93a6ce9e8485a59a6e1ed Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 5 Dec 2023 09:27:31 +0100
Subject: [PATCH 23/60] Update pnpm-lock

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3832b691..5dc8779d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -286,7 +286,7 @@ importers:
         version: 1.1.0(@formatjs/intl@2.9.9)(@open-pioneer/base-theme@0.1.0)(@open-pioneer/chakra-integration@1.1.0)(@open-pioneer/core@1.1.0)(@open-pioneer/runtime-react-support@1.0.0)(react-dom@18.2.0)(react@18.2.0)
       chakra-react-select:
         specifier: ^4.7.6
-        version: 4.7.6(@chakra-ui/form-control@2.1.0)(@chakra-ui/icon@3.1.0)(@chakra-ui/layout@2.3.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.0)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.0)(@emotion/react@11.11.1)(@types/react@18.2.20)(react-dom@18.2.0)(react@18.2.0)
+        version: 4.7.6(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.11.1)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0)
       ol:
         specifier: ^8.2.0
         version: 8.2.0

From 9eca77d00659a7bcba9167c51471dd1c40de073f Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 5 Dec 2023 12:09:48 +0100
Subject: [PATCH 24/60] Code cleanup

---
 .../basemap-switcher/BasemapSwitcher.tsx      | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 5145986c5..5b7ce1b94 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -14,6 +14,21 @@ import { FiAlertTriangle } from "react-icons/fi";
 */
 export const NO_BASEMAP_ID = "___NO_BASEMAP___";
 
+/**
+ * Properties for single select options.
+ */
+export interface SelectOption {
+    /**
+     * The id of the basemap for the select option.
+     */
+    value: string;
+
+    /**
+     * The layer object for the select option.
+     */
+    layer: Layer | undefined;
+}
+
 /**
  * These are special properties for the BasemapSwitcher.
  */
@@ -47,14 +62,6 @@ export interface BasemapSwitcherProps extends CommonComponentProps {
     "aria-label"?: string;
 }
 
-export interface SearchOption {
-    /** Layer ID. */
-    value: string;
-
-    /** Layer object. */
-    layer: Layer | undefined;
-}
-
 /**
  * The `BasemapSwitcher` component can be used in an app to switch between the different basemaps.
  */
@@ -67,6 +74,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
         "aria-labelledby": ariaLabelledBy
     } = props;
     const { containerProps } = useCommonComponentProps("basemap-switcher", props);
+    const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
 
     const { map } = useMapModel(mapId);
     const baseLayers = useBaseLayers(map);
@@ -75,37 +83,37 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
     };
 
-    const emptyOption: SearchOption = { value: NO_BASEMAP_ID, layer: undefined };
-    const options: SearchOption[] = baseLayers.map<SearchOption>((layer) => {
+    const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };
+    const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {
         return { value: layer.id, layer: layer };
     });
 
-    const selectedLayer = options.find(
+    const defaultLayer = options.find(
         (option) =>
             option.layer !== undefined && option.layer.visible && option.layer.loadState !== "error"
     );
-    if (allowSelectingEmptyBasemap || selectedLayer == undefined) {
+    if (allowSelectingEmptyBasemap || defaultLayer == undefined) {
         options.push(emptyOption);
     }
-    const defaultLayer: SearchOption = selectedLayer === undefined ? emptyOption : selectedLayer;
+    const selectedLayer: SelectOption = defaultLayer === undefined ? emptyOption : defaultLayer;
 
     return (
         <Box {...containerProps}>
             {map ? (
-                <Select<SearchOption>
+                <Select<SelectOption>
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
                     className="basemap-switcher-select"
+                    value={selectedLayer}
+                    onChange={(option) => option && activateLayer(option.value)}
                     isClearable={false}
                     isSearchable={false}
-                    value={defaultLayer}
                     getOptionLabel={(option) =>
                         option.layer !== undefined
                             ? option.layer.title
-                            : intl.formatMessage({ id: "emptyBasemapLabel" })
+                            : emptyBasemapLabel
                     }
                     isOptionDisabled={(option) => option?.layer?.loadState === "error"}
-                    onChange={(option) => option && activateLayer(option.value)}
                     components={{ Option: BasemapSelectOption }}
                     options={options}
                 />
@@ -147,7 +155,7 @@ function useBaseLayers(mapModel: MapModel | undefined): Layer[] {
     return useSyncExternalStore(subscribe, getSnapshot);
 }
 
-function BasemapSelectOption(props: OptionProps<SearchOption>): JSX.Element {
+function BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {
     const { layer } = props.data;
     const intl = useIntl();
     const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });

From de19bebbacd92c3d5cfede5235b7e8a873a3567b Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Wed, 6 Dec 2023 17:07:35 +0100
Subject: [PATCH 25/60] Prettier and add className to BasemapSwitcher option

---
 src/packages/basemap-switcher/BasemapSwitcher.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 5b7ce1b94..9e617e11b 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -109,9 +109,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     isClearable={false}
                     isSearchable={false}
                     getOptionLabel={(option) =>
-                        option.layer !== undefined
-                            ? option.layer.title
-                            : emptyBasemapLabel
+                        option.layer !== undefined ? option.layer.title : emptyBasemapLabel
                     }
                     isOptionDisabled={(option) => option?.layer?.loadState === "error"}
                     components={{ Option: BasemapSelectOption }}
@@ -163,7 +161,11 @@ function BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {
     const isAvailable = useLoadState(layer) !== "error";
 
     return (
-        <chakraComponents.Option {...props} isDisabled={!isAvailable}>
+        <chakraComponents.Option
+            {...props}
+            isDisabled={!isAvailable}
+            className="basemap-switcher-option"
+        >
             {label}
             &nbsp;
             {!isAvailable && (

From 1cfd291d310a2755ab50078582acc659c851ea40 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Wed, 6 Dec 2023 17:29:35 +0100
Subject: [PATCH 26/60] Replace &nbsp; with Box and margin to avoid whitespace
 at end of innerHTML

---
 src/packages/basemap-switcher/BasemapSwitcher.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 9e617e11b..701d1784d 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -167,13 +167,14 @@ function BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {
             className="basemap-switcher-option"
         >
             {label}
-            &nbsp;
             {!isAvailable && (
-                <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
-                    <span>
-                        <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
-                    </span>
-                </Tooltip>
+                <Box ml={2}>
+                    <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
+                        <span>
+                            <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
+                        </span>
+                    </Tooltip>
+                </Box>
             )}
         </chakraComponents.Option>
     );

From d3a36bae0ecb27997cec939b2bc3d6927c0d11d4 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Thu, 7 Dec 2023 17:53:33 +0100
Subject: [PATCH 27/60] Repair BasemapSwitcher tests

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 478 +++++++++++++++---
 .../BasemapSwitcher.test.tsx.snap             | 106 +++-
 2 files changed, 495 insertions(+), 89 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 562649b15..8bd181c7d 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -4,10 +4,11 @@ import { BkgTopPlusOpen, SimpleLayer } from "@open-pioneer/map";
 import { createServiceOptions, setupMap } from "@open-pioneer/map-test-utils";
 import { PackageContextProvider } from "@open-pioneer/test-utils/react";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import TileLayer from "ol/layer/Tile";
 import OSM from "ol/source/OSM";
 import { describe, expect, it } from "vitest";
-import { BasemapSwitcher, NO_BASEMAP_ID } from "./BasemapSwitcher";
+import { BasemapSwitcher } from "./BasemapSwitcher";
 
 const defaultBasemapConfig = [
     {
@@ -39,11 +40,16 @@ it("should successfully create a basemap switcher component", async () => {
 
     // basemap switcher is mounted
     const { switcherDiv, switcherSelect } = await waitForBasemapSwitcher();
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
     expect(switcherDiv).toMatchSnapshot();
 
     // check basemap switcher box and select is available
     expect(switcherDiv.tagName).toBe("DIV");
-    expect(switcherSelect.tagName).toBe("SELECT");
+    expect(switcherSelect.tagName).toBe("DIV");
+    expect(switcherSelect.getElementsByTagName("input").length).toBe(1);
 });
 
 it("should successfully create a basemap switcher component with additional css classes and box properties", async () => {
@@ -65,6 +71,7 @@ it("should successfully create a basemap switcher component with additional css
 });
 
 it("should successfully select a basemap from basemap switcher", async () => {
+    const user = userEvent.setup();
     const { mapId, registry } = await setupMap({
         layers: defaultBasemapConfig
     });
@@ -81,19 +88,34 @@ it("should successfully select a basemap from basemap switcher", async () => {
     const { switcherSelect } = await waitForBasemapSwitcher();
 
     act(() => {
-        fireEvent.change(switcherSelect, { target: { value: "osm" } });
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
     });
+    let options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    const optionsOsm = Array.from(options).filter((option) => option.textContent === "OSM");
+    if (!optionsOsm[0]) {
+        throw new Error("Layer OSM missing in basemap options");
+    }
+    await user.click(optionsOsm[0]);
     const firstActiveBaseLayer = map.layers.getActiveBaseLayer();
     expect(firstActiveBaseLayer?.id).toBe("osm");
 
     act(() => {
-        fireEvent.change(switcherSelect, { target: { value: "topplus-open" } });
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
     });
+    options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    const optionsTopPlus = Array.from(options).filter(
+        (option) => option.textContent === "TopPlus Open"
+    );
+    if (!optionsTopPlus[0]) {
+        throw new Error("Layer topplus-open missing in basemap options");
+    }
+    await user.click(optionsTopPlus[0]);
     const nextActiveBaseLayer = map.layers.getActiveBaseLayer();
     expect(nextActiveBaseLayer?.id).toBe("topplus-open");
 });
 
 it("should allow selecting 'no basemap' when enabled", async () => {
+    const user = userEvent.setup();
     const { mapId, registry } = await setupMap({
         layers: defaultBasemapConfig
     });
@@ -108,36 +130,149 @@ it("should allow selecting 'no basemap' when enabled", async () => {
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
+
+    expect(switcherSelect.textContent).toBe("OSM");
+    expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
+
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
     expect(switcherSelect).toMatchInlineSnapshot(`
-      <select
-        class="chakra-select basemap-switcher-select css-161pkch"
+      <div
+        class="basemap-switcher-select css-79elbk"
         data-theme="light"
       >
-        <option
-          value="osm"
-        >
-          OSM
-        </option>
-        <option
-          value="topplus-open"
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-5-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
         >
-          TopPlus Open
-        </option>
-        <option
-          value="___NO_BASEMAP___"
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-5-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-5-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-5-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-5-listbox"
         >
-          emptyBasemapLabel
-        </option>
-      </select>
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-5-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-5-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-5-option-2"
+              role="option"
+              tabindex="-1"
+            >
+              emptyBasemapLabel
+            </div>
+          </div>
+        </div>
+      </div>
     `);
-    expect(switcherSelect.value).toBe("osm");
-    expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
 
     act(() => {
-        fireEvent.change(switcherSelect, { target: { value: NO_BASEMAP_ID } });
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
     });
 
-    expect(switcherSelect.value).toBe(NO_BASEMAP_ID);
+    const options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    const optionsBasemap = Array.from(options).filter(
+        (option) => option.textContent === "emptyBasemapLabel"
+    );
+    if (!optionsBasemap[0]) {
+        throw new Error("Layer Basemap missing in basemap options");
+    }
+    await user.click(optionsBasemap[0]);
+
+    expect(switcherSelect.textContent).toBe("emptyBasemapLabel");
     expect(map.layers.getActiveBaseLayer()).toBe(undefined);
 });
 
@@ -175,32 +310,136 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
+
+    expect(switcherSelect.textContent).toBe("emptyBasemapLabel");
+
+    const activeBaseLayer = map.layers.getActiveBaseLayer();
+    expect(activeBaseLayer).toBeUndefined();
+
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
     expect(switcherSelect).toMatchInlineSnapshot(`
-      <select
-        class="chakra-select basemap-switcher-select css-161pkch"
+      <div
+        class="basemap-switcher-select css-79elbk"
         data-theme="light"
       >
-        <option
-          value="b-1"
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-6-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
         >
-          OSM
-        </option>
-        <option
-          value="b-2"
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              emptyBasemapLabel
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-6-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-6-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-6-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-6-listbox"
         >
-          topplus-open
-        </option>
-        <option
-          value="___NO_BASEMAP___"
-        >
-          emptyBasemapLabel
-        </option>
-      </select>
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-6-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-6-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              topplus-open
+            </div>
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-6-option-2"
+              role="option"
+              tabindex="-1"
+            >
+              emptyBasemapLabel
+            </div>
+          </div>
+        </div>
+      </div>
     `);
-    expect(switcherSelect.value).toBe(NO_BASEMAP_ID);
-
-    const activeBaseLayer = map.layers.getActiveBaseLayer();
-    expect(activeBaseLayer).toBeUndefined();
 });
 
 it("should update when a new basemap is registered", async () => {
@@ -218,7 +457,11 @@ it("should update when a new basemap is registered", async () => {
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
-    expect(switcherSelect.options.length).toBe(2);
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+    let options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    expect(options.length).toBe(2);
 
     act(() => {
         const layer = new SimpleLayer({
@@ -230,28 +473,127 @@ it("should update when a new basemap is registered", async () => {
         map.layers.addLayer(layer);
     });
 
-    expect(switcherSelect.options.length).toBe(3);
+    options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    expect(options.length).toBe(3);
+
     expect(switcherSelect).toMatchInlineSnapshot(`
-      <select
-        class="chakra-select basemap-switcher-select css-161pkch"
+      <div
+        class="basemap-switcher-select css-79elbk"
         data-theme="light"
       >
-        <option
-          value="osm"
-        >
-          OSM
-        </option>
-        <option
-          value="topplus-open"
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-7-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
         >
-          TopPlus Open
-        </option>
-        <option
-          value="foo"
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-7-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-7-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-7-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-7-listbox"
         >
-          Foo
-        </option>
-      </select>
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-7-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-7-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-7-option-2"
+              role="option"
+              tabindex="-1"
+            >
+              Foo
+            </div>
+          </div>
+        </div>
+      </div>
     `);
 });
 
@@ -270,13 +612,13 @@ it("should update when a different basemap is activated from somewhere else", as
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
-    expect(switcherSelect.value).toBe("osm");
+    expect(switcherSelect.textContent).toBe("OSM");
     expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
 
     act(() => {
         map.layers.activateBaseLayer("topplus-open");
     });
-    expect(switcherSelect.value).toBe("topplus-open");
+    expect(switcherSelect.textContent).toBe("TopPlus Open");
 });
 
 describe("should successfully select the correct basemap from basemap switcher", () => {
@@ -314,8 +656,8 @@ describe("should successfully select the correct basemap from basemap switcher",
 
         // basemap switcher is mounted
         const { switcherSelect } = await waitForBasemapSwitcher();
-        expect(switcherSelect.value).toBe("osm");
-        expect(switcherSelect.value).not.toBe("topplus-open");
+        expect(switcherSelect.textContent).toBe("OSM");
+        expect(switcherSelect.textContent).not.toBe("TopPlus Open");
 
         const activeBaseLayer = map.layers.getActiveBaseLayer();
         expect(activeBaseLayer?.id).toBe("osm");
@@ -355,8 +697,8 @@ describe("should successfully select the correct basemap from basemap switcher",
 
         // basemap switcher is mounted
         const { switcherSelect } = await waitForBasemapSwitcher();
-        expect(switcherSelect.value).toBe("topplus-open");
-        expect(switcherSelect.value).not.toBe("osm");
+        expect(switcherSelect.textContent).toBe("TopPlus Open");
+        expect(switcherSelect.textContent).not.toBe("OSM");
 
         const activeBaseLayer = map.layers.getActiveBaseLayer();
         expect(activeBaseLayer?.id).toBe("topplus-open");
diff --git a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
index c837a648d..50ae469c3 100644
--- a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
+++ b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
@@ -7,36 +7,100 @@ exports[`should successfully create a basemap switcher component 1`] = `
   data-theme="light"
 >
   <div
-    class="chakra-select__wrapper css-42b2qy"
+    class="basemap-switcher-select css-79elbk"
     data-theme="light"
   >
-    <select
-      class="chakra-select basemap-switcher-select css-161pkch"
+    <span
+      class="css-1f43avz-a11yText-A11yText"
+      id="react-select-2-live-region"
+    />
+    <span
+      aria-atomic="false"
+      aria-live="polite"
+      aria-relevant="additions text"
+      class="css-1f43avz-a11yText-A11yText"
+    />
+    <div
+      class=" css-i2418r"
       data-theme="light"
     >
-      <option
-        value="___NO_BASEMAP___"
+      <div
+        class=" css-j93siq"
+        data-theme="light"
+      >
+        <div
+          class=" css-1xa1gs2"
+          data-theme="light"
+        >
+          emptyBasemapLabel
+        </div>
+        <input
+          aria-autocomplete="list"
+          aria-controls="react-select-2-listbox"
+          aria-expanded="true"
+          aria-haspopup="true"
+          aria-owns="react-select-2-listbox"
+          aria-readonly="true"
+          class="css-mohuvp-dummyInput-DummyInput"
+          id="react-select-2-input"
+          inputmode="none"
+          role="combobox"
+          tabindex="0"
+          value=""
+        />
+      </div>
+      <div
+        class=" css-hfbj6y"
+        data-theme="light"
       >
-        emptyBasemapLabel
-      </option>
-    </select>
+        <hr
+          aria-orientation="vertical"
+          class="chakra-divider css-1i6c5ox"
+          data-theme="light"
+        />
+        <div
+          aria-hidden="true"
+          class=" css-xq12md"
+          data-theme="light"
+        >
+          <svg
+            aria-hidden="true"
+            class="chakra-icon css-onkibi"
+            data-theme="light"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
     <div
-      class="chakra-select__icon-wrapper css-iohxn1"
+      class=" css-ky7590"
       data-theme="light"
+      id="react-select-2-listbox"
     >
-      <svg
-        aria-hidden="true"
-        class="chakra-select__icon"
-        focusable="false"
-        role="presentation"
-        style="width: 1em; height: 1em; color: currentcolor;"
-        viewBox="0 0 24 24"
+      <div
+        class=" css-1h5avke"
+        data-theme="light"
+        role="listbox"
       >
-        <path
-          d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-          fill="currentColor"
-        />
-      </svg>
+        <div
+          aria-selected="true"
+          class="basemap-switcher-option css-e8c6zu"
+          data-focus="true"
+          data-theme="light"
+          id="react-select-2-option-0"
+          role="option"
+          tabindex="-1"
+        >
+          emptyBasemapLabel
+        </div>
+      </div>
     </div>
   </div>
 </div>

From 8dbbf06fb6d4eed2fce47ff97d99374edfebffda Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 12:17:55 +0100
Subject: [PATCH 28/60] Repair Toc tests

---
 src/packages/toc/Toc.test.tsx                 |  27 ++--
 .../toc/__snapshots__/Toc.test.tsx.snap       | 118 ++++++++++++++----
 2 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/src/packages/toc/Toc.test.tsx b/src/packages/toc/Toc.test.tsx
index a2ce64f32..85696128c 100644
--- a/src/packages/toc/Toc.test.tsx
+++ b/src/packages/toc/Toc.test.tsx
@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import { createServiceOptions, setupMap } from "@open-pioneer/map-test-utils";
 import { PackageContextProvider } from "@open-pioneer/test-utils/react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor, fireEvent } from "@testing-library/react";
 import TileLayer from "ol/layer/Tile";
 import { expect, it } from "vitest";
 import { Toc } from "./Toc";
 
 const BASEMAP_SWITCHER_CLASS = ".basemap-switcher";
+const BASEMAP_SWITCHER_SELECT_CLASS = ".basemap-switcher-select";
 
 it("should successfully create a toc component", async () => {
     const { mapId, registry } = await setupMap({
@@ -41,9 +42,16 @@ it("should successfully create a toc component", async () => {
 
     const tocDiv = await findToc();
     const { basemapSelect } = await waitForBasemapSwitcher(tocDiv!);
+
+    // react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(basemapSelect, { key: "ArrowDown" });
+        //await userEvent.click(basemapSelect); // TODO click doesn't work
+    });
+
     await waitFor(() => {
-        const option = basemapSelect.options[0];
-        if (!option || option.innerText !== "Base layer") {
+        const options = tocDiv.getElementsByClassName("basemap-switcher-option");
+        if (options.length !== 1 || options[0]?.textContent !== "Base layer") {
             throw new Error("expected basemap switcher to contain the Base layer option");
         }
     });
@@ -127,8 +135,14 @@ it("should support overriding basemap-switcher properties", async () => {
     const { basemapSwitcher, basemapSelect } = await waitForBasemapSwitcher(tocDiv!);
     expect(basemapSwitcher?.classList.contains("test-class")).toBe(true);
 
+    // react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(basemapSelect, { key: "ArrowDown" });
+        //await userEvent.click(basemapSelect); // TODO click doesn't work
+    });
+
     await waitFor(() => {
-        const options = basemapSelect.querySelectorAll("option");
+        const options = basemapSelect.getElementsByClassName("basemap-switcher-option");
         const optionLabels = Array.from(options).map((opt) => opt.textContent);
         expect(optionLabels, "basemap options are not equal to their expected values")
             .toMatchInlineSnapshot(`
@@ -141,8 +155,7 @@ it("should support overriding basemap-switcher properties", async () => {
 });
 
 async function findToc() {
-    const tocDiv = await screen.findByTestId("toc");
-    return tocDiv;
+    return await screen.findByTestId("toc");
 }
 
 async function waitForBasemapSwitcher(tocDiv: HTMLElement) {
@@ -152,7 +165,7 @@ async function waitForBasemapSwitcher(tocDiv: HTMLElement) {
             throw new Error("basemap switcher not mounted");
         }
 
-        const basemapSelect = basemapSwitcher?.querySelector("select");
+        const basemapSelect = basemapSwitcher?.querySelector(BASEMAP_SWITCHER_SELECT_CLASS);
         if (!basemapSelect) {
             throw new Error("failed to find select element in basemap switcher");
         }
diff --git a/src/packages/toc/__snapshots__/Toc.test.tsx.snap b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
index 0a3807feb..03daf2ba7 100644
--- a/src/packages/toc/__snapshots__/Toc.test.tsx.snap
+++ b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
@@ -22,37 +22,101 @@ exports[`should successfully create a toc component 1`] = `
       data-theme="light"
     >
       <div
-        class="chakra-select__wrapper css-42b2qy"
+        class="basemap-switcher-select css-79elbk"
         data-theme="light"
       >
-        <select
-          aria-labelledby=":r0:"
-          class="chakra-select basemap-switcher-select css-161pkch"
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-2-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
           data-theme="light"
         >
-          <option
-            value="base-layer"
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              Base layer
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-2-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-labelledby=":r0:"
+              aria-owns="react-select-2-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-2-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
           >
-            Base layer
-          </option>
-        </select>
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
         <div
-          class="chakra-select__icon-wrapper css-iohxn1"
+          class=" css-ky7590"
           data-theme="light"
+          id="react-select-2-listbox"
         >
-          <svg
-            aria-hidden="true"
-            class="chakra-select__icon"
-            focusable="false"
-            role="presentation"
-            style="width: 1em; height: 1em; color: currentcolor;"
-            viewBox="0 0 24 24"
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
           >
-            <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-              fill="currentColor"
-            />
-          </svg>
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-2-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              Base layer
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -88,6 +152,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
+              aria-disabled="false"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
               type="checkbox"
@@ -124,6 +189,10 @@ exports[`should successfully create a toc component 1`] = `
               Layer 2
             </span>
           </label>
+          <div
+            class="css-17xejub"
+            data-theme="light"
+          />
         </div>
       </li>
       <li
@@ -140,6 +209,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
+              aria-disabled="false"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
               type="checkbox"
@@ -176,6 +246,10 @@ exports[`should successfully create a toc component 1`] = `
               Layer 1
             </span>
           </label>
+          <div
+            class="css-17xejub"
+            data-theme="light"
+          />
         </div>
       </li>
     </ul>

From abacbbc4ac216a02927c40bd9cca4824a27865ed Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 12:30:17 +0100
Subject: [PATCH 29/60] Add missing react-icons dependency to package.json in
 BasemapSwitcher

---
 src/packages/basemap-switcher/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/packages/basemap-switcher/package.json b/src/packages/basemap-switcher/package.json
index 7d34428fa..57926502f 100644
--- a/src/packages/basemap-switcher/package.json
+++ b/src/packages/basemap-switcher/package.json
@@ -13,7 +13,8 @@
         "@open-pioneer/react-utils": "workspace:^",
         "chakra-react-select": "^4.7.6",
         "ol": "^8.2.0",
-        "react": "^18.2.0"
+        "react": "^18.2.0",
+        "react-icons": "^4.11.0"
     },
     "devDependencies": {
         "@open-pioneer/test-utils": "^1.0.1",

From b0d80680a55b0f509b1215f4f0fcef9bf155d558 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 12:42:03 +0100
Subject: [PATCH 30/60] Update pnpm -lock.yaml

---
 pnpm-lock.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5dc8779d1..11aca91ff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -293,6 +293,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.2.0
+      react-icons:
+        specifier: ^4.11.0
+        version: 4.11.0(react@18.2.0)
     devDependencies:
       '@open-pioneer/map-test-utils':
         specifier: workspace:^

From 087551c5030fd09e5c6cfdc8a875f9508d1415f8 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 18:02:47 +0100
Subject: [PATCH 31/60] hide layer when initial state is error

---
 src/packages/map/model/AbstractLayer.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 1c4e34abc..a48174d54 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -34,7 +34,6 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
         this.#olLayer = config.olLayer;
         this.#isBaseLayer = config.isBaseLayer ?? false;
         this.#healthCheck = config.healthCheck;
-        this.#visible = config.visible ?? true;
 
         const { initial: initialState, resource: stateWatchResource } = watchLoadState(
             config,
@@ -49,6 +48,8 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
                 this.__emitChangeEvent("changed:loadState");
             }
         );
+        // hide layer when initial state is error
+        this.#visible = (initialState !== "error" ? config.visible : false) ?? true;
         this.#loadState = initialState;
         this.#stateWatchResource = stateWatchResource;
     }

From d6159845bcdb614c39cbf470004ef6ef4ce25a62 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 18:03:40 +0100
Subject: [PATCH 32/60] remove comment

---
 src/packages/map/model/AbstractLayer.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index a48174d54..625861743 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -113,7 +113,6 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
     }
 }
 
-// TODO move to a service?
 function healthCheck(config: SimpleLayerConfig): Promise<LayerLoadState> {
     return new Promise((resolve, reject) => {
         if (!("healthCheck" in config)) {

From b117968da6698524a929af31675444e30a71f8e5 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 18:04:29 +0100
Subject: [PATCH 33/60] simplify redundant code

---
 src/packages/map/model/AbstractLayer.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 625861743..e5848d2d6 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -155,9 +155,8 @@ function watchLoadState(
     let currentSource = olLayer?.getSource() as Source | null;
     const currentOlLayerState = mapState(currentSource?.getState());
 
+    let currentLoadState: LayerLoadState = currentOlLayerState;
     let currentHealthState = "loading"; // initial state loading until health check finished
-    let currentLoadState: LayerLoadState =
-        currentHealthState === "error" ? "error" : currentOlLayerState;
 
     // custom health check not needed when OL already returning an error state
     if (currentOlLayerState !== "error") {

From d53a32fbdaa09c3c8dffe5c97640567c55db1714 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 8 Dec 2023 18:05:30 +0100
Subject: [PATCH 34/60] Add tests for AbstractLayer health check

---
 src/packages/map/model/AbstractLayer.test.ts | 232 ++++++++++++++++++-
 1 file changed, 230 insertions(+), 2 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.test.ts b/src/packages/map/model/AbstractLayer.test.ts
index 94bdd3b38..1c15f3b88 100644
--- a/src/packages/map/model/AbstractLayer.test.ts
+++ b/src/packages/map/model/AbstractLayer.test.ts
@@ -6,8 +6,8 @@
 import Layer from "ol/layer/Layer";
 import TileLayer from "ol/layer/Tile";
 import Source from "ol/source/Source";
-import { afterEach, expect, it, vi } from "vitest";
-import { SimpleLayerConfig } from "../api";
+import { SpyInstance, afterEach, describe, expect, it, vi } from "vitest";
+import { HealthCheckFunction, SimpleLayerConfig } from "../api";
 import { AbstractLayer } from "./AbstractLayer";
 
 afterEach(() => {
@@ -123,6 +123,228 @@ it("tracks the layer source's state", async () => {
     }
 });
 
+it("hides a layer when state changes to error", async () => {
+    const source = new Source({
+        state: "ready"
+    });
+    const olLayer = new Layer({
+        source
+    });
+    const layer = createLayer({
+        id: "a",
+        title: "A",
+        visible: true,
+        olLayer: olLayer
+    });
+
+    {
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(true);
+
+        source.setState("loading");
+        expect(layer.loadState).toBe("loading");
+        expect(layer.visible).toBe(true);
+
+        source.setState("error");
+        expect(layer.loadState).toBe("error");
+        expect(layer.visible).toBe(false);
+
+        // don't activate visibility again
+        source.setState("ready");
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(false);
+    }
+});
+
+describe("performs a health check", () => {
+    it("when specified as URL, success", async () => {
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        mockedFetch.mockResolvedValue(
+            new Response("", {
+                status: 200
+            })
+        );
+        const testUrl = "http://example.org/health";
+
+        const source = new Source({
+            state: "ready"
+        });
+        const olLayer = new Layer({
+            source
+        });
+
+        const layer = createLayer({
+            id: "a",
+            title: "A",
+            visible: true,
+            olLayer: olLayer,
+            healthCheck: testUrl
+        });
+
+        let eventEmitted = 0;
+        layer.on("changed:loadState", () => eventEmitted++);
+
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+        expect(mockedFetch).toHaveBeenCalledWith(testUrl);
+        expect(eventEmitted).toBe(0);
+        expect(layer.loadState).toBe("loaded");
+
+        await sleep(25);
+        expect(eventEmitted).toBe(0); // no change of state
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(true); // still visible
+        // ol layer state remains ready and is overwritten by internal health check
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+    });
+
+    it("when specified as URL, fail", async () => {
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        mockedFetch.mockResolvedValue(
+            new Response("", {
+                status: 404
+            })
+        );
+        const testUrl = "http://example.org/health";
+
+        const source = new Source({
+            state: "ready"
+        });
+        const olLayer = new Layer({
+            source
+        });
+
+        const layer = createLayer({
+            id: "a",
+            title: "A",
+            visible: true,
+            olLayer: olLayer,
+            healthCheck: testUrl
+        });
+
+        let eventEmitted = 0;
+        layer.on("changed:loadState", () => eventEmitted++);
+
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+        expect(mockedFetch).toHaveBeenCalledWith(testUrl);
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(true);
+        expect(eventEmitted).toBe(0);
+
+        await sleep(25);
+        // ol layer state remains ready and is overwritten by internal health check
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+        expect(layer.loadState).toBe("error");
+        expect(layer.visible).toBe(false);
+        expect(eventEmitted).toBe(1);
+    });
+
+    it("when specified as function", async () => {
+        let didResolve = false;
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        const customHealthCheck: HealthCheckFunction = async () => {
+            function wait(milliseconds: number): Promise<void> {
+                return new Promise((resolve) => setTimeout(resolve, milliseconds));
+            }
+
+            await wait(5);
+
+            didResolve = true;
+            return "error";
+        };
+        const mockedCustomHealthCheck = vi.fn(customHealthCheck);
+
+        const source = new Source({
+            state: "ready"
+        });
+        const olLayer = new Layer({
+            source
+        });
+        const layerConfig: SimpleLayerConfig = {
+            id: "a",
+            title: "A",
+            visible: true,
+            olLayer: olLayer,
+            healthCheck: mockedCustomHealthCheck
+        };
+        const layer = createLayer(layerConfig);
+
+        let eventEmitted = 0;
+        layer.on("changed:loadState", () => eventEmitted++);
+
+        expect(mockedFetch).toHaveBeenCalledTimes(0);
+        expect(mockedCustomHealthCheck).toHaveBeenCalledOnce();
+        expect(mockedCustomHealthCheck).toHaveBeenCalledWith(layerConfig);
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+        expect(eventEmitted).toBe(0);
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(true);
+        expect(didResolve).toBe(false);
+
+        await sleep(25);
+        expect(didResolve).toBe(true);
+        // ol layer state remains ready and is overwritten by internal health check
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+        expect(eventEmitted).toBe(1);
+        expect(layer.loadState).toBe("error");
+        expect(layer.visible).toBe(false);
+    });
+
+    it("not when no health check specified in layer config", async () => {
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+
+        const source = new Source({
+            state: "ready"
+        });
+        const olLayer = new Layer({
+            source
+        });
+
+        const layer = createLayer({
+            id: "a",
+            title: "A",
+            visible: true,
+            olLayer: olLayer
+        });
+
+        let eventEmitted = 0;
+        layer.on("changed:loadState", () => eventEmitted++);
+
+        expect(mockedFetch).toHaveBeenCalledTimes(0);
+        expect(eventEmitted).toBe(0); // no change of state
+        expect(layer.loadState).toBe("loaded");
+        expect(layer.visible).toBe(true);
+        expect(layer.olLayer.getSourceState()).toBe("ready");
+    });
+
+    it("not when ol layer state already is error", async () => {
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+
+        const source = new Source({
+            state: "error"
+        });
+        const olLayer = new Layer({
+            source
+        });
+
+        const layer = createLayer({
+            id: "a",
+            title: "A",
+            visible: true,
+            olLayer: olLayer,
+            healthCheck: "http://example.org/health"
+        });
+
+        let eventEmitted = 0;
+        layer.on("changed:loadState", () => eventEmitted++);
+
+        expect(layer.loadState).toBe("error");
+        expect(layer.visible).toBe(false);
+        expect(layer.olLayer.getSourceState()).toBe("error");
+        expect(mockedFetch).toHaveBeenCalledTimes(0);
+        expect(eventEmitted).toBe(0); // no event emitted because state was initially error
+    });
+});
+
 // Basic impl for tests
 class LayerImpl extends AbstractLayer {
     get sublayers(): undefined {
@@ -134,3 +356,9 @@ class LayerImpl extends AbstractLayer {
 function createLayer(layerConfig: SimpleLayerConfig): AbstractLayer {
     return new LayerImpl(layerConfig);
 }
+
+function sleep(ms: number) {
+    return new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}

From b279fc56bac99a1869a0db4bbd3235e533472c40 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 13:54:13 +0100
Subject: [PATCH 35/60] Add tests for LayerCollectionImpl loadState event

---
 .../map/model/LayerCollectionImpl.test.ts     | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)

diff --git a/src/packages/map/model/LayerCollectionImpl.test.ts b/src/packages/map/model/LayerCollectionImpl.test.ts
index a3f23a1e0..64cee2a49 100644
--- a/src/packages/map/model/LayerCollectionImpl.test.ts
+++ b/src/packages/map/model/LayerCollectionImpl.test.ts
@@ -398,6 +398,128 @@ describe("base layers", () => {
         expect(b2.olLayer.getVisible()).toBe(false);
     });
 
+    it("switches base layer if active base layer has error state", async () => {
+        const b1source = new OSM();
+        const b2source = new OSM();
+        const b3source = new OSM();
+
+        const model = await createMapModel("foo", {
+            layers: [
+                new SimpleLayer({
+                    id: "b-1",
+                    title: "Base Layer 1",
+                    isBaseLayer: true,
+                    olLayer: new TileLayer({
+                        source: b1source
+                    })
+                }),
+                new SimpleLayer({
+                    id: "b-2",
+                    title: "Base Layer 2",
+                    isBaseLayer: true,
+                    olLayer: new TileLayer({
+                        source: b2source
+                    })
+                }),
+                new SimpleLayer({
+                    id: "b-3",
+                    title: "Base Layer 3",
+                    isBaseLayer: true,
+                    olLayer: new TileLayer({
+                        source: b3source
+                    })
+                })
+            ]
+        });
+
+        const layers = model.layers;
+
+        let eventsLayers = 0;
+        layers.on("changed", () => ++eventsLayers);
+
+        const b1 = layers.getLayerById("b-1")! as SimpleLayerImpl;
+        const b2 = layers.getLayerById("b-2")! as SimpleLayerImpl;
+        const b3 = layers.getLayerById("b-3")! as SimpleLayerImpl;
+
+        let eventsb1 = 0,
+            eventsb2 = 0,
+            eventsb3 = 0;
+        b1.on("changed:loadState", () => ++eventsb1);
+        b2.on("changed:loadState", () => ++eventsb2);
+        b3.on("changed:loadState", () => ++eventsb3);
+
+        layers.activateBaseLayer(b1.id);
+
+        // initial state
+        expect(layers.getActiveBaseLayer()).toBe(b1);
+        expect(eventsLayers).toBe(0);
+        expect(eventsb1).toBe(0); // no change
+        expect(b1.visible).toBe(true);
+        expect(b1.olLayer.getVisible()).toBe(true);
+        expect(eventsb2).toBe(0);
+        expect(b2.visible).toBe(false);
+        expect(b2.olLayer.getVisible()).toBe(false);
+        expect(eventsb3).toBe(0);
+        expect(b3.visible).toBe(false);
+        expect(b3.olLayer.getVisible()).toBe(false);
+
+        // layer, which is not the currently active base map, becomes unavailable -> no change of base map
+        b3source.setState("error");
+        expect(layers.getActiveBaseLayer()).toBe(b1);
+        expect(eventsLayers).toBe(0);
+        expect(eventsb1).toBe(0);
+        expect(b1.visible).toBe(true);
+        expect(b1.olLayer.getVisible()).toBe(true);
+        expect(eventsb2).toBe(0);
+        expect(b2.visible).toBe(false);
+        expect(b2.olLayer.getVisible()).toBe(false);
+        expect(eventsb3).toBe(1); // change event
+        expect(b3.visible).toBe(false);
+        expect(b3.olLayer.getVisible()).toBe(false);
+
+        // fallback when layer becomes inactive
+        b1source.setState("error");
+        expect(layers.getActiveBaseLayer()).toBe(b2);
+        expect(eventsLayers).toBe(1);
+        expect(eventsb1).toBe(1); // change event
+        expect(b1.visible).toBe(false);
+        expect(b1.olLayer.getVisible()).toBe(false);
+        expect(eventsb2).toBe(0);
+        expect(b2.visible).toBe(true);
+        expect(b2.olLayer.getVisible()).toBe(true);
+        expect(eventsb3).toBe(1);
+        expect(b3.visible).toBe(false);
+        expect(b3.olLayer.getVisible()).toBe(false);
+
+        // state change, but not to error -> no changes expected
+        b2source.setState("loading");
+        expect(layers.getActiveBaseLayer()).toBe(b2);
+        expect(eventsLayers).toBe(1);
+        expect(eventsb1).toBe(1);
+        expect(b1.visible).toBe(false);
+        expect(b1.olLayer.getVisible()).toBe(false);
+        expect(eventsb2).toBe(1);
+        expect(b2.visible).toBe(true);
+        expect(b2.olLayer.getVisible()).toBe(true);
+        expect(eventsb3).toBe(1);
+        expect(b3.visible).toBe(false);
+        expect(b3.olLayer.getVisible()).toBe(false);
+
+        // switch to empty basemap as fallback
+        b2source.setState("error");
+        expect(layers.getActiveBaseLayer()).toBe(undefined);
+        expect(eventsLayers).toBe(2);
+        expect(eventsb1).toBe(1); // nothing changed
+        expect(b1.visible).toBe(false);
+        expect(b1.olLayer.getVisible()).toBe(false);
+        expect(eventsb2).toBe(2); // change event
+        expect(b2.visible).toBe(false);
+        expect(b2.olLayer.getVisible()).toBe(false);
+        expect(eventsb3).toBe(1);
+        expect(b3.visible).toBe(false);
+        expect(b3.olLayer.getVisible()).toBe(false);
+    });
+
     it("supports removal of base layers", async () => {
         model = await createMapModel("foo", {
             layers: [

From 1ae96588c77e8b88b69d19028311501d24778fac Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 18:45:56 +0100
Subject: [PATCH 36/60] Add class names in LayerList

---
 src/packages/toc/LayerList.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index aa508c371..815e35990 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -104,9 +104,18 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
                     {title}
                 </Checkbox>
                 {!isAvailable && (
-                    <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
+                    <Tooltip
+                        className="toc-layer-item-content-tooltip"
+                        label={notAvailableLabel}
+                        placement="right"
+                        openDelay={500}
+                    >
                         <span>
-                            <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
+                            <FiAlertTriangle
+                                className="toc-layer-item-content-icon"
+                                color={"red"}
+                                aria-label={notAvailableLabel}
+                            />
                         </span>
                     </Tooltip>
                 )}

From c4d5bee7e4c45cd39a6befafdcbbc79290f0fffe Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 18:46:49 +0100
Subject: [PATCH 37/60] Add tests for LayerList changes of load state

---
 src/packages/toc/LayerList.test.tsx | 59 ++++++++++++++++++++++++++++-
 1 file changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/packages/toc/LayerList.test.tsx b/src/packages/toc/LayerList.test.tsx
index 9a234e3a3..cbeafb698 100644
--- a/src/packages/toc/LayerList.test.tsx
+++ b/src/packages/toc/LayerList.test.tsx
@@ -14,9 +14,10 @@ import {
 import userEvent from "@testing-library/user-event";
 import LayerGroup from "ol/layer/Group";
 import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
 import { expect, it } from "vitest";
 import { LayerList } from "./LayerList";
-import { SimpleLayer } from "@open-pioneer/map";
+import { SimpleLayer, WMSLayer } from "@open-pioneer/map";
 
 it("should show layers in the correct order", async () => {
     const { mapId, registry } = await setupMap({
@@ -402,6 +403,62 @@ it("reacts to changes in the layer description", async () => {
     screen.getByText("New description");
 });
 
+it("reacts to changes of the layer load state", async () => {
+    const source = new OSM();
+
+    const { mapId, registry } = await setupMap({
+        layers: [
+            {
+                id: "layer1",
+                title: "Layer 1",
+                description: "Description 1",
+                olLayer: new TileLayer({
+                    source: source
+                })
+            }
+        ]
+    });
+    const map = await registry.expectMapModel(mapId);
+    const layer = map.layers.getLayerById("layer1");
+
+    const { container } = render(
+        <PackageContextProvider>
+            <LayerList map={map} />
+        </PackageContextProvider>
+    );
+
+    const checkbox = queryByRole<HTMLInputElement>(container, "checkbox")!;
+    const button = queryByRole<HTMLInputElement>(container, "button");
+    let icons = container.querySelectorAll(".toc-layer-item-content-icon");
+
+    expect(checkbox).toBeTruthy();
+    expect(checkbox.disabled).toBe(false);
+    expect(layer?.visible).toBe(true);
+    expect(button?.disabled).toBe(false);
+    expect(icons).toHaveLength(0);
+
+    act(() => {
+        source.setState("error");
+    });
+
+    icons = container.querySelectorAll(".toc-layer-item-content-icon");
+    expect(checkbox.disabled).toBe(true);
+    expect(layer?.visible).toBe(false);
+    expect(button?.disabled).toBe(true);
+    expect(icons).toHaveLength(1);
+
+    // and back
+    act(() => {
+        source.setState("ready");
+    });
+
+    icons = container.querySelectorAll(".toc-layer-item-content-icon");
+    expect(checkbox.disabled).toBe(false);
+    expect(layer?.visible).toBe(false); // make the layer visible again manually
+    expect(button?.disabled).toBe(false);
+    expect(icons).toHaveLength(0);
+});
+
 /** Returns the layer list's current list items. */
 function getCurrentItems(container: HTMLElement) {
     return queryAllByRole(container, "listitem");

From cb566b8854e638d78d02cc33bb968f10c2c26249 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 18:58:06 +0100
Subject: [PATCH 38/60] Add tests for BasemapSwitcher: empty basemap not per
 default

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 177 ++++++++++++++++--
 1 file changed, 161 insertions(+), 16 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 8bd181c7d..9d68838ff 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -276,6 +276,151 @@ it("should allow selecting 'no basemap' when enabled", async () => {
     expect(map.layers.getActiveBaseLayer()).toBe(undefined);
 });
 
+it("should not allow selecting 'no basemap' by default", async () => {
+    const { mapId, registry } = await setupMap({
+        layers: defaultBasemapConfig
+    });
+
+    const map = await registry.expectMapModel(mapId);
+    const injectedServices = createServiceOptions({ registry });
+    render(
+        <PackageContextProvider services={injectedServices}>
+            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+        </PackageContextProvider>
+    );
+
+    // basemap switcher is mounted
+    const { switcherSelect } = await waitForBasemapSwitcher();
+
+    expect(switcherSelect.textContent).toBe("OSM");
+    expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
+
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
+    expect(switcherSelect).toMatchInlineSnapshot(`
+      <div
+        class="basemap-switcher-select css-79elbk"
+        data-theme="light"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-6-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
+        >
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-6-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-6-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-6-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-6-listbox"
+        >
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-6-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-6-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
+    const options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    const optionsEmptyBasemap = Array.from(options).filter(
+        (option) => option.textContent === "emptyBasemapLabel"
+    );
+    expect(optionsEmptyBasemap).toHaveLength(0);
+});
+
 it("should successfully select emptyBasemap, if all configured basemaps are configured as not visible", async () => {
     const { mapId, registry } = await setupMap({
         layers: [
@@ -328,7 +473,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-6-live-region"
+          id="react-select-7-live-region"
         />
         <span
           aria-atomic="false"
@@ -352,13 +497,13 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-6-listbox"
+              aria-controls="react-select-7-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-6-listbox"
+              aria-owns="react-select-7-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-6-input"
+              id="react-select-7-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -398,7 +543,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
         <div
           class=" css-ky7590"
           data-theme="light"
-          id="react-select-6-listbox"
+          id="react-select-7-listbox"
         >
           <div
             class=" css-1h5avke"
@@ -409,7 +554,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
               aria-selected="false"
               class="basemap-switcher-option css-e8c6zu"
               data-theme="light"
-              id="react-select-6-option-0"
+              id="react-select-7-option-0"
               role="option"
               tabindex="-1"
             >
@@ -419,7 +564,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
               aria-selected="false"
               class="basemap-switcher-option css-e8c6zu"
               data-theme="light"
-              id="react-select-6-option-1"
+              id="react-select-7-option-1"
               role="option"
               tabindex="-1"
             >
@@ -430,7 +575,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
               class="basemap-switcher-option css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-6-option-2"
+              id="react-select-7-option-2"
               role="option"
               tabindex="-1"
             >
@@ -483,7 +628,7 @@ it("should update when a new basemap is registered", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-7-live-region"
+          id="react-select-8-live-region"
         />
         <span
           aria-atomic="false"
@@ -507,13 +652,13 @@ it("should update when a new basemap is registered", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-7-listbox"
+              aria-controls="react-select-8-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-7-listbox"
+              aria-owns="react-select-8-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-7-input"
+              id="react-select-8-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -553,7 +698,7 @@ it("should update when a new basemap is registered", async () => {
         <div
           class=" css-ky7590"
           data-theme="light"
-          id="react-select-7-listbox"
+          id="react-select-8-listbox"
         >
           <div
             class=" css-1h5avke"
@@ -565,7 +710,7 @@ it("should update when a new basemap is registered", async () => {
               class="basemap-switcher-option css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-7-option-0"
+              id="react-select-8-option-0"
               role="option"
               tabindex="-1"
             >
@@ -575,7 +720,7 @@ it("should update when a new basemap is registered", async () => {
               aria-selected="false"
               class="basemap-switcher-option css-e8c6zu"
               data-theme="light"
-              id="react-select-7-option-1"
+              id="react-select-8-option-1"
               role="option"
               tabindex="-1"
             >
@@ -585,7 +730,7 @@ it("should update when a new basemap is registered", async () => {
               aria-selected="false"
               class="basemap-switcher-option css-e8c6zu"
               data-theme="light"
-              id="react-select-7-option-2"
+              id="react-select-8-option-2"
               role="option"
               tabindex="-1"
             >

From 64c00757ce16bfdebc6f16910e35a0f3a2aa7319 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 19:12:42 +0100
Subject: [PATCH 39/60] Add tests for BasemapSwitcher: fallback to empty
 basemap when layer has error state

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 9d68838ff..b179d097e 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -421,7 +421,10 @@ it("should not allow selecting 'no basemap' by default", async () => {
     expect(optionsEmptyBasemap).toHaveLength(0);
 });
 
-it("should successfully select emptyBasemap, if all configured basemaps are configured as not visible", async () => {
+it("should successfully select emptyBasemap, if all configured basemaps are configured as not visible or have error state", async () => {
+    const b2Source = new BkgTopPlusOpen();
+    b2Source.setState("error");
+
     const { mapId, registry } = await setupMap({
         layers: [
             {
@@ -437,9 +440,9 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
                 id: "b-2",
                 title: "topplus-open",
                 isBaseLayer: true,
-                visible: false,
+                visible: true,
                 olLayer: new TileLayer({
-                    source: new BkgTopPlusOpen()
+                    source: b2Source
                 })
             }
         ]
@@ -561,6 +564,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
               OSM
             </div>
             <div
+              aria-disabled="true"
               aria-selected="false"
               class="basemap-switcher-option css-e8c6zu"
               data-theme="light"
@@ -569,6 +573,43 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
               tabindex="-1"
             >
               topplus-open
+              <div
+                class="css-1v4xcoh"
+                data-theme="light"
+              >
+                <span>
+                  <svg
+                    aria-label="layerNotAvailable"
+                    color="red"
+                    fill="none"
+                    height="1em"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    style="color: red;"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                    />
+                    <line
+                      x1="12"
+                      x2="12"
+                      y1="9"
+                      y2="13"
+                    />
+                    <line
+                      x1="12"
+                      x2="12.01"
+                      y1="17"
+                      y2="17"
+                    />
+                  </svg>
+                </span>
+              </div>
             </div>
             <div
               aria-selected="true"

From c957e9b5a66b34c1b0caf5492796be9c2d0a4f88 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 11 Dec 2023 20:42:30 +0100
Subject: [PATCH 40/60] Add tests for BasemapSwitcher: disable unavailable
 layers for selection and update title

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 584 ++++++++++++++++++
 1 file changed, 584 insertions(+)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index b179d097e..911748fd3 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -891,6 +891,590 @@ describe("should successfully select the correct basemap from basemap switcher",
     });
 });
 
+it("should deactivate unavailable layers for selection", async () => {
+    const source1 = new OSM();
+    const source2 = new BkgTopPlusOpen();
+
+    const { mapId, registry } = await setupMap({
+        layers: [
+            {
+                id: "osm",
+                title: "OSM",
+                isBaseLayer: true,
+                visible: true,
+                olLayer: new TileLayer({
+                    source: source1
+                })
+            },
+            {
+                id: "topplus-open",
+                title: "TopPlus Open",
+                isBaseLayer: true,
+                visible: true,
+                olLayer: new TileLayer({
+                    source: source2
+                })
+            }
+        ]
+    });
+    const map = await registry.expectMapModel(mapId);
+
+    const injectedServices = createServiceOptions({ registry });
+    render(
+        <PackageContextProvider services={injectedServices}>
+            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+        </PackageContextProvider>
+    );
+
+    // basemap switcher is mounted
+    const { switcherSelect } = await waitForBasemapSwitcher();
+
+    let activeBaseLayer = map.layers.getActiveBaseLayer();
+    expect(activeBaseLayer?.id).toBe("osm");
+
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
+    expect(switcherSelect).toMatchInlineSnapshot(`
+      <div
+        class="basemap-switcher-select css-79elbk"
+        data-theme="light"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-12-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
+        >
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-12-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-12-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-12-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-12-listbox"
+        >
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-12-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-12-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+
+    act(() => {
+        source1.setState("error");
+    });
+
+    // switch active layer
+    activeBaseLayer = map.layers.getActiveBaseLayer();
+    expect(activeBaseLayer?.id).toBe("topplus-open");
+
+    // option disabled, warning icon shown and selected option changed?
+    expect(switcherSelect).toMatchInlineSnapshot(`
+      <div
+        class="basemap-switcher-select css-79elbk"
+        data-theme="light"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-12-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
+        >
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              TopPlus Open
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-12-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-12-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-12-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-12-listbox"
+        >
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-disabled="true"
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-12-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+              <div
+                class="css-1v4xcoh"
+                data-theme="light"
+              >
+                <span>
+                  <svg
+                    aria-label="layerNotAvailable"
+                    color="red"
+                    fill="none"
+                    height="1em"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    style="color: red;"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                    />
+                    <line
+                      x1="12"
+                      x2="12"
+                      y1="9"
+                      y2="13"
+                    />
+                    <line
+                      x1="12"
+                      x2="12.01"
+                      y1="17"
+                      y2="17"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-12-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+});
+
+it("should update the ui when a layer title changes", async () => {
+    const { mapId, registry } = await setupMap({
+        layers: [
+            {
+                id: "osm",
+                title: "OSM",
+                isBaseLayer: true,
+                visible: true,
+                olLayer: new TileLayer({
+                    source: new OSM()
+                })
+            },
+            {
+                id: "topplus-open",
+                title: "TopPlus Open",
+                isBaseLayer: true,
+                visible: true,
+                olLayer: new TileLayer({
+                    source: new BkgTopPlusOpen()
+                })
+            }
+        ]
+    });
+    const map = await registry.expectMapModel(mapId);
+
+    const injectedServices = createServiceOptions({ registry });
+    render(
+        <PackageContextProvider services={injectedServices}>
+            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
+        </PackageContextProvider>
+    );
+
+    // basemap switcher is mounted
+    const { switcherSelect } = await waitForBasemapSwitcher();
+
+    const activeBaseLayer = map.layers.getActiveBaseLayer();
+    expect(activeBaseLayer?.id).toBe("osm");
+
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+
+    expect(switcherSelect).toMatchInlineSnapshot(`
+      <div
+        class="basemap-switcher-select css-79elbk"
+        data-theme="light"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-13-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
+        >
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-13-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-13-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-13-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-13-listbox"
+        >
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-13-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              OSM
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-13-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+
+    // change layer title
+    act(() => {
+        activeBaseLayer?.setTitle("New Layer Title");
+    });
+
+    // option disabled, warning icon shown and selected option changed?
+    expect(switcherSelect).toMatchInlineSnapshot(`
+      <div
+        class="basemap-switcher-select css-79elbk"
+        data-theme="light"
+      >
+        <span
+          class="css-1f43avz-a11yText-A11yText"
+          id="react-select-13-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          class="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          class=" css-i2418r"
+          data-theme="light"
+        >
+          <div
+            class=" css-j93siq"
+            data-theme="light"
+          >
+            <div
+              class=" css-1xa1gs2"
+              data-theme="light"
+            >
+              OSM
+            </div>
+            <input
+              aria-autocomplete="list"
+              aria-controls="react-select-13-listbox"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="react-select-13-listbox"
+              aria-readonly="true"
+              class="css-mohuvp-dummyInput-DummyInput"
+              id="react-select-13-input"
+              inputmode="none"
+              role="combobox"
+              tabindex="0"
+              value=""
+            />
+          </div>
+          <div
+            class=" css-hfbj6y"
+            data-theme="light"
+          >
+            <hr
+              aria-orientation="vertical"
+              class="chakra-divider css-1i6c5ox"
+              data-theme="light"
+            />
+            <div
+              aria-hidden="true"
+              class=" css-xq12md"
+              data-theme="light"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                data-theme="light"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class=" css-ky7590"
+          data-theme="light"
+          id="react-select-13-listbox"
+        >
+          <div
+            class=" css-1h5avke"
+            data-theme="light"
+            role="listbox"
+          >
+            <div
+              aria-selected="true"
+              class="basemap-switcher-option css-e8c6zu"
+              data-focus="true"
+              data-theme="light"
+              id="react-select-13-option-0"
+              role="option"
+              tabindex="-1"
+            >
+              New Layer Title
+            </div>
+            <div
+              aria-selected="false"
+              class="basemap-switcher-option css-e8c6zu"
+              data-theme="light"
+              id="react-select-13-option-1"
+              role="option"
+              tabindex="-1"
+            >
+              TopPlus Open
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+});
+
 async function waitForBasemapSwitcher() {
     const { switcherDiv, switcherSelect } = await waitFor(async () => {
         const switcherDiv: HTMLDivElement | null =

From ff2787f6ded280fb69b9285f4ce8adf3b6e5f456 Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 12 Dec 2023 11:30:12 +0100
Subject: [PATCH 41/60] Code review: wrap a few pieces with useMemo() and
 provide detailed css classes

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 182 +++++++++---------
 .../basemap-switcher/BasemapSwitcher.tsx      |  47 +++--
 .../BasemapSwitcher.test.tsx.snap             |  20 +-
 .../toc/__snapshots__/Toc.test.tsx.snap       |  20 +-
 4 files changed, 141 insertions(+), 128 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 911748fd3..53fe5ac1d 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -141,7 +141,7 @@ it("should allow selecting 'no basemap' when enabled", async () => {
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -155,15 +155,15 @@ it("should allow selecting 'no basemap' when enabled", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -184,17 +184,17 @@ it("should allow selecting 'no basemap' when enabled", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -214,18 +214,18 @@ it("should allow selecting 'no basemap' when enabled", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-5-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-5-option-0"
@@ -236,7 +236,7 @@ it("should allow selecting 'no basemap' when enabled", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-5-option-1"
               role="option"
@@ -246,7 +246,7 @@ it("should allow selecting 'no basemap' when enabled", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-5-option-2"
               role="option"
@@ -302,7 +302,7 @@ it("should not allow selecting 'no basemap' by default", async () => {
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -316,15 +316,15 @@ it("should not allow selecting 'no basemap' by default", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -345,17 +345,17 @@ it("should not allow selecting 'no basemap' by default", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -375,18 +375,18 @@ it("should not allow selecting 'no basemap' by default", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-6-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-6-option-0"
@@ -397,7 +397,7 @@ it("should not allow selecting 'no basemap' by default", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-6-option-1"
               role="option"
@@ -471,7 +471,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -485,15 +485,15 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               emptyBasemapLabel
@@ -514,17 +514,17 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -544,18 +544,18 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-7-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-7-option-0"
               role="option"
@@ -566,7 +566,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
             <div
               aria-disabled="true"
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-disabled css-e8c6zu"
               data-theme="light"
               id="react-select-7-option-1"
               role="option"
@@ -613,7 +613,7 @@ it("should successfully select emptyBasemap, if all configured basemaps are conf
             </div>
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-7-option-2"
@@ -664,7 +664,7 @@ it("should update when a new basemap is registered", async () => {
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -678,15 +678,15 @@ it("should update when a new basemap is registered", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -707,17 +707,17 @@ it("should update when a new basemap is registered", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -737,18 +737,18 @@ it("should update when a new basemap is registered", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-8-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-8-option-0"
@@ -759,7 +759,7 @@ it("should update when a new basemap is registered", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-8-option-1"
               role="option"
@@ -769,7 +769,7 @@ it("should update when a new basemap is registered", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-8-option-2"
               role="option"
@@ -939,7 +939,7 @@ it("should deactivate unavailable layers for selection", async () => {
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -953,15 +953,15 @@ it("should deactivate unavailable layers for selection", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -982,17 +982,17 @@ it("should deactivate unavailable layers for selection", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -1012,18 +1012,18 @@ it("should deactivate unavailable layers for selection", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-12-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-12-option-0"
@@ -1034,7 +1034,7 @@ it("should deactivate unavailable layers for selection", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-12-option-1"
               role="option"
@@ -1058,7 +1058,7 @@ it("should deactivate unavailable layers for selection", async () => {
     // option disabled, warning icon shown and selected option changed?
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -1072,15 +1072,15 @@ it("should deactivate unavailable layers for selection", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               TopPlus Open
@@ -1101,17 +1101,17 @@ it("should deactivate unavailable layers for selection", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -1131,19 +1131,19 @@ it("should deactivate unavailable layers for selection", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-12-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-disabled="true"
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-12-option-0"
@@ -1191,7 +1191,7 @@ it("should deactivate unavailable layers for selection", async () => {
             </div>
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-selected css-e8c6zu"
               data-theme="light"
               id="react-select-12-option-1"
               role="option"
@@ -1250,7 +1250,7 @@ it("should update the ui when a layer title changes", async () => {
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -1264,15 +1264,15 @@ it("should update the ui when a layer title changes", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -1293,17 +1293,17 @@ it("should update the ui when a layer title changes", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -1323,18 +1323,18 @@ it("should update the ui when a layer title changes", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-13-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-13-option-0"
@@ -1345,7 +1345,7 @@ it("should update the ui when a layer title changes", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-13-option-1"
               role="option"
@@ -1366,7 +1366,7 @@ it("should update the ui when a layer title changes", async () => {
     // option disabled, warning icon shown and selected option changed?
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -1380,15 +1380,15 @@ it("should update the ui when a layer title changes", async () => {
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               OSM
@@ -1409,17 +1409,17 @@ it("should update the ui when a layer title changes", async () => {
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -1439,18 +1439,18 @@ it("should update the ui when a layer title changes", async () => {
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-13-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-13-option-0"
@@ -1461,7 +1461,7 @@ it("should update the ui when a layer title changes", async () => {
             </div>
             <div
               aria-selected="false"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-13-option-1"
               role="option"
diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 701d1784d..d1c9a3596 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -3,7 +3,7 @@
 import { Box, Tooltip } from "@open-pioneer/chakra-integration";
 import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
-import { FC, useCallback, useRef, useSyncExternalStore } from "react";
+import { FC, useCallback, useMemo, useRef, useSyncExternalStore } from "react";
 import { Select, OptionProps, chakraComponents } from "chakra-react-select";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
 import { FiAlertTriangle } from "react-icons/fi";
@@ -83,19 +83,33 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
         map?.layers.activateBaseLayer(layerId === NO_BASEMAP_ID ? undefined : layerId);
     };
 
-    const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };
-    const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {
-        return { value: layer.id, layer: layer };
-    });
+    const { options, selectedLayer } = useMemo(() => {
+        const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };
+        const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {
+            return { value: layer.id, layer: layer };
+        });
+
+        const defaultLayer = options.find(
+            (option) =>
+                option.layer !== undefined &&
+                option.layer.visible &&
+                option.layer.loadState !== "error"
+        );
+        if (allowSelectingEmptyBasemap || defaultLayer == undefined) {
+            options.push(emptyOption);
+        }
 
-    const defaultLayer = options.find(
-        (option) =>
-            option.layer !== undefined && option.layer.visible && option.layer.loadState !== "error"
-    );
-    if (allowSelectingEmptyBasemap || defaultLayer == undefined) {
-        options.push(emptyOption);
-    }
-    const selectedLayer: SelectOption = defaultLayer === undefined ? emptyOption : defaultLayer;
+        // TODO: I think the selected option chosen here can be inconsistent with the actually activated base map.
+        // It would be smarter to always use the activated basemap here, and have the correct logic in the map model.
+        const selectedLayer: SelectOption = defaultLayer === undefined ? emptyOption : defaultLayer;
+        return { options, selectedLayer };
+    }, [allowSelectingEmptyBasemap, baseLayers]);
+
+    const components = useMemo(() => {
+        return {
+            Option: BasemapSelectOption
+        };
+    }, []);
 
     return (
         <Box {...containerProps}>
@@ -104,6 +118,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     aria-label={ariaLabel}
                     aria-labelledby={ariaLabelledBy}
                     className="basemap-switcher-select"
+                    classNamePrefix="react-select"
                     value={selectedLayer}
                     onChange={(option) => option && activateLayer(option.value)}
                     isClearable={false}
@@ -112,12 +127,10 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                         option.layer !== undefined ? option.layer.title : emptyBasemapLabel
                     }
                     isOptionDisabled={(option) => option?.layer?.loadState === "error"}
-                    components={{ Option: BasemapSelectOption }}
+                    components={components}
                     options={options}
                 />
-            ) : (
-                ""
-            )}
+            ) : null}
         </Box>
     );
 };
diff --git a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
index 50ae469c3..12d2c598f 100644
--- a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
+++ b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`should successfully create a basemap switcher component 1`] = `
   data-theme="light"
 >
   <div
-    class="basemap-switcher-select css-79elbk"
+    class="basemap-switcher-select react-select--has-value css-79elbk"
     data-theme="light"
   >
     <span
@@ -21,15 +21,15 @@ exports[`should successfully create a basemap switcher component 1`] = `
       class="css-1f43avz-a11yText-A11yText"
     />
     <div
-      class=" css-i2418r"
+      class="react-select__control react-select__control--menu-is-open css-i2418r"
       data-theme="light"
     >
       <div
-        class=" css-j93siq"
+        class="react-select__value-container react-select__value-container--has-value css-j93siq"
         data-theme="light"
       >
         <div
-          class=" css-1xa1gs2"
+          class="react-select__single-value css-1xa1gs2"
           data-theme="light"
         >
           emptyBasemapLabel
@@ -50,17 +50,17 @@ exports[`should successfully create a basemap switcher component 1`] = `
         />
       </div>
       <div
-        class=" css-hfbj6y"
+        class="react-select__indicators css-hfbj6y"
         data-theme="light"
       >
         <hr
           aria-orientation="vertical"
-          class="chakra-divider css-1i6c5ox"
+          class="chakra-divider react-select__indicator-separator css-1i6c5ox"
           data-theme="light"
         />
         <div
           aria-hidden="true"
-          class=" css-xq12md"
+          class="react-select__indicator react-select__dropdown-indicator css-xq12md"
           data-theme="light"
         >
           <svg
@@ -80,18 +80,18 @@ exports[`should successfully create a basemap switcher component 1`] = `
       </div>
     </div>
     <div
-      class=" css-ky7590"
+      class="react-select__menu css-ky7590"
       data-theme="light"
       id="react-select-2-listbox"
     >
       <div
-        class=" css-1h5avke"
+        class="react-select__menu-list css-1h5avke"
         data-theme="light"
         role="listbox"
       >
         <div
           aria-selected="true"
-          class="basemap-switcher-option css-e8c6zu"
+          class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
           data-focus="true"
           data-theme="light"
           id="react-select-2-option-0"
diff --git a/src/packages/toc/__snapshots__/Toc.test.tsx.snap b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
index 03daf2ba7..a144e76e0 100644
--- a/src/packages/toc/__snapshots__/Toc.test.tsx.snap
+++ b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`should successfully create a toc component 1`] = `
       data-theme="light"
     >
       <div
-        class="basemap-switcher-select css-79elbk"
+        class="basemap-switcher-select react-select--has-value css-79elbk"
         data-theme="light"
       >
         <span
@@ -36,15 +36,15 @@ exports[`should successfully create a toc component 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class=" css-i2418r"
+          class="react-select__control react-select__control--menu-is-open css-i2418r"
           data-theme="light"
         >
           <div
-            class=" css-j93siq"
+            class="react-select__value-container react-select__value-container--has-value css-j93siq"
             data-theme="light"
           >
             <div
-              class=" css-1xa1gs2"
+              class="react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
               Base layer
@@ -66,17 +66,17 @@ exports[`should successfully create a toc component 1`] = `
             />
           </div>
           <div
-            class=" css-hfbj6y"
+            class="react-select__indicators css-hfbj6y"
             data-theme="light"
           >
             <hr
               aria-orientation="vertical"
-              class="chakra-divider css-1i6c5ox"
+              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
               data-theme="light"
             />
             <div
               aria-hidden="true"
-              class=" css-xq12md"
+              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
               data-theme="light"
             >
               <svg
@@ -96,18 +96,18 @@ exports[`should successfully create a toc component 1`] = `
           </div>
         </div>
         <div
-          class=" css-ky7590"
+          class="react-select__menu css-ky7590"
           data-theme="light"
           id="react-select-2-listbox"
         >
           <div
-            class=" css-1h5avke"
+            class="react-select__menu-list css-1h5avke"
             data-theme="light"
             role="listbox"
           >
             <div
               aria-selected="true"
-              class="basemap-switcher-option css-e8c6zu"
+              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-2-option-0"

From fc70ecb89dabbbcfb59162ccf9698e9a423a3dfb Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 12 Dec 2023 12:08:34 +0100
Subject: [PATCH 42/60] Simplify tests a bit

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 115 ++++++++----------
 1 file changed, 49 insertions(+), 66 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 53fe5ac1d..9126a5312 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -40,10 +40,7 @@ it("should successfully create a basemap switcher component", async () => {
 
     // basemap switcher is mounted
     const { switcherDiv, switcherSelect } = await waitForBasemapSwitcher();
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
+    showDropdown(switcherSelect);
     expect(switcherDiv).toMatchSnapshot();
 
     // check basemap switcher box and select is available
@@ -86,30 +83,26 @@ it("should successfully select a basemap from basemap switcher", async () => {
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
+    showDropdown(switcherSelect);
 
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-    let options = switcherSelect.getElementsByClassName("basemap-switcher-option");
-    const optionsOsm = Array.from(options).filter((option) => option.textContent === "OSM");
-    if (!optionsOsm[0]) {
+    let options = getCurrentOptions(switcherSelect);
+    const osmOption = options.find((option) => option.textContent === "OSM");
+    if (!osmOption) {
         throw new Error("Layer OSM missing in basemap options");
     }
-    await user.click(optionsOsm[0]);
+    await user.click(osmOption);
+
     const firstActiveBaseLayer = map.layers.getActiveBaseLayer();
     expect(firstActiveBaseLayer?.id).toBe("osm");
 
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-    options = switcherSelect.getElementsByClassName("basemap-switcher-option");
-    const optionsTopPlus = Array.from(options).filter(
-        (option) => option.textContent === "TopPlus Open"
-    );
-    if (!optionsTopPlus[0]) {
+    showDropdown(switcherSelect);
+    options = getCurrentOptions(switcherSelect);
+    const topPlusOption = options.find((option) => option.textContent === "TopPlus Open");
+    if (!topPlusOption) {
         throw new Error("Layer topplus-open missing in basemap options");
     }
-    await user.click(optionsTopPlus[0]);
+    await user.click(topPlusOption);
+
     const nextActiveBaseLayer = map.layers.getActiveBaseLayer();
     expect(nextActiveBaseLayer?.id).toBe("topplus-open");
 });
@@ -133,11 +126,7 @@ it("should allow selecting 'no basemap' when enabled", async () => {
 
     expect(switcherSelect.textContent).toBe("OSM");
     expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
-
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
+    showDropdown(switcherSelect);
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
@@ -259,18 +248,13 @@ it("should allow selecting 'no basemap' when enabled", async () => {
       </div>
     `);
 
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-
-    const options = switcherSelect.getElementsByClassName("basemap-switcher-option");
-    const optionsBasemap = Array.from(options).filter(
-        (option) => option.textContent === "emptyBasemapLabel"
-    );
-    if (!optionsBasemap[0]) {
+    showDropdown(switcherSelect);
+    const options = getCurrentOptions(switcherSelect);
+    const optionsBasemap = options.find((option) => option.textContent === "emptyBasemapLabel");
+    if (!optionsBasemap) {
         throw new Error("Layer Basemap missing in basemap options");
     }
-    await user.click(optionsBasemap[0]);
+    await user.click(optionsBasemap);
 
     expect(switcherSelect.textContent).toBe("emptyBasemapLabel");
     expect(map.layers.getActiveBaseLayer()).toBe(undefined);
@@ -295,10 +279,7 @@ it("should not allow selecting 'no basemap' by default", async () => {
     expect(switcherSelect.textContent).toBe("OSM");
     expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
 
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
+    showDropdown(switcherSelect);
 
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
@@ -410,17 +391,15 @@ it("should not allow selecting 'no basemap' by default", async () => {
       </div>
     `);
 
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-
-    const options = switcherSelect.getElementsByClassName("basemap-switcher-option");
-    const optionsEmptyBasemap = Array.from(options).filter(
+    showDropdown(switcherSelect);
+    const options = getCurrentOptions(switcherSelect);
+    const optionsEmptyBasemap = options.filter(
         (option) => option.textContent === "emptyBasemapLabel"
     );
     expect(optionsEmptyBasemap).toHaveLength(0);
 });
 
+// TODO: This behavior should be tested in the map model (-> the switcher is only concerned with the current base map, and the map model selects a "working" one)
 it("should successfully select emptyBasemap, if all configured basemaps are configured as not visible or have error state", async () => {
     const b2Source = new BkgTopPlusOpen();
     b2Source.setState("error");
@@ -643,10 +622,9 @@ it("should update when a new basemap is registered", async () => {
 
     // basemap switcher is mounted
     const { switcherSelect } = await waitForBasemapSwitcher();
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-    let options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    showDropdown(switcherSelect);
+
+    let options = getCurrentOptions(switcherSelect);
     expect(options.length).toBe(2);
 
     act(() => {
@@ -659,7 +637,7 @@ it("should update when a new basemap is registered", async () => {
         map.layers.addLayer(layer);
     });
 
-    options = switcherSelect.getElementsByClassName("basemap-switcher-option");
+    options = getCurrentOptions(switcherSelect);
     expect(options.length).toBe(3);
 
     expect(switcherSelect).toMatchInlineSnapshot(`
@@ -892,8 +870,8 @@ describe("should successfully select the correct basemap from basemap switcher",
 });
 
 it("should deactivate unavailable layers for selection", async () => {
-    const source1 = new OSM();
-    const source2 = new BkgTopPlusOpen();
+    const osmSource = new OSM();
+    const topPlusSource = new BkgTopPlusOpen();
 
     const { mapId, registry } = await setupMap({
         layers: [
@@ -903,7 +881,7 @@ it("should deactivate unavailable layers for selection", async () => {
                 isBaseLayer: true,
                 visible: true,
                 olLayer: new TileLayer({
-                    source: source1
+                    source: osmSource
                 })
             },
             {
@@ -912,7 +890,7 @@ it("should deactivate unavailable layers for selection", async () => {
                 isBaseLayer: true,
                 visible: true,
                 olLayer: new TileLayer({
-                    source: source2
+                    source: topPlusSource
                 })
             }
         ]
@@ -932,11 +910,7 @@ it("should deactivate unavailable layers for selection", async () => {
     let activeBaseLayer = map.layers.getActiveBaseLayer();
     expect(activeBaseLayer?.id).toBe("osm");
 
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-
+    showDropdown(switcherSelect);
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
         class="basemap-switcher-select react-select--has-value css-79elbk"
@@ -1048,7 +1022,7 @@ it("should deactivate unavailable layers for selection", async () => {
     `);
 
     act(() => {
-        source1.setState("error");
+        osmSource.setState("error");
     });
 
     // switch active layer
@@ -1243,11 +1217,7 @@ it("should update the ui when a layer title changes", async () => {
     const activeBaseLayer = map.layers.getActiveBaseLayer();
     expect(activeBaseLayer?.id).toBe("osm");
 
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-
+    showDropdown(switcherSelect);
     expect(switcherSelect).toMatchInlineSnapshot(`
       <div
         class="basemap-switcher-select react-select--has-value css-79elbk"
@@ -1475,6 +1445,19 @@ it("should update the ui when a layer title changes", async () => {
     `);
 });
 
+function showDropdown(switcherSelect: HTMLElement) {
+    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
+    act(() => {
+        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
+    });
+}
+
+function getCurrentOptions(switcherSelect: HTMLElement) {
+    return Array.from(
+        switcherSelect.getElementsByClassName("basemap-switcher-option")
+    ) as HTMLElement[];
+}
+
 async function waitForBasemapSwitcher() {
     const { switcherDiv, switcherSelect } = await waitFor(async () => {
         const switcherDiv: HTMLDivElement | null =
@@ -1483,7 +1466,7 @@ async function waitForBasemapSwitcher() {
             throw new Error("basemap switcher not rendered");
         }
 
-        const switcherSelect: HTMLSelectElement | null = switcherDiv.querySelector(
+        const switcherSelect: HTMLElement | null = switcherDiv.querySelector(
             ".basemap-switcher-select"
         );
         if (!switcherSelect) {

From c6c3e1262f2b8c7c7dbdfd3232b36ac9dc5bd24d Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 12 Dec 2023 13:31:56 +0100
Subject: [PATCH 43/60] Improve tests a bit

---
 src/packages/map/api/layers/base.ts          |  10 +-
 src/packages/map/model/AbstractLayer.test.ts | 161 +++++++++++--------
 src/packages/map/model/AbstractLayer.ts      |  60 ++++---
 src/packages/toc/LayerList.test.tsx          |   2 +-
 src/packages/toc/LayerList.tsx               |  17 +-
 5 files changed, 143 insertions(+), 107 deletions(-)

diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index 70f29b91a..01ca4ce6c 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -4,7 +4,6 @@ import type { EventSource } from "@open-pioneer/core";
 import type OlBaseLayer from "ol/layer/Base";
 import type { MapModel } from "../MapModel";
 import type { LayerRetrievalOptions } from "../shared";
-import { SimpleLayerConfig } from "./SimpleLayer";
 
 /** Events emitted by the {@link Layer} and other layer types. */
 export interface LayerBaseEvents {
@@ -19,8 +18,9 @@ export interface LayerBaseEvents {
 
 /** The load state of a layer. */
 export type LayerLoadState = "not-loaded" | "loading" | "loaded" | "error";
-/** Custom function to check the state of a layer and returning a {@link LayerLoadState} */
-export type HealthCheckFunction = (config: SimpleLayerConfig) => Promise<LayerLoadState>;
+
+/** Custom function to check the state of a layer and returning a "loaded" or "error". */
+export type HealthCheckFunction = (layer: LayerConfig) => Promise<"loaded" | "error">;
 
 /**
  * Configuration options supported by all layer types (layers and sublayers).
@@ -145,8 +145,8 @@ export interface LayerConfig extends LayerBaseConfig {
 
     /**
      * Optional to check the availability of the layer. It is possible to provide
-     * * either a URL which indicates the state of the service
-     * * or a {@link HealthCheckFunction} performing a custom check and returning the state
+     * either a URL which indicates the state of the service
+     * or a {@link HealthCheckFunction} performing a custom check and returning the state
      */
     healthCheck?: string | HealthCheckFunction;
 }
diff --git a/src/packages/map/model/AbstractLayer.test.ts b/src/packages/map/model/AbstractLayer.test.ts
index 1c15f3b88..9a94676fb 100644
--- a/src/packages/map/model/AbstractLayer.test.ts
+++ b/src/packages/map/model/AbstractLayer.test.ts
@@ -5,10 +5,10 @@
  */
 import Layer from "ol/layer/Layer";
 import TileLayer from "ol/layer/Tile";
-import Source from "ol/source/Source";
 import { SpyInstance, afterEach, describe, expect, it, vi } from "vitest";
-import { HealthCheckFunction, SimpleLayerConfig } from "../api";
+import { HealthCheckFunction, LayerConfig, SimpleLayerConfig } from "../api";
 import { AbstractLayer } from "./AbstractLayer";
+import Source, { State } from "ol/source/Source";
 
 afterEach(() => {
     vi.restoreAllMocks();
@@ -164,21 +164,11 @@ describe("performs a health check", () => {
                 status: 200
             })
         );
-        const testUrl = "http://example.org/health";
-
-        const source = new Source({
-            state: "ready"
-        });
-        const olLayer = new Layer({
-            source
-        });
 
-        const layer = createLayer({
-            id: "a",
-            title: "A",
-            visible: true,
-            olLayer: olLayer,
-            healthCheck: testUrl
+        const testUrl = "http://example.org/health";
+        const { layer } = createLayerWithHealthCheck({
+            healthCheck: testUrl,
+            sourceState: "ready"
         });
 
         let eventEmitted = 0;
@@ -198,6 +188,7 @@ describe("performs a health check", () => {
     });
 
     it("when specified as URL, fail", async () => {
+        const mockedWarn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
         const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
         mockedFetch.mockResolvedValue(
             new Response("", {
@@ -206,19 +197,9 @@ describe("performs a health check", () => {
         );
         const testUrl = "http://example.org/health";
 
-        const source = new Source({
-            state: "ready"
-        });
-        const olLayer = new Layer({
-            source
-        });
-
-        const layer = createLayer({
-            id: "a",
-            title: "A",
-            visible: true,
-            olLayer: olLayer,
-            healthCheck: testUrl
+        const { layer } = createLayerWithHealthCheck({
+            healthCheck: testUrl,
+            sourceState: "ready"
         });
 
         let eventEmitted = 0;
@@ -236,6 +217,14 @@ describe("performs a health check", () => {
         expect(layer.loadState).toBe("error");
         expect(layer.visible).toBe(false);
         expect(eventEmitted).toBe(1);
+
+        expect(mockedWarn.mock.calls).toMatchInlineSnapshot(`
+          [
+            [
+              "[WARN] map:AbstractLayer: Health check failed for layer 'a' (http status 404)",
+            ],
+          ]
+        `);
     });
 
     it("when specified as function", async () => {
@@ -253,27 +242,17 @@ describe("performs a health check", () => {
         };
         const mockedCustomHealthCheck = vi.fn(customHealthCheck);
 
-        const source = new Source({
-            state: "ready"
-        });
-        const olLayer = new Layer({
-            source
-        });
-        const layerConfig: SimpleLayerConfig = {
-            id: "a",
-            title: "A",
-            visible: true,
-            olLayer: olLayer,
+        const { layer, config } = createLayerWithHealthCheck({
+            sourceState: "ready",
             healthCheck: mockedCustomHealthCheck
-        };
-        const layer = createLayer(layerConfig);
+        });
 
         let eventEmitted = 0;
         layer.on("changed:loadState", () => eventEmitted++);
 
         expect(mockedFetch).toHaveBeenCalledTimes(0);
         expect(mockedCustomHealthCheck).toHaveBeenCalledOnce();
-        expect(mockedCustomHealthCheck).toHaveBeenCalledWith(layerConfig);
+        expect(mockedCustomHealthCheck).toHaveBeenCalledWith(config);
         expect(layer.olLayer.getSourceState()).toBe("ready");
         expect(eventEmitted).toBe(0);
         expect(layer.loadState).toBe("loaded");
@@ -289,21 +268,55 @@ describe("performs a health check", () => {
         expect(layer.visible).toBe(false);
     });
 
-    it("not when no health check specified in layer config", async () => {
-        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+    it("when specified as function returning 'loaded'", async () => {
+        const _mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        const customHealthCheck: HealthCheckFunction = async () => {
+            return "loaded";
+        };
+        const mockedCustomHealthCheck = vi.fn(customHealthCheck);
 
-        const source = new Source({
-            state: "ready"
+        const { layer } = createLayerWithHealthCheck({
+            sourceState: "ready",
+            healthCheck: mockedCustomHealthCheck
         });
-        const olLayer = new Layer({
-            source
+
+        await sleep(25);
+        expect(mockedCustomHealthCheck).toHaveBeenCalledOnce();
+        expect(layer.loadState).toBe("loaded");
+    });
+
+    it("when specified as function throwing an error", async () => {
+        const mockedWarn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+        const _mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        const customHealthCheck: HealthCheckFunction = async () => {
+            throw new Error("broken!");
+        };
+        const mockedCustomHealthCheck = vi.fn(customHealthCheck);
+
+        const { layer } = createLayerWithHealthCheck({
+            sourceState: "ready",
+            healthCheck: mockedCustomHealthCheck
         });
 
-        const layer = createLayer({
-            id: "a",
-            title: "A",
-            visible: true,
-            olLayer: olLayer
+        await sleep(25);
+        expect(mockedCustomHealthCheck).toHaveBeenCalledOnce();
+        expect(layer.loadState).toBe("error");
+
+        expect(mockedWarn.mock.calls).toMatchInlineSnapshot(`
+          [
+            [
+              "[WARN] map:AbstractLayer: Health check failed for layer 'a'",
+              [Error: broken!],
+            ],
+          ]
+        `);
+    });
+
+    it("not when no health check specified in layer config", async () => {
+        const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
+        const { layer } = createLayerWithHealthCheck({
+            healthCheck: undefined,
+            sourceState: "ready"
         });
 
         let eventEmitted = 0;
@@ -318,20 +331,9 @@ describe("performs a health check", () => {
 
     it("not when ol layer state already is error", async () => {
         const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
-
-        const source = new Source({
-            state: "error"
-        });
-        const olLayer = new Layer({
-            source
-        });
-
-        const layer = createLayer({
-            id: "a",
-            title: "A",
-            visible: true,
-            olLayer: olLayer,
-            healthCheck: "http://example.org/health"
+        const { layer } = createLayerWithHealthCheck({
+            healthCheck: "http://example.org/health",
+            sourceState: "error"
         });
 
         let eventEmitted = 0;
@@ -357,6 +359,29 @@ function createLayer(layerConfig: SimpleLayerConfig): AbstractLayer {
     return new LayerImpl(layerConfig);
 }
 
+function createLayerWithHealthCheck(options?: {
+    healthCheck?: LayerConfig["healthCheck"];
+    sourceState?: State;
+}) {
+    const source = new Source({
+        state: options?.sourceState ?? "ready"
+    });
+    const olLayer = new Layer({
+        source
+    });
+    const config: SimpleLayerConfig = {
+        id: "a",
+        title: "A",
+        visible: true,
+        olLayer: olLayer,
+        healthCheck: options?.healthCheck
+    };
+
+    const layer = createLayer(config);
+
+    return { layer, source, config };
+}
+
 function sleep(ms: number) {
     return new Promise<void>((resolve) => {
         setTimeout(resolve, ms);
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index e5848d2d6..4b5b10716 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -36,6 +36,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
         this.#healthCheck = config.healthCheck;
 
         const { initial: initialState, resource: stateWatchResource } = watchLoadState(
+            this.id,
             config,
             (state) => {
                 this.#loadState = state;
@@ -113,28 +114,8 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
     }
 }
 
-function healthCheck(config: SimpleLayerConfig): Promise<LayerLoadState> {
-    return new Promise((resolve, reject) => {
-        if (!("healthCheck" in config)) {
-            resolve("loaded");
-        }
-
-        if (typeof config.healthCheck === "function") {
-            config.healthCheck(config).then((result) => resolve(result));
-        } else if (typeof config.healthCheck === "string") {
-            // TODO replace by fetch from HttpService
-            fetch(config.healthCheck)
-                .then((response) => {
-                    response.ok ? resolve("loaded") : resolve("error");
-                })
-                .catch(() => resolve("error"));
-        } else {
-            reject();
-        }
-    });
-}
-
 function watchLoadState(
+    layerId: string,
     config: SimpleLayerConfig,
     onChange: (newState: LayerLoadState) => void
 ): { initial: LayerLoadState; resource: Resource } {
@@ -161,7 +142,7 @@ function watchLoadState(
     // custom health check not needed when OL already returning an error state
     if (currentOlLayerState !== "error") {
         // health check only once during initialization
-        healthCheck(config).then((state: LayerLoadState) => {
+        healthCheck(layerId, config).then((state: LayerLoadState) => {
             currentHealthState = state;
             updateState();
         });
@@ -206,6 +187,41 @@ function watchLoadState(
     };
 }
 
+async function healthCheck(layerId: string, config: SimpleLayerConfig): Promise<LayerLoadState> {
+    const healthCheck = config.healthCheck;
+    if (healthCheck == null) {
+        return "loaded";
+    }
+
+    let healthCheckFn: HealthCheckFunction;
+    if (typeof healthCheck === "function") {
+        healthCheckFn = healthCheck;
+    } else if (typeof healthCheck === "string") {
+        healthCheckFn = async () => {
+            // TODO replace by fetch from HttpService
+            const response = await fetch(healthCheck);
+            if (response.ok) {
+                return "loaded";
+            }
+            LOG.warn(`Health check failed for layer '${layerId}' (http status ${response.status})`);
+            return "error";
+        };
+    } else {
+        LOG.error(
+            `Unexpected object for 'healthCheck' parameter of layer '${layerId}'`,
+            healthCheck
+        );
+        return "error";
+    }
+
+    try {
+        return await healthCheckFn(config);
+    } catch (e) {
+        LOG.warn(`Health check failed for layer '${layerId}'`, e);
+        return "error";
+    }
+}
+
 function mapState(state: OlSourceState | undefined): LayerLoadState {
     switch (state) {
         case undefined:
diff --git a/src/packages/toc/LayerList.test.tsx b/src/packages/toc/LayerList.test.tsx
index cbeafb698..d384afb37 100644
--- a/src/packages/toc/LayerList.test.tsx
+++ b/src/packages/toc/LayerList.test.tsx
@@ -17,7 +17,7 @@ import TileLayer from "ol/layer/Tile";
 import OSM from "ol/source/OSM";
 import { expect, it } from "vitest";
 import { LayerList } from "./LayerList";
-import { SimpleLayer, WMSLayer } from "@open-pioneer/map";
+import { SimpleLayer } from "@open-pioneer/map";
 
 it("should show layers in the correct order", async () => {
     const { mapId, registry } = await setupMap({
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 815e35990..242491ea1 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -259,24 +259,19 @@ function useSublayers(layer: LayerBase): Sublayer[] | undefined {
 
 /** Returns the layers current state. */
 function useLoadState(layer: TocLayer): string {
+    // for sublayers, use the state of the parent
+    const target = "parentLayer" in layer ? layer.parentLayer : layer;
     const subscribe = useCallback(
         (cb: () => void) => {
-            const resource = layer.on("changed:loadState", cb);
+            const resource = target.on("changed:loadState", cb);
             return () => resource.destroy();
         },
-        [layer]
+        [target]
     );
 
     const getSnapshot = useCallback(() => {
-        if ("loadState" in layer) {
-            return layer.loadState;
-        } else if ("parentLayer" in layer) {
-            // for sublayers, use the state of the parent
-            return layer.parentLayer.loadState;
-        } else {
-            return "loaded";
-        }
-    }, [layer]);
+        return target.loadState;
+    }, [target]);
 
     return useSyncExternalStore(subscribe, getSnapshot);
 }

From f034acdde4e10d107c3a73cc07cc5f4fcd95a107 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 12 Dec 2023 14:53:07 +0100
Subject: [PATCH 44/60] Disabling visibility only possible and necessary for
 non-baselayers

---
 src/packages/map/model/AbstractLayer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 4b5b10716..78088558f 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -43,7 +43,7 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
                 // hide layer when it becomes unavailable
                 // avoid that the layer is displayed again, but shown as unavailable when the map
                 // service is available again after initial health check
-                if (state === "error") {
+                if (!this.isBaseLayer && state === "error") {
                     this.setVisible(false);
                 }
                 this.__emitChangeEvent("changed:loadState");

From 0785e4e31f19521e2a497435f4f88eccc29878fc Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 12 Dec 2023 17:30:54 +0100
Subject: [PATCH 45/60] Remove tests from BasemapSwitcher that checks already
 tested basemap fallback behaviour of the Map Model

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 280 +++---------------
 1 file changed, 36 insertions(+), 244 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 9126a5312..7c9d626d9 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -399,214 +399,6 @@ it("should not allow selecting 'no basemap' by default", async () => {
     expect(optionsEmptyBasemap).toHaveLength(0);
 });
 
-// TODO: This behavior should be tested in the map model (-> the switcher is only concerned with the current base map, and the map model selects a "working" one)
-it("should successfully select emptyBasemap, if all configured basemaps are configured as not visible or have error state", async () => {
-    const b2Source = new BkgTopPlusOpen();
-    b2Source.setState("error");
-
-    const { mapId, registry } = await setupMap({
-        layers: [
-            {
-                id: "b-1",
-                title: "OSM",
-                isBaseLayer: true,
-                visible: false,
-                olLayer: new TileLayer({
-                    source: new OSM()
-                })
-            },
-            {
-                id: "b-2",
-                title: "topplus-open",
-                isBaseLayer: true,
-                visible: true,
-                olLayer: new TileLayer({
-                    source: b2Source
-                })
-            }
-        ]
-    });
-    const map = await registry.expectMapModel(mapId);
-
-    const injectedServices = createServiceOptions({ registry });
-    render(
-        <PackageContextProvider services={injectedServices}>
-            <BasemapSwitcher mapId={mapId} data-testid="switcher" />
-        </PackageContextProvider>
-    );
-
-    // basemap switcher is mounted
-    const { switcherSelect } = await waitForBasemapSwitcher();
-
-    expect(switcherSelect.textContent).toBe("emptyBasemapLabel");
-
-    const activeBaseLayer = map.layers.getActiveBaseLayer();
-    expect(activeBaseLayer).toBeUndefined();
-
-    // open dropdown to include options in snapshot; react-select creates list of options in dom after opening selection
-    act(() => {
-        fireEvent.keyDown(switcherSelect, { key: "ArrowDown" });
-    });
-
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-7-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              emptyBasemapLabel
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-7-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-7-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-7-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-7-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-7-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              OSM
-            </div>
-            <div
-              aria-disabled="true"
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option react-select__option--is-disabled css-e8c6zu"
-              data-theme="light"
-              id="react-select-7-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              topplus-open
-              <div
-                class="css-1v4xcoh"
-                data-theme="light"
-              >
-                <span>
-                  <svg
-                    aria-label="layerNotAvailable"
-                    color="red"
-                    fill="none"
-                    height="1em"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    style="color: red;"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                    />
-                    <line
-                      x1="12"
-                      x2="12"
-                      y1="9"
-                      y2="13"
-                    />
-                    <line
-                      x1="12"
-                      x2="12.01"
-                      y1="17"
-                      y2="17"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </div>
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-7-option-2"
-              role="option"
-              tabindex="-1"
-            >
-              emptyBasemapLabel
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
-});
-
 it("should update when a new basemap is registered", async () => {
     const { mapId, registry } = await setupMap({
         layers: defaultBasemapConfig
@@ -647,7 +439,7 @@ it("should update when a new basemap is registered", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-8-live-region"
+          id="react-select-7-live-region"
         />
         <span
           aria-atomic="false"
@@ -671,13 +463,13 @@ it("should update when a new basemap is registered", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-8-listbox"
+              aria-controls="react-select-7-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-8-listbox"
+              aria-owns="react-select-7-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-8-input"
+              id="react-select-7-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -717,7 +509,7 @@ it("should update when a new basemap is registered", async () => {
         <div
           class="react-select__menu css-ky7590"
           data-theme="light"
-          id="react-select-8-listbox"
+          id="react-select-7-listbox"
         >
           <div
             class="react-select__menu-list css-1h5avke"
@@ -729,7 +521,7 @@ it("should update when a new basemap is registered", async () => {
               class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-8-option-0"
+              id="react-select-7-option-0"
               role="option"
               tabindex="-1"
             >
@@ -739,7 +531,7 @@ it("should update when a new basemap is registered", async () => {
               aria-selected="false"
               class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
-              id="react-select-8-option-1"
+              id="react-select-7-option-1"
               role="option"
               tabindex="-1"
             >
@@ -749,7 +541,7 @@ it("should update when a new basemap is registered", async () => {
               aria-selected="false"
               class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
-              id="react-select-8-option-2"
+              id="react-select-7-option-2"
               role="option"
               tabindex="-1"
             >
@@ -918,7 +710,7 @@ it("should deactivate unavailable layers for selection", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-12-live-region"
+          id="react-select-11-live-region"
         />
         <span
           aria-atomic="false"
@@ -942,13 +734,13 @@ it("should deactivate unavailable layers for selection", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-12-listbox"
+              aria-controls="react-select-11-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-12-listbox"
+              aria-owns="react-select-11-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-12-input"
+              id="react-select-11-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -988,7 +780,7 @@ it("should deactivate unavailable layers for selection", async () => {
         <div
           class="react-select__menu css-ky7590"
           data-theme="light"
-          id="react-select-12-listbox"
+          id="react-select-11-listbox"
         >
           <div
             class="react-select__menu-list css-1h5avke"
@@ -1000,7 +792,7 @@ it("should deactivate unavailable layers for selection", async () => {
               class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-12-option-0"
+              id="react-select-11-option-0"
               role="option"
               tabindex="-1"
             >
@@ -1010,7 +802,7 @@ it("should deactivate unavailable layers for selection", async () => {
               aria-selected="false"
               class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
-              id="react-select-12-option-1"
+              id="react-select-11-option-1"
               role="option"
               tabindex="-1"
             >
@@ -1037,7 +829,7 @@ it("should deactivate unavailable layers for selection", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-12-live-region"
+          id="react-select-11-live-region"
         />
         <span
           aria-atomic="false"
@@ -1061,13 +853,13 @@ it("should deactivate unavailable layers for selection", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-12-listbox"
+              aria-controls="react-select-11-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-12-listbox"
+              aria-owns="react-select-11-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-12-input"
+              id="react-select-11-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -1107,7 +899,7 @@ it("should deactivate unavailable layers for selection", async () => {
         <div
           class="react-select__menu css-ky7590"
           data-theme="light"
-          id="react-select-12-listbox"
+          id="react-select-11-listbox"
         >
           <div
             class="react-select__menu-list css-1h5avke"
@@ -1120,7 +912,7 @@ it("should deactivate unavailable layers for selection", async () => {
               class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-12-option-0"
+              id="react-select-11-option-0"
               role="option"
               tabindex="-1"
             >
@@ -1167,7 +959,7 @@ it("should deactivate unavailable layers for selection", async () => {
               aria-selected="true"
               class="basemap-switcher-option react-select__option react-select__option--is-selected css-e8c6zu"
               data-theme="light"
-              id="react-select-12-option-1"
+              id="react-select-11-option-1"
               role="option"
               tabindex="-1"
             >
@@ -1225,7 +1017,7 @@ it("should update the ui when a layer title changes", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-13-live-region"
+          id="react-select-12-live-region"
         />
         <span
           aria-atomic="false"
@@ -1249,13 +1041,13 @@ it("should update the ui when a layer title changes", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-13-listbox"
+              aria-controls="react-select-12-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-13-listbox"
+              aria-owns="react-select-12-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-13-input"
+              id="react-select-12-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -1295,7 +1087,7 @@ it("should update the ui when a layer title changes", async () => {
         <div
           class="react-select__menu css-ky7590"
           data-theme="light"
-          id="react-select-13-listbox"
+          id="react-select-12-listbox"
         >
           <div
             class="react-select__menu-list css-1h5avke"
@@ -1307,7 +1099,7 @@ it("should update the ui when a layer title changes", async () => {
               class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-13-option-0"
+              id="react-select-12-option-0"
               role="option"
               tabindex="-1"
             >
@@ -1317,7 +1109,7 @@ it("should update the ui when a layer title changes", async () => {
               aria-selected="false"
               class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
-              id="react-select-13-option-1"
+              id="react-select-12-option-1"
               role="option"
               tabindex="-1"
             >
@@ -1341,7 +1133,7 @@ it("should update the ui when a layer title changes", async () => {
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
-          id="react-select-13-live-region"
+          id="react-select-12-live-region"
         />
         <span
           aria-atomic="false"
@@ -1365,13 +1157,13 @@ it("should update the ui when a layer title changes", async () => {
             </div>
             <input
               aria-autocomplete="list"
-              aria-controls="react-select-13-listbox"
+              aria-controls="react-select-12-listbox"
               aria-expanded="true"
               aria-haspopup="true"
-              aria-owns="react-select-13-listbox"
+              aria-owns="react-select-12-listbox"
               aria-readonly="true"
               class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-13-input"
+              id="react-select-12-input"
               inputmode="none"
               role="combobox"
               tabindex="0"
@@ -1411,7 +1203,7 @@ it("should update the ui when a layer title changes", async () => {
         <div
           class="react-select__menu css-ky7590"
           data-theme="light"
-          id="react-select-13-listbox"
+          id="react-select-12-listbox"
         >
           <div
             class="react-select__menu-list css-1h5avke"
@@ -1423,7 +1215,7 @@ it("should update the ui when a layer title changes", async () => {
               class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
-              id="react-select-13-option-0"
+              id="react-select-12-option-0"
               role="option"
               tabindex="-1"
             >
@@ -1433,7 +1225,7 @@ it("should update the ui when a layer title changes", async () => {
               aria-selected="false"
               class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
-              id="react-select-13-option-1"
+              id="react-select-12-option-1"
               role="option"
               tabindex="-1"
             >

From ea944f5619b0dd3527cf135c3385413a200a5fab Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 12 Dec 2023 17:36:31 +0100
Subject: [PATCH 46/60] BasemapSwitcher: remove logic and use active basemap
 from map model

---
 .../basemap-switcher/BasemapSwitcher.tsx        | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index d1c9a3596..e075a4e16 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -84,26 +84,19 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
     };
 
     const { options, selectedLayer } = useMemo(() => {
-        const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };
         const options: SelectOption[] = baseLayers.map<SelectOption>((layer) => {
             return { value: layer.id, layer: layer };
         });
 
-        const defaultLayer = options.find(
-            (option) =>
-                option.layer !== undefined &&
-                option.layer.visible &&
-                option.layer.loadState !== "error"
-        );
-        if (allowSelectingEmptyBasemap || defaultLayer == undefined) {
+        const activeBaseLayer = map?.layers.getActiveBaseLayer();
+        if (allowSelectingEmptyBasemap || activeBaseLayer == undefined) {
+            const emptyOption: SelectOption = { value: NO_BASEMAP_ID, layer: undefined };
             options.push(emptyOption);
         }
 
-        // TODO: I think the selected option chosen here can be inconsistent with the actually activated base map.
-        // It would be smarter to always use the activated basemap here, and have the correct logic in the map model.
-        const selectedLayer: SelectOption = defaultLayer === undefined ? emptyOption : defaultLayer;
+        const selectedLayer = options.filter((l) => l.layer === activeBaseLayer)[0];
         return { options, selectedLayer };
-    }, [allowSelectingEmptyBasemap, baseLayers]);
+    }, [allowSelectingEmptyBasemap, baseLayers, map?.layers]);
 
     const components = useMemo(() => {
         return {

From b33645c4b24d8eb21cb1c2a57a549b464bc7a51a Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Tue, 12 Dec 2023 18:10:54 +0100
Subject: [PATCH 47/60] Create new sample app for TOC and health check and
 remove unavailable layer from default sample app

---
 pnpm-lock.yaml                                |  42 ++++
 src/index.html                                |   5 +
 .../ol-app/MapConfigProviderImpl.ts           |   9 -
 src/samples/toc-sample/index.html             |  47 ++++
 src/samples/toc-sample/toc-app/AppUI.tsx      |  99 ++++++++
 src/samples/toc-sample/toc-app/CHANGELOG.md   |   1 +
 .../toc-app/MapConfigProviderImpl.ts          | 221 ++++++++++++++++++
 src/samples/toc-sample/toc-app/app.css        |  20 ++
 src/samples/toc-sample/toc-app/app.ts         |  20 ++
 .../toc-sample/toc-app/build.config.mjs       |  16 ++
 src/samples/toc-sample/toc-app/i18n/de.yaml   |   8 +
 src/samples/toc-sample/toc-app/i18n/en.yaml   |   8 +
 src/samples/toc-sample/toc-app/package.json   |  20 ++
 src/samples/toc-sample/toc-app/services.ts    |   3 +
 trails-openlayers-base-packages.iml           |   9 +
 15 files changed, 519 insertions(+), 9 deletions(-)
 create mode 100644 src/samples/toc-sample/index.html
 create mode 100644 src/samples/toc-sample/toc-app/AppUI.tsx
 create mode 100644 src/samples/toc-sample/toc-app/CHANGELOG.md
 create mode 100644 src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts
 create mode 100644 src/samples/toc-sample/toc-app/app.css
 create mode 100644 src/samples/toc-sample/toc-app/app.ts
 create mode 100644 src/samples/toc-sample/toc-app/build.config.mjs
 create mode 100644 src/samples/toc-sample/toc-app/i18n/de.yaml
 create mode 100644 src/samples/toc-sample/toc-app/i18n/en.yaml
 create mode 100644 src/samples/toc-sample/toc-app/package.json
 create mode 100644 src/samples/toc-sample/toc-app/services.ts
 create mode 100644 trails-openlayers-base-packages.iml

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11aca91ff..bd62afe1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1161,6 +1161,48 @@ importers:
         specifier: workspace:^
         version: link:../../../packages/theme
 
+  src/samples/toc-sample/toc-app:
+    dependencies:
+      '@chakra-ui/icons':
+        specifier: ^2.1.0
+        version: 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+      '@chakra-ui/system':
+        specifier: ^2.6.0
+        version: 2.6.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
+      '@emotion/react':
+        specifier: ^11.11.1
+        version: 11.11.1(@types/react@18.2.37)(react@18.2.0)
+      '@emotion/styled':
+        specifier: ^11.11.0
+        version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.37)(react@18.2.0)
+      '@open-pioneer/chakra-integration':
+        specifier: ^1.1.0
+        version: 1.1.0(@chakra-ui/react@2.8.2)(@emotion/cache@11.11.0)(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(framer-motion@10.16.5)(react-dom@18.2.0)(react@18.2.0)
+      '@open-pioneer/map':
+        specifier: workspace:^
+        version: link:../../../packages/map
+      '@open-pioneer/react-utils':
+        specifier: workspace:^
+        version: link:../../../packages/react-utils
+      '@open-pioneer/runtime':
+        specifier: ^1.1.0
+        version: 1.1.0(@formatjs/intl@2.9.9)(@open-pioneer/base-theme@0.1.0)(@open-pioneer/chakra-integration@1.1.0)(@open-pioneer/core@1.1.0)(@open-pioneer/runtime-react-support@1.0.0)(react-dom@18.2.0)(react@18.2.0)
+      '@open-pioneer/toc':
+        specifier: workspace:^
+        version: link:../../../packages/toc
+      ol:
+        specifier: ^8.2.0
+        version: 8.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-icons:
+        specifier: ^4.11.0
+        version: 4.11.0(react@18.2.0)
+
   support/disabled-package: {}
 
 packages:
diff --git a/src/index.html b/src/index.html
index 1ab162840..74c3d6a56 100644
--- a/src/index.html
+++ b/src/index.html
@@ -59,6 +59,11 @@ <h2>Samples</h2>
                 <br />
                 Demonstrates how to use notifications.
             </li>
+            <li>
+                <a href="./samples/toc-sample/">TOC + Health Check</a>
+                <br />
+                Demonstrates the TOC and health check to detect unavailable services.
+            </li>
         </ul>
 
         <h2>Test applications</h2>
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index 65947af57..416319b0f 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -164,15 +164,6 @@ function createSchulenLayer() {
         title: "Schulstandorte",
         description: `Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.`,
         visible: true,
-        // example for a custom health check running async
-        healthCheck: async () => {
-            function wait(milliseconds: number): Promise<void> {
-                return new Promise((resolve) => setTimeout(resolve, milliseconds));
-            }
-
-            await wait(3000);
-            return "error";
-        },
         url: "https://www.wms.nrw.de/wms/wms_nw_inspire-schulen",
         sublayers: [
             {
diff --git a/src/samples/toc-sample/index.html b/src/samples/toc-sample/index.html
new file mode 100644
index 000000000..7643259fc
--- /dev/null
+++ b/src/samples/toc-sample/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" style="height: 100%">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>[Demo] TOC + Health Check</title>
+        <link rel="icon" type="image/x-icon" href="./../../favicon.ico" />
+        <style>
+            html,
+            body {
+                margin: 0px;
+            }
+
+            .full-height {
+                height: 100%;
+                max-height: 100%;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+
+    <body class="full-height">
+        <script type="module">
+            import "./toc-app/app.ts";
+            const body = document.getElementsByTagName("body")[0];
+
+            initApp();
+
+            function initApp() {
+                const queryString = window.location.search;
+                const urlParams = new URLSearchParams(queryString);
+                const lang = urlParams.get("lang");
+
+                const app = document.createElement("toc-map-app");
+                app.classList.add("full-height");
+                app.classList.add("app");
+                app.setAttribute("id", "test");
+
+                if (lang) {
+                    app.setAttribute("forced-locale", lang);
+                }
+
+                body.appendChild(app);
+            }
+        </script>
+    </body>
+</html>
diff --git a/src/samples/toc-sample/toc-app/AppUI.tsx b/src/samples/toc-sample/toc-app/AppUI.tsx
new file mode 100644
index 000000000..587e5dd7d
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/AppUI.tsx
@@ -0,0 +1,99 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Flex } from "@open-pioneer/chakra-integration";
+import { MapAnchor, MapContainer } from "@open-pioneer/map";
+import { SectionHeading, TitledSection, ToolButton } from "@open-pioneer/react-utils";
+import { Toc } from "@open-pioneer/toc";
+import { useIntl } from "open-pioneer:react-hooks";
+import { useId, useState } from "react";
+import { PiListLight } from "react-icons/pi";
+import { MAP_ID } from "./MapConfigProviderImpl";
+
+export function AppUI() {
+    const intl = useIntl();
+    const tocTitleId = useId();
+    const [showToc, setShowToc] = useState<boolean>(true);
+
+    function toggleToc() {
+        setShowToc(!showToc);
+    }
+
+    return (
+        <Flex height="100%" direction="column" overflow="hidden">
+            <TitledSection
+                title={
+                    <Box
+                        role="region"
+                        aria-label={intl.formatMessage({ id: "ariaLabel.header" })}
+                        textAlign="center"
+                        py={1}
+                    >
+                        <SectionHeading size={"md"}>
+                            OpenLayers Base Packages - TOC and Health Check Sample
+                        </SectionHeading>
+                    </Box>
+                }
+            >
+                <Flex flex="1" direction="column" position="relative">
+                    <MapContainer
+                        mapId={MAP_ID}
+                        role="main"
+                        aria-label={intl.formatMessage({ id: "ariaLabel.map" })}
+                    >
+                        <MapAnchor position="top-left" horizontalGap={10} verticalGap={10}>
+                            {showToc && (
+                                <Box
+                                    backgroundColor="white"
+                                    borderWidth="1px"
+                                    borderRadius="lg"
+                                    padding={2}
+                                    boxShadow="lg"
+                                    maxWidth={350}
+                                >
+                                    {showToc && (
+                                        <Box role="dialog" aria-labelledby={tocTitleId}>
+                                            <TitledSection
+                                                title={
+                                                    <SectionHeading
+                                                        id={tocTitleId}
+                                                        size="md"
+                                                        mb={2}
+                                                    >
+                                                        {intl.formatMessage({ id: "tocTitle" })}
+                                                    </SectionHeading>
+                                                }
+                                            >
+                                                <Toc
+                                                    mapId={MAP_ID}
+                                                    basemapSwitcherProps={{
+                                                        allowSelectingEmptyBasemap: true
+                                                    }}
+                                                />
+                                            </TitledSection>
+                                        </Box>
+                                    )}
+                                </Box>
+                            )}
+                        </MapAnchor>
+                        <MapAnchor position="bottom-right" horizontalGap={10} verticalGap={45}>
+                            <Flex
+                                role="toolbar"
+                                aria-label={intl.formatMessage({ id: "ariaLabel.toolbar" })}
+                                direction="column"
+                                gap={1}
+                                padding={1}
+                            >
+                                <ToolButton
+                                    label={intl.formatMessage({ id: "tocTitle" })}
+                                    icon={<PiListLight />}
+                                    isActive={showToc}
+                                    onClick={toggleToc}
+                                />
+                            </Flex>
+                        </MapAnchor>
+                    </MapContainer>
+                </Flex>
+            </TitledSection>
+        </Flex>
+    );
+}
diff --git a/src/samples/toc-sample/toc-app/CHANGELOG.md b/src/samples/toc-sample/toc-app/CHANGELOG.md
new file mode 100644
index 000000000..ba677fe1b
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/CHANGELOG.md
@@ -0,0 +1 @@
+# toc-map
diff --git a/src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts b/src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts
new file mode 100644
index 000000000..1990a6ee5
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts
@@ -0,0 +1,221 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { MapConfig, MapConfigProvider, SimpleLayer, WMSLayer } from "@open-pioneer/map";
+import GeoJSON from "ol/format/GeoJSON";
+import TileLayer from "ol/layer/Tile";
+import VectorLayer from "ol/layer/Vector";
+import OSM from "ol/source/OSM";
+import VectorSource from "ol/source/Vector";
+import WMTS from "ol/source/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
+
+export const MAP_ID = "main";
+
+export class MapConfigProviderImpl implements MapConfigProvider {
+    mapId = MAP_ID;
+
+    async getMapConfig(): Promise<MapConfig> {
+        return {
+            initialView: {
+                kind: "position",
+                center: { x: 404747, y: 5757920 },
+                zoom: 14
+            },
+            projection: "EPSG:25832",
+            layers: [
+                new SimpleLayer({
+                    id: "topplus_open",
+                    title: "TopPlus Open",
+                    isBaseLayer: true,
+                    visible: true,
+                    // broken URL
+                    healthCheck:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_openERROR/1.0.0/WMTSCapabilities.xml",
+                    olLayer: createTopPlusOpenLayer("web")
+                }),
+                new SimpleLayer({
+                    id: "topplus_open_grau",
+                    title: "TopPlus Open (Grau)",
+                    isBaseLayer: true,
+                    visible: false,
+                    // example for a custom health check running async
+                    healthCheck: async () => {
+                        function wait(milliseconds: number): Promise<void> {
+                            return new Promise((resolve) => setTimeout(resolve, milliseconds));
+                        }
+
+                        await wait(2000);
+                        return "error";
+                    },
+                    olLayer: createTopPlusOpenLayer("web_grau")
+                }),
+                new SimpleLayer({
+                    id: "topplus_open_light",
+                    title: "TopPlus Open (Light)",
+                    isBaseLayer: true,
+                    visible: false,
+                    // valid URL
+                    healthCheck:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
+                    olLayer: createTopPlusOpenLayer("web_light")
+                }),
+                new SimpleLayer({
+                    title: "OSM",
+                    visible: false,
+                    isBaseLayer: true,
+                    olLayer: new TileLayer({
+                        source: new OSM()
+                    })
+                }),
+                new SimpleLayer({
+                    title: "Haltestellen Stadt Rostock",
+                    visible: true,
+                    description:
+                        "Haltestellen des öffentlichen Personenverkehrs in der Hanse- und Universitätsstadt Rostock.",
+                    olLayer: createHaltestellenLayer()
+                }),
+                new SimpleLayer({
+                    title: "Kindertagesstätten",
+                    visible: true,
+                    healthCheck:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
+                    olLayer: createKitasLayer()
+                }),
+                createSchulenLayer(),
+                createStrassenLayer()
+            ]
+        };
+    }
+}
+
+/**
+ * This method demonstrates how to integrate a WMTS-Service using
+ * advanced predefined configuration.
+ *
+ * For more details, see the documentation of the map package.
+ */
+function createTopPlusOpenLayer(layer: "web" | "web_grau" | "web_light") {
+    const topLeftCorner = [-3803165.98427299, 8805908.08284866];
+
+    /**
+     * Resolutions taken from AdV WMTS-Profil
+     * @see https://www.adv-online.de/AdV-Produkte/Standards-und-Produktblaetter/AdV-Profile/
+     */
+    const resolutions = [
+        4891.96981025128, // AdV-Level 0  (1:17471320.7508974)
+        2445.98490512564, // AdV-Level 1  (1:8735660.37544872)
+        1222.99245256282, // AdV-Level 2  (1:4367830.18772436)
+        611.49622628141, // AdV-Level 3   (1:2183915.09386218)
+        305.748113140705, // AdV-Level 4  (1:1091957.54693109)
+        152.874056570353, // AdV-Level 5  (1:545978.773465545)
+        76.4370282851763, // AdV-Level 6  (1:272989,386732772)
+        38.2185141425881, // AdV-Level 7  (1:136494,693366386)
+        19.1092570712941, // AdV-Level 8  (1:68247,3466831931)
+        9.55462853564703, // AdV-Level 9  (1:34123,6733415966)
+        4.77731426782352, // AdV-Level 10 (1:17061,8366707983)
+        2.38865713391176, // AdV-Level 11 (1:8530,91833539914)
+        1.19432856695588, // AdV-Level 12 (1:4265,45916769957)
+        0.59716428347794 // AdV-Level 13 (1:2132,72958384978)
+    ];
+
+    /**
+     * The length of matrixIds needs to match the length of the resolutions array
+     * @see https://openlayers.org/en/latest/apidoc/module-ol_tilegrid_WMTS-WMTSTileGrid.html
+     */
+    const matrixIds = new Array(resolutions.length);
+    for (let i = 0; i < resolutions.length; i++) {
+        matrixIds[i] = i;
+    }
+
+    const wmts = new WMTS({
+        url: `https://sgx.geodatenzentrum.de/wmts_topplus_open/tile/1.0.0/${layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png`,
+        layer: "web_grau",
+        matrixSet: "EU_EPSG_25832_TOPPLUS",
+        format: "image/png",
+        projection: "EPSG:25832",
+        requestEncoding: "REST",
+        tileGrid: new WMTSTileGrid({
+            origin: topLeftCorner,
+            resolutions: resolutions,
+            matrixIds: matrixIds
+        }),
+        style: "default",
+        attributions: `Kartendarstellung und Präsentationsgraphiken: © Bundesamt für Kartographie und Geodäsie ${new Date().getFullYear()}, <a href="https://sg.geodatenzentrum.de/web_public/gdz/datenquellen/Datenquellen_TopPlusOpen.html" target="_blank">Datenquellen</a>`
+    });
+    return new TileLayer({
+        source: wmts
+    });
+}
+
+function createHaltestellenLayer() {
+    const geojsonSource = new VectorSource({
+        url: "https://geo.sv.rostock.de/download/opendata/haltestellen/haltestellen.json",
+        format: new GeoJSON(), //assign GeoJson parser
+        attributions: "Haltestellen Stadt Rostock, Creative Commons CC Zero License (cc-zero)"
+    });
+
+    return new VectorLayer({
+        source: geojsonSource
+    });
+}
+
+function createKitasLayer() {
+    const geojsonSource = new VectorSource({
+        url: "https://ogc-api.nrw.de/inspire-us-kindergarten/v1/collections/governmentalservice/items?f=json&limit=10000",
+        format: new GeoJSON(), //assign GeoJson parser
+        attributions:
+            '&copy; <a href="http://www.bkg.bund.de" target="_blank">Bundesamt f&uuml;r Kartographie und Geod&auml;sie</a> 2017, <a href="http://sg.geodatenzentrum.de/web_public/Datenquellen_TopPlus_Open.pdf" target="_blank">Datenquellen</a>'
+    });
+
+    return new VectorLayer({
+        source: geojsonSource
+    });
+}
+
+function createSchulenLayer() {
+    return new WMSLayer({
+        title: "Schulstandorte",
+        description: `Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.Der vorliegende Datenbestand / Dienst zu den Schulstandorten in NRW stammt aus der Schuldatenbank. Die Informationen werden von den Schulträgern bzw. Schulen selbst eingetragen und aktuell gehalten. Die Daten werden tagesaktuell bereitgestellt und enthalten alle grundlegenden Informationen zu Schulen wie Schulnummer, Schulbezeichnung und Adresse.`,
+        visible: true,
+        // example for a custom health check running async
+        healthCheck: async () => {
+            function wait(milliseconds: number): Promise<void> {
+                return new Promise((resolve) => setTimeout(resolve, milliseconds));
+            }
+
+            await wait(3000);
+            return "error";
+        },
+        url: "https://www.wms.nrw.de/wms/wms_nw_inspire-schulen",
+        sublayers: [
+            {
+                name: "US.education",
+                title: "INSPIRE - WMS Schulstandorte NRW"
+            }
+        ],
+        sourceOptions: {
+            ratio: 1
+        }
+    });
+}
+
+function createStrassenLayer() {
+    return new WMSLayer({
+        title: "Straßennetz Landesbetrieb Straßenbau NRW",
+        url: "https://www.wms.nrw.de/wms/strassen_nrw_wms",
+        sublayers: [
+            {
+                name: "1",
+                title: "Verwaltungen"
+            },
+            {
+                name: "4",
+                title: "Abschnitte und Äste"
+            },
+            {
+                name: "6",
+                title: "Unfälle"
+            }
+        ]
+    });
+}
diff --git a/src/samples/toc-sample/toc-app/app.css b/src/samples/toc-sample/toc-app/app.css
new file mode 100644
index 000000000..7c6cff3e7
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/app.css
@@ -0,0 +1,20 @@
+@media only screen and (max-width: 500px) {
+    .search-top-center-placement {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 100%;
+        z-index: 1;
+    }
+}
+
+@media only screen and (min-width: 501px) {
+    .search-top-center-placement {
+        position: absolute;
+        left: 50%;
+        top: 0px;
+        transform: translate(-50%, 0px);
+        width: 500px;
+        z-index: 1;
+    }
+}
diff --git a/src/samples/toc-sample/toc-app/app.ts b/src/samples/toc-sample/toc-app/app.ts
new file mode 100644
index 000000000..36ffddff1
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/app.ts
@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { createCustomElement } from "@open-pioneer/runtime";
+import * as appMetadata from "open-pioneer:app";
+import { AppUI } from "./AppUI";
+
+const element = createCustomElement({
+    component: AppUI,
+    appMetadata,
+    openShadowRoot: true,
+    async resolveConfig(ctx) {
+        const locale = ctx.getAttribute("forced-locale");
+        if (!locale) {
+            return undefined;
+        }
+        return { locale };
+    }
+});
+
+customElements.define("toc-map-app", element);
diff --git a/src/samples/toc-sample/toc-app/build.config.mjs b/src/samples/toc-sample/toc-app/build.config.mjs
new file mode 100644
index 000000000..84863bc0d
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/build.config.mjs
@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+import { defineBuildConfig } from "@open-pioneer/build-support";
+
+export default defineBuildConfig({
+    styles: "./app.css",
+    i18n: ["en", "de"],
+    services: {
+        MapConfigProviderImpl: {
+            provides: ["map.MapConfigProvider"]
+        }
+    },
+    ui: {
+        references: ["map.MapRegistry"]
+    }
+});
diff --git a/src/samples/toc-sample/toc-app/i18n/de.yaml b/src/samples/toc-sample/toc-app/i18n/de.yaml
new file mode 100644
index 000000000..ccd9bae18
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/i18n/de.yaml
@@ -0,0 +1,8 @@
+messages:
+  basemapLabel: "Hintergrundkarte auswählen: "
+  tocTitle: "Karteninhalt"
+  ariaLabel:
+    header: "Kopfleiste"
+    footer: "Fussleiste mit Maßstabsangabe, Raumbezugssystem und Koordinatenanzeige"
+    map: "Karte. Mit den Pfeiltasten kannst du die Karte bewegen. Mit der Plus Taste hineinzoomen und mit der Minus Taste herauszoomen."
+    toolbar: "Kartenwerkzeuge"
diff --git a/src/samples/toc-sample/toc-app/i18n/en.yaml b/src/samples/toc-sample/toc-app/i18n/en.yaml
new file mode 100644
index 000000000..0cfe44d25
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/i18n/en.yaml
@@ -0,0 +1,8 @@
+messages:
+  basemapLabel: "Select basemap:"
+  tocTitle: "Table of contents"
+  ariaLabel:
+    header: "Header bar"
+    footer: "Base bar with scale information, spatial reference system and coordinate display"
+    map: "Map. Use the arrow keys to move the map. Zoom in with the plus button and zoom out with the minus button."
+    toolbar: "Maptools"
diff --git a/src/samples/toc-sample/toc-app/package.json b/src/samples/toc-sample/toc-app/package.json
new file mode 100644
index 000000000..f1315a4f3
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "toc-map",
+    "private": true,
+    "dependencies": {
+        "@chakra-ui/icons": "^2.1.0",
+        "@chakra-ui/system": "^2.6.0",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@open-pioneer/chakra-integration": "^1.1.0",
+        "@open-pioneer/toc": "workspace:^",
+        "@open-pioneer/map": "workspace:^",
+        "@open-pioneer/runtime": "^1.1.0",
+        "@open-pioneer/react-utils": "workspace:^",
+        "ol": "^8.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0"
+    },
+    "version": "0.0.1"
+}
diff --git a/src/samples/toc-sample/toc-app/services.ts b/src/samples/toc-sample/toc-app/services.ts
new file mode 100644
index 000000000..60f6dc663
--- /dev/null
+++ b/src/samples/toc-sample/toc-app/services.ts
@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+export { MapConfigProviderImpl } from "./MapConfigProviderImpl";
diff --git a/trails-openlayers-base-packages.iml b/trails-openlayers-base-packages.iml
new file mode 100644
index 000000000..8021953ed
--- /dev/null
+++ b/trails-openlayers-base-packages.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

From e5a8d3023dd01310e71140f9f5aee89d85194155 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Thu, 14 Dec 2023 11:56:51 +0100
Subject: [PATCH 48/60] Clean up event handlers

---
 src/packages/map/model/LayerCollectionImpl.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/packages/map/model/LayerCollectionImpl.ts b/src/packages/map/model/LayerCollectionImpl.ts
index ed0590205..7b9f653f0 100644
--- a/src/packages/map/model/LayerCollectionImpl.ts
+++ b/src/packages/map/model/LayerCollectionImpl.ts
@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { EventEmitter, createLogger } from "@open-pioneer/core";
+import { EventEmitter, Resource, createLogger } from "@open-pioneer/core";
 import OlBaseLayer from "ol/layer/Base";
 import { LayerCollection, LayerCollectionEvents, Layer, LayerRetrievalOptions } from "../api";
 import { AbstractLayer } from "./AbstractLayer";
@@ -35,6 +35,9 @@ export class LayerCollectionImpl
     /** Reverse index of _all_ layers that have an associated OpenLayers layer. */
     #layersByOlLayer: WeakMap<OlBaseLayer, AbstractLayer> = new WeakMap();
 
+    /** Manages the event handlers for load state changes. */
+    #loadStateHandlers = new Map<AbstractLayer, Resource>();
+
     /** Currently active base layer. */
     #activeBaseLayer: AbstractLayer | undefined;
 
@@ -51,8 +54,12 @@ export class LayerCollectionImpl
         for (const layer of this.#layersById.values()) {
             layer.destroy();
         }
+        for (const handler of this.#loadStateHandlers.values()) {
+            handler.destroy();
+        }
         this.#topLevelLayers.clear();
         this.#layersById.clear();
+        this.#loadStateHandlers.clear();
         this.#activeBaseLayer = undefined;
     }
 
@@ -145,7 +152,7 @@ export class LayerCollectionImpl
                 model.__setVisible(false);
             }
 
-            model?.on("changed:loadState", () => {
+            const loadStateHandler = model?.on("changed:loadState", () => {
                 // if active baselayer is not available, switch to alternative basemap
                 if (this.#activeBaseLayer === model && model.loadState === "error") {
                     const baseLayers = this.getBaseLayers();
@@ -161,6 +168,7 @@ export class LayerCollectionImpl
                     this.emit("changed");
                 }
             });
+            this.#loadStateHandlers.set(model, loadStateHandler);
         } else {
             olLayer.setZIndex(this.#nextIndex++);
             model.__setVisible(model.visible);
@@ -196,6 +204,8 @@ export class LayerCollectionImpl
         if (this.#activeBaseLayer === model) {
             this.#updateBaseLayer(this.getBaseLayers()[0]);
         }
+        this.#loadStateHandlers.get(model)?.destroy();
+        this.#loadStateHandlers.delete(model);
         model.destroy();
         this.emit("changed");
     }

From b6609b0f174583f2bedc1ad7324d5a885b727832 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Thu, 14 Dec 2023 15:59:26 +0100
Subject: [PATCH 49/60] Remove IntelliJ config and extend .gitignore

---
 .gitignore                          | 1 +
 trails-openlayers-base-packages.iml | 9 ---------
 2 files changed, 1 insertion(+), 9 deletions(-)
 delete mode 100644 trails-openlayers-base-packages.iml

diff --git a/.gitignore b/.gitignore
index 01770a54f..825d5a73c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ node_modules
 *.sln
 *.sw?
 *.local
+*.iml
diff --git a/trails-openlayers-base-packages.iml b/trails-openlayers-base-packages.iml
deleted file mode 100644
index 8021953ed..000000000
--- a/trails-openlayers-base-packages.iml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file

From 343de7bbc8e93a41d132398e5522dc0f9e404500 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 15 Dec 2023 09:21:25 +0100
Subject: [PATCH 50/60] Remove automatically switching basemap or layer
 visibility

---
 src/packages/map/model/AbstractLayer.test.ts  |  40 ------
 src/packages/map/model/AbstractLayer.ts       |   8 +-
 .../map/model/LayerCollectionImpl.test.ts     | 122 ------------------
 src/packages/map/model/LayerCollectionImpl.ts |  29 +----
 src/packages/toc/LayerList.test.tsx           |   7 -
 src/packages/toc/LayerList.tsx                |   1 -
 6 files changed, 2 insertions(+), 205 deletions(-)

diff --git a/src/packages/map/model/AbstractLayer.test.ts b/src/packages/map/model/AbstractLayer.test.ts
index 9a94676fb..6ea71474a 100644
--- a/src/packages/map/model/AbstractLayer.test.ts
+++ b/src/packages/map/model/AbstractLayer.test.ts
@@ -123,39 +123,6 @@ it("tracks the layer source's state", async () => {
     }
 });
 
-it("hides a layer when state changes to error", async () => {
-    const source = new Source({
-        state: "ready"
-    });
-    const olLayer = new Layer({
-        source
-    });
-    const layer = createLayer({
-        id: "a",
-        title: "A",
-        visible: true,
-        olLayer: olLayer
-    });
-
-    {
-        expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(true);
-
-        source.setState("loading");
-        expect(layer.loadState).toBe("loading");
-        expect(layer.visible).toBe(true);
-
-        source.setState("error");
-        expect(layer.loadState).toBe("error");
-        expect(layer.visible).toBe(false);
-
-        // don't activate visibility again
-        source.setState("ready");
-        expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(false);
-    }
-});
-
 describe("performs a health check", () => {
     it("when specified as URL, success", async () => {
         const mockedFetch: SpyInstance = vi.spyOn(global, "fetch");
@@ -182,7 +149,6 @@ describe("performs a health check", () => {
         await sleep(25);
         expect(eventEmitted).toBe(0); // no change of state
         expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(true); // still visible
         // ol layer state remains ready and is overwritten by internal health check
         expect(layer.olLayer.getSourceState()).toBe("ready");
     });
@@ -208,14 +174,12 @@ describe("performs a health check", () => {
         expect(layer.olLayer.getSourceState()).toBe("ready");
         expect(mockedFetch).toHaveBeenCalledWith(testUrl);
         expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(true);
         expect(eventEmitted).toBe(0);
 
         await sleep(25);
         // ol layer state remains ready and is overwritten by internal health check
         expect(layer.olLayer.getSourceState()).toBe("ready");
         expect(layer.loadState).toBe("error");
-        expect(layer.visible).toBe(false);
         expect(eventEmitted).toBe(1);
 
         expect(mockedWarn.mock.calls).toMatchInlineSnapshot(`
@@ -256,7 +220,6 @@ describe("performs a health check", () => {
         expect(layer.olLayer.getSourceState()).toBe("ready");
         expect(eventEmitted).toBe(0);
         expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(true);
         expect(didResolve).toBe(false);
 
         await sleep(25);
@@ -265,7 +228,6 @@ describe("performs a health check", () => {
         expect(layer.olLayer.getSourceState()).toBe("ready");
         expect(eventEmitted).toBe(1);
         expect(layer.loadState).toBe("error");
-        expect(layer.visible).toBe(false);
     });
 
     it("when specified as function returning 'loaded'", async () => {
@@ -325,7 +287,6 @@ describe("performs a health check", () => {
         expect(mockedFetch).toHaveBeenCalledTimes(0);
         expect(eventEmitted).toBe(0); // no change of state
         expect(layer.loadState).toBe("loaded");
-        expect(layer.visible).toBe(true);
         expect(layer.olLayer.getSourceState()).toBe("ready");
     });
 
@@ -340,7 +301,6 @@ describe("performs a health check", () => {
         layer.on("changed:loadState", () => eventEmitted++);
 
         expect(layer.loadState).toBe("error");
-        expect(layer.visible).toBe(false);
         expect(layer.olLayer.getSourceState()).toBe("error");
         expect(mockedFetch).toHaveBeenCalledTimes(0);
         expect(eventEmitted).toBe(0); // no event emitted because state was initially error
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 78088558f..07ef9a314 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -40,17 +40,11 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
             config,
             (state) => {
                 this.#loadState = state;
-                // hide layer when it becomes unavailable
-                // avoid that the layer is displayed again, but shown as unavailable when the map
-                // service is available again after initial health check
-                if (!this.isBaseLayer && state === "error") {
-                    this.setVisible(false);
-                }
                 this.__emitChangeEvent("changed:loadState");
             }
         );
         // hide layer when initial state is error
-        this.#visible = (initialState !== "error" ? config.visible : false) ?? true;
+        this.#visible = config.visible ?? true;
         this.#loadState = initialState;
         this.#stateWatchResource = stateWatchResource;
     }
diff --git a/src/packages/map/model/LayerCollectionImpl.test.ts b/src/packages/map/model/LayerCollectionImpl.test.ts
index 64cee2a49..a3f23a1e0 100644
--- a/src/packages/map/model/LayerCollectionImpl.test.ts
+++ b/src/packages/map/model/LayerCollectionImpl.test.ts
@@ -398,128 +398,6 @@ describe("base layers", () => {
         expect(b2.olLayer.getVisible()).toBe(false);
     });
 
-    it("switches base layer if active base layer has error state", async () => {
-        const b1source = new OSM();
-        const b2source = new OSM();
-        const b3source = new OSM();
-
-        const model = await createMapModel("foo", {
-            layers: [
-                new SimpleLayer({
-                    id: "b-1",
-                    title: "Base Layer 1",
-                    isBaseLayer: true,
-                    olLayer: new TileLayer({
-                        source: b1source
-                    })
-                }),
-                new SimpleLayer({
-                    id: "b-2",
-                    title: "Base Layer 2",
-                    isBaseLayer: true,
-                    olLayer: new TileLayer({
-                        source: b2source
-                    })
-                }),
-                new SimpleLayer({
-                    id: "b-3",
-                    title: "Base Layer 3",
-                    isBaseLayer: true,
-                    olLayer: new TileLayer({
-                        source: b3source
-                    })
-                })
-            ]
-        });
-
-        const layers = model.layers;
-
-        let eventsLayers = 0;
-        layers.on("changed", () => ++eventsLayers);
-
-        const b1 = layers.getLayerById("b-1")! as SimpleLayerImpl;
-        const b2 = layers.getLayerById("b-2")! as SimpleLayerImpl;
-        const b3 = layers.getLayerById("b-3")! as SimpleLayerImpl;
-
-        let eventsb1 = 0,
-            eventsb2 = 0,
-            eventsb3 = 0;
-        b1.on("changed:loadState", () => ++eventsb1);
-        b2.on("changed:loadState", () => ++eventsb2);
-        b3.on("changed:loadState", () => ++eventsb3);
-
-        layers.activateBaseLayer(b1.id);
-
-        // initial state
-        expect(layers.getActiveBaseLayer()).toBe(b1);
-        expect(eventsLayers).toBe(0);
-        expect(eventsb1).toBe(0); // no change
-        expect(b1.visible).toBe(true);
-        expect(b1.olLayer.getVisible()).toBe(true);
-        expect(eventsb2).toBe(0);
-        expect(b2.visible).toBe(false);
-        expect(b2.olLayer.getVisible()).toBe(false);
-        expect(eventsb3).toBe(0);
-        expect(b3.visible).toBe(false);
-        expect(b3.olLayer.getVisible()).toBe(false);
-
-        // layer, which is not the currently active base map, becomes unavailable -> no change of base map
-        b3source.setState("error");
-        expect(layers.getActiveBaseLayer()).toBe(b1);
-        expect(eventsLayers).toBe(0);
-        expect(eventsb1).toBe(0);
-        expect(b1.visible).toBe(true);
-        expect(b1.olLayer.getVisible()).toBe(true);
-        expect(eventsb2).toBe(0);
-        expect(b2.visible).toBe(false);
-        expect(b2.olLayer.getVisible()).toBe(false);
-        expect(eventsb3).toBe(1); // change event
-        expect(b3.visible).toBe(false);
-        expect(b3.olLayer.getVisible()).toBe(false);
-
-        // fallback when layer becomes inactive
-        b1source.setState("error");
-        expect(layers.getActiveBaseLayer()).toBe(b2);
-        expect(eventsLayers).toBe(1);
-        expect(eventsb1).toBe(1); // change event
-        expect(b1.visible).toBe(false);
-        expect(b1.olLayer.getVisible()).toBe(false);
-        expect(eventsb2).toBe(0);
-        expect(b2.visible).toBe(true);
-        expect(b2.olLayer.getVisible()).toBe(true);
-        expect(eventsb3).toBe(1);
-        expect(b3.visible).toBe(false);
-        expect(b3.olLayer.getVisible()).toBe(false);
-
-        // state change, but not to error -> no changes expected
-        b2source.setState("loading");
-        expect(layers.getActiveBaseLayer()).toBe(b2);
-        expect(eventsLayers).toBe(1);
-        expect(eventsb1).toBe(1);
-        expect(b1.visible).toBe(false);
-        expect(b1.olLayer.getVisible()).toBe(false);
-        expect(eventsb2).toBe(1);
-        expect(b2.visible).toBe(true);
-        expect(b2.olLayer.getVisible()).toBe(true);
-        expect(eventsb3).toBe(1);
-        expect(b3.visible).toBe(false);
-        expect(b3.olLayer.getVisible()).toBe(false);
-
-        // switch to empty basemap as fallback
-        b2source.setState("error");
-        expect(layers.getActiveBaseLayer()).toBe(undefined);
-        expect(eventsLayers).toBe(2);
-        expect(eventsb1).toBe(1); // nothing changed
-        expect(b1.visible).toBe(false);
-        expect(b1.olLayer.getVisible()).toBe(false);
-        expect(eventsb2).toBe(2); // change event
-        expect(b2.visible).toBe(false);
-        expect(b2.olLayer.getVisible()).toBe(false);
-        expect(eventsb3).toBe(1);
-        expect(b3.visible).toBe(false);
-        expect(b3.olLayer.getVisible()).toBe(false);
-    });
-
     it("supports removal of base layers", async () => {
         model = await createMapModel("foo", {
             layers: [
diff --git a/src/packages/map/model/LayerCollectionImpl.ts b/src/packages/map/model/LayerCollectionImpl.ts
index 7b9f653f0..468a8b47d 100644
--- a/src/packages/map/model/LayerCollectionImpl.ts
+++ b/src/packages/map/model/LayerCollectionImpl.ts
@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { EventEmitter, Resource, createLogger } from "@open-pioneer/core";
+import { EventEmitter, createLogger } from "@open-pioneer/core";
 import OlBaseLayer from "ol/layer/Base";
 import { LayerCollection, LayerCollectionEvents, Layer, LayerRetrievalOptions } from "../api";
 import { AbstractLayer } from "./AbstractLayer";
@@ -35,9 +35,6 @@ export class LayerCollectionImpl
     /** Reverse index of _all_ layers that have an associated OpenLayers layer. */
     #layersByOlLayer: WeakMap<OlBaseLayer, AbstractLayer> = new WeakMap();
 
-    /** Manages the event handlers for load state changes. */
-    #loadStateHandlers = new Map<AbstractLayer, Resource>();
-
     /** Currently active base layer. */
     #activeBaseLayer: AbstractLayer | undefined;
 
@@ -54,12 +51,8 @@ export class LayerCollectionImpl
         for (const layer of this.#layersById.values()) {
             layer.destroy();
         }
-        for (const handler of this.#loadStateHandlers.values()) {
-            handler.destroy();
-        }
         this.#topLevelLayers.clear();
         this.#layersById.clear();
-        this.#loadStateHandlers.clear();
         this.#activeBaseLayer = undefined;
     }
 
@@ -151,24 +144,6 @@ export class LayerCollectionImpl
             } else {
                 model.__setVisible(false);
             }
-
-            const loadStateHandler = model?.on("changed:loadState", () => {
-                // if active baselayer is not available, switch to alternative basemap
-                if (this.#activeBaseLayer === model && model.loadState === "error") {
-                    const baseLayers = this.getBaseLayers();
-                    const fallbackBaseLayers = baseLayers.filter(
-                        (layer) => layer.loadState !== "error"
-                    );
-
-                    if (fallbackBaseLayers.length > 0) {
-                        this.#updateBaseLayer(fallbackBaseLayers.at(0));
-                    } else {
-                        this.#updateBaseLayer(undefined); // empty background as fallback
-                    }
-                    this.emit("changed");
-                }
-            });
-            this.#loadStateHandlers.set(model, loadStateHandler);
         } else {
             olLayer.setZIndex(this.#nextIndex++);
             model.__setVisible(model.visible);
@@ -204,8 +179,6 @@ export class LayerCollectionImpl
         if (this.#activeBaseLayer === model) {
             this.#updateBaseLayer(this.getBaseLayers()[0]);
         }
-        this.#loadStateHandlers.get(model)?.destroy();
-        this.#loadStateHandlers.delete(model);
         model.destroy();
         this.emit("changed");
     }
diff --git a/src/packages/toc/LayerList.test.tsx b/src/packages/toc/LayerList.test.tsx
index d384afb37..f3bde16fe 100644
--- a/src/packages/toc/LayerList.test.tsx
+++ b/src/packages/toc/LayerList.test.tsx
@@ -419,7 +419,6 @@ it("reacts to changes of the layer load state", async () => {
         ]
     });
     const map = await registry.expectMapModel(mapId);
-    const layer = map.layers.getLayerById("layer1");
 
     const { container } = render(
         <PackageContextProvider>
@@ -432,8 +431,6 @@ it("reacts to changes of the layer load state", async () => {
     let icons = container.querySelectorAll(".toc-layer-item-content-icon");
 
     expect(checkbox).toBeTruthy();
-    expect(checkbox.disabled).toBe(false);
-    expect(layer?.visible).toBe(true);
     expect(button?.disabled).toBe(false);
     expect(icons).toHaveLength(0);
 
@@ -442,8 +439,6 @@ it("reacts to changes of the layer load state", async () => {
     });
 
     icons = container.querySelectorAll(".toc-layer-item-content-icon");
-    expect(checkbox.disabled).toBe(true);
-    expect(layer?.visible).toBe(false);
     expect(button?.disabled).toBe(true);
     expect(icons).toHaveLength(1);
 
@@ -453,8 +448,6 @@ it("reacts to changes of the layer load state", async () => {
     });
 
     icons = container.querySelectorAll(".toc-layer-item-content-icon");
-    expect(checkbox.disabled).toBe(false);
-    expect(layer?.visible).toBe(false); // make the layer visible again manually
     expect(button?.disabled).toBe(false);
     expect(icons).toHaveLength(0);
 });
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 242491ea1..e368dde09 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -98,7 +98,6 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
             >
                 <Checkbox
                     isChecked={isVisible}
-                    isDisabled={!isAvailable}
                     onChange={(event) => setVisible(event.target.checked)}
                 >
                     {title}

From 4b81cb02496c8865cc0649e9cb0d502187785766 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 15 Dec 2023 13:30:39 +0100
Subject: [PATCH 51/60] Fix accessibility in BasemapSwitcher and Toc

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 219 +++++++++++++-----
 .../basemap-switcher/BasemapSwitcher.tsx      |  71 ++++--
 .../BasemapSwitcher.test.tsx.snap             |  16 +-
 src/packages/toc/LayerList.tsx                |   2 +
 .../toc/__snapshots__/Toc.test.tsx.snap       |  20 +-
 5 files changed, 246 insertions(+), 82 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 7c9d626d9..70ea82090 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -152,10 +152,15 @@ it("should allow selecting 'no basemap' when enabled", async () => {
             data-theme="light"
           >
             <div
-              class="react-select__single-value css-1xa1gs2"
+              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <input
               aria-autocomplete="list"
@@ -221,7 +226,12 @@ it("should allow selecting 'no basemap' when enabled", async () => {
               role="option"
               tabindex="-1"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <div
               aria-selected="false"
@@ -231,7 +241,12 @@ it("should allow selecting 'no basemap' when enabled", async () => {
               role="option"
               tabindex="-1"
             >
-              TopPlus Open
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                TopPlus Open
+              </div>
             </div>
             <div
               aria-selected="false"
@@ -241,7 +256,12 @@ it("should allow selecting 'no basemap' when enabled", async () => {
               role="option"
               tabindex="-1"
             >
-              emptyBasemapLabel
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                emptyBasemapLabel
+              </div>
             </div>
           </div>
         </div>
@@ -456,10 +476,15 @@ it("should update when a new basemap is registered", async () => {
             data-theme="light"
           >
             <div
-              class="react-select__single-value css-1xa1gs2"
+              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <input
               aria-autocomplete="list"
@@ -525,7 +550,12 @@ it("should update when a new basemap is registered", async () => {
               role="option"
               tabindex="-1"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <div
               aria-selected="false"
@@ -535,7 +565,12 @@ it("should update when a new basemap is registered", async () => {
               role="option"
               tabindex="-1"
             >
-              TopPlus Open
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                TopPlus Open
+              </div>
             </div>
             <div
               aria-selected="false"
@@ -545,7 +580,12 @@ it("should update when a new basemap is registered", async () => {
               role="option"
               tabindex="-1"
             >
-              Foo
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                Foo
+              </div>
             </div>
           </div>
         </div>
@@ -727,10 +767,15 @@ it("should deactivate unavailable layers for selection", async () => {
             data-theme="light"
           >
             <div
-              class="react-select__single-value css-1xa1gs2"
+              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <input
               aria-autocomplete="list"
@@ -796,7 +841,12 @@ it("should deactivate unavailable layers for selection", async () => {
               role="option"
               tabindex="-1"
             >
-              OSM
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+              </div>
             </div>
             <div
               aria-selected="false"
@@ -806,7 +856,12 @@ it("should deactivate unavailable layers for selection", async () => {
               role="option"
               tabindex="-1"
             >
-              TopPlus Open
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                TopPlus Open
+              </div>
             </div>
           </div>
         </div>
@@ -819,7 +874,7 @@ it("should deactivate unavailable layers for selection", async () => {
 
     // switch active layer
     activeBaseLayer = map.layers.getActiveBaseLayer();
-    expect(activeBaseLayer?.id).toBe("topplus-open");
+    expect(activeBaseLayer?.id).toBe("osm");
 
     // option disabled, warning icon shown and selected option changed?
     expect(switcherSelect).toMatchInlineSnapshot(`
@@ -846,10 +901,52 @@ it("should deactivate unavailable layers for selection", async () => {
             data-theme="light"
           >
             <div
-              class="react-select__single-value css-1xa1gs2"
+              class="basemap-switcher-value react-select__single-value react-select__single-value--is-disabled css-1xa1gs2"
               data-theme="light"
             >
-              TopPlus Open
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                OSM
+                <div
+                  class="css-1v4xcoh"
+                  data-theme="light"
+                >
+                  <span>
+                    <svg
+                      aria-label="layerNotAvailable"
+                      color="red"
+                      fill="none"
+                      height="1em"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      style="color: red;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                      />
+                      <line
+                        x1="12"
+                        x2="12"
+                        y1="9"
+                        y2="13"
+                      />
+                      <line
+                        x1="12"
+                        x2="12.01"
+                        y1="17"
+                        y2="17"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
             </div>
             <input
               aria-autocomplete="list"
@@ -908,62 +1005,72 @@ it("should deactivate unavailable layers for selection", async () => {
           >
             <div
               aria-disabled="true"
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused css-e8c6zu"
+              aria-selected="true"
+              class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
               data-focus="true"
               data-theme="light"
               id="react-select-11-option-0"
               role="option"
               tabindex="-1"
             >
-              OSM
               <div
-                class="css-1v4xcoh"
+                class="css-u4p24i"
                 data-theme="light"
               >
-                <span>
-                  <svg
-                    aria-label="layerNotAvailable"
-                    color="red"
-                    fill="none"
-                    height="1em"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    style="color: red;"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                    />
-                    <line
-                      x1="12"
-                      x2="12"
-                      y1="9"
-                      y2="13"
-                    />
-                    <line
-                      x1="12"
-                      x2="12.01"
-                      y1="17"
-                      y2="17"
-                    />
-                  </svg>
-                </span>
+                OSM
+                <div
+                  class="css-1v4xcoh"
+                  data-theme="light"
+                >
+                  <span>
+                    <svg
+                      aria-label="layerNotAvailable"
+                      color="red"
+                      fill="none"
+                      height="1em"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      style="color: red;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                      />
+                      <line
+                        x1="12"
+                        x2="12"
+                        y1="9"
+                        y2="13"
+                      />
+                      <line
+                        x1="12"
+                        x2="12.01"
+                        y1="17"
+                        y2="17"
+                      />
+                    </svg>
+                  </span>
+                </div>
               </div>
             </div>
             <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-selected css-e8c6zu"
+              aria-selected="false"
+              class="basemap-switcher-option react-select__option css-e8c6zu"
               data-theme="light"
               id="react-select-11-option-1"
               role="option"
               tabindex="-1"
             >
-              TopPlus Open
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                TopPlus Open
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index e075a4e16..13dc0851f 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -1,10 +1,10 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { Box, Tooltip } from "@open-pioneer/chakra-integration";
+import { Box, Flex, Tooltip } from "@open-pioneer/chakra-integration";
 import { Layer, MapModel, useMapModel } from "@open-pioneer/map";
 import { useIntl } from "open-pioneer:react-hooks";
 import { FC, useCallback, useMemo, useRef, useSyncExternalStore } from "react";
-import { Select, OptionProps, chakraComponents } from "chakra-react-select";
+import { Select, OptionProps, SingleValueProps, chakraComponents } from "chakra-react-select";
 import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
 import { FiAlertTriangle } from "react-icons/fi";
 
@@ -100,7 +100,8 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
 
     const components = useMemo(() => {
         return {
-            Option: BasemapSelectOption
+            Option: BasemapSelectOption,
+            SingleValue: BasemapSelectValue
         };
     }, []);
 
@@ -116,8 +117,14 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     onChange={(option) => option && activateLayer(option.value)}
                     isClearable={false}
                     isSearchable={false}
+                    // optionLabel is used by screenreaders
                     getOptionLabel={(option) =>
-                        option.layer !== undefined ? option.layer.title : emptyBasemapLabel
+                        option.layer !== undefined
+                            ? option.layer.title +
+                              (option.layer.loadState === "error"
+                                  ? " " + intl.formatMessage({ id: "layerNotAvailable" })
+                                  : "")
+                            : emptyBasemapLabel
                     }
                     isOptionDisabled={(option) => option?.layer?.loadState === "error"}
                     components={components}
@@ -161,10 +168,7 @@ function useBaseLayers(mapModel: MapModel | undefined): Layer[] {
 
 function BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {
     const { layer } = props.data;
-    const intl = useIntl();
-    const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
-    const label = useTitle(layer);
-    const isAvailable = useLoadState(layer) !== "error";
+    const { isAvailable, content } = useBasemapItem(layer);
 
     return (
         <chakraComponents.Option
@@ -172,20 +176,51 @@ function BasemapSelectOption(props: OptionProps<SelectOption>): JSX.Element {
             isDisabled={!isAvailable}
             className="basemap-switcher-option"
         >
-            {label}
-            {!isAvailable && (
-                <Box ml={2}>
-                    <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
-                        <span>
-                            <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
-                        </span>
-                    </Tooltip>
-                </Box>
-            )}
+            {content}
         </chakraComponents.Option>
     );
 }
 
+function BasemapSelectValue(props: SingleValueProps<SelectOption>): JSX.Element {
+    const { layer } = props.data;
+    const { isAvailable, content } = useBasemapItem(layer);
+
+    return (
+        <chakraComponents.SingleValue
+            {...props}
+            isDisabled={!isAvailable}
+            className="basemap-switcher-value"
+        >
+            {content}
+        </chakraComponents.SingleValue>
+    );
+}
+
+function useBasemapItem(layer: Layer | undefined) {
+    const intl = useIntl();
+    const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
+    const label = useTitle(layer);
+    const isAvailable = useLoadState(layer) !== "error";
+
+    return {
+        isAvailable,
+        content: (
+            <Flex direction="row" alignItems="center">
+                {label}
+                {!isAvailable && (
+                    <Box ml={2}>
+                        <Tooltip label={notAvailableLabel} placement="right" openDelay={500}>
+                            <span>
+                                <FiAlertTriangle color={"red"} aria-label={notAvailableLabel} />
+                            </span>
+                        </Tooltip>
+                    </Box>
+                )}
+            </Flex>
+        )
+    };
+}
+
 function useTitle(layer: Layer | undefined): string {
     const intl = useIntl();
     const emptyBasemapLabel = intl.formatMessage({ id: "emptyBasemapLabel" });
diff --git a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
index 12d2c598f..46b892fb8 100644
--- a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
+++ b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
@@ -29,10 +29,15 @@ exports[`should successfully create a basemap switcher component 1`] = `
         data-theme="light"
       >
         <div
-          class="react-select__single-value css-1xa1gs2"
+          class="basemap-switcher-value react-select__single-value css-1xa1gs2"
           data-theme="light"
         >
-          emptyBasemapLabel
+          <div
+            class="css-u4p24i"
+            data-theme="light"
+          >
+            emptyBasemapLabel
+          </div>
         </div>
         <input
           aria-autocomplete="list"
@@ -98,7 +103,12 @@ exports[`should successfully create a basemap switcher component 1`] = `
           role="option"
           tabindex="-1"
         >
-          emptyBasemapLabel
+          <div
+            class="css-u4p24i"
+            data-theme="light"
+          >
+            emptyBasemapLabel
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index e368dde09..f0116ea6f 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -97,6 +97,8 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
                 minHeight={10}
             >
                 <Checkbox
+                    // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node. The aria-labels of Tooltip and Icon is ignored by screenreader because they are no child element of the checkbox. To consider the notAvailableLabel, an aria-label at the checkbox is necessary.
+                    aria-label={title + (!isAvailable ? " " + notAvailableLabel : "")}
                     isChecked={isVisible}
                     onChange={(event) => setVisible(event.target.checked)}
                 >
diff --git a/src/packages/toc/__snapshots__/Toc.test.tsx.snap b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
index a144e76e0..29100f45f 100644
--- a/src/packages/toc/__snapshots__/Toc.test.tsx.snap
+++ b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
@@ -44,10 +44,15 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <div
-              class="react-select__single-value css-1xa1gs2"
+              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
               data-theme="light"
             >
-              Base layer
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                Base layer
+              </div>
             </div>
             <input
               aria-autocomplete="list"
@@ -114,7 +119,12 @@ exports[`should successfully create a toc component 1`] = `
               role="option"
               tabindex="-1"
             >
-              Base layer
+              <div
+                class="css-u4p24i"
+                data-theme="light"
+              >
+                Base layer
+              </div>
             </div>
           </div>
         </div>
@@ -152,7 +162,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
-              aria-disabled="false"
+              aria-label="Layer 2"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
               type="checkbox"
@@ -209,7 +219,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
-              aria-disabled="false"
+              aria-label="Layer 1"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
               type="checkbox"

From f3c03864bcf22f2105ee7f137d61e6b3055dfac2 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Fri, 15 Dec 2023 15:53:25 +0100
Subject: [PATCH 52/60] Replace most snapshots in BasemapSwitcher tests by
 simpler checks and move remaining ones to separate file

---
 .../basemap-switcher/BasemapSwitcher.test.tsx | 963 +-----------------
 .../BasemapSwitcher.test.tsx.snap             | 325 ++++++
 2 files changed, 353 insertions(+), 935 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
index 70ea82090..5b88ac26e 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.test.tsx
@@ -126,147 +126,6 @@ it("should allow selecting 'no basemap' when enabled", async () => {
 
     expect(switcherSelect.textContent).toBe("OSM");
     expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
-    showDropdown(switcherSelect);
-
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-5-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-5-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-5-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-5-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-5-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-5-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-5-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                TopPlus Open
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-5-option-2"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                emptyBasemapLabel
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
 
     showDropdown(switcherSelect);
     const options = getCurrentOptions(switcherSelect);
@@ -299,118 +158,6 @@ it("should not allow selecting 'no basemap' by default", async () => {
     expect(switcherSelect.textContent).toBe("OSM");
     expect(map.layers.getActiveBaseLayer()?.id).toBe("osm");
 
-    showDropdown(switcherSelect);
-
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-6-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              OSM
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-6-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-6-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-6-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-6-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-6-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              OSM
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-6-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              TopPlus Open
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
-
     showDropdown(switcherSelect);
     const options = getCurrentOptions(switcherSelect);
     const optionsEmptyBasemap = options.filter(
@@ -451,146 +198,14 @@ it("should update when a new basemap is registered", async () => {
 
     options = getCurrentOptions(switcherSelect);
     expect(options.length).toBe(3);
-
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-7-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-7-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-7-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-7-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-7-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-7-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-7-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                TopPlus Open
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-7-option-2"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                Foo
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    const optionLabels = Array.from(options).map((opt) => opt.textContent);
+    expect(optionLabels, "new basemap was added").toMatchInlineSnapshot(`
+        [
+          "OSM",
+          "TopPlus Open",
+          "Foo",
+        ]
+      `);
 });
 
 it("should update when a different basemap is activated from somewhere else", async () => {
@@ -743,130 +358,7 @@ it("should deactivate unavailable layers for selection", async () => {
     expect(activeBaseLayer?.id).toBe("osm");
 
     showDropdown(switcherSelect);
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-11-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="basemap-switcher-value react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-11-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-11-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-11-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-11-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-11-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-11-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                TopPlus Open
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    expect(switcherSelect).toMatchSnapshot();
 
     act(() => {
         osmSource.setState("error");
@@ -877,205 +369,7 @@ it("should deactivate unavailable layers for selection", async () => {
     expect(activeBaseLayer?.id).toBe("osm");
 
     // option disabled, warning icon shown and selected option changed?
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-11-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="basemap-switcher-value react-select__single-value react-select__single-value--is-disabled css-1xa1gs2"
-              data-theme="light"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-                <div
-                  class="css-1v4xcoh"
-                  data-theme="light"
-                >
-                  <span>
-                    <svg
-                      aria-label="layerNotAvailable"
-                      color="red"
-                      fill="none"
-                      height="1em"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      style="color: red;"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                      />
-                      <line
-                        x1="12"
-                        x2="12"
-                        y1="9"
-                        y2="13"
-                      />
-                      <line
-                        x1="12"
-                        x2="12.01"
-                        y1="17"
-                        y2="17"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-11-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-11-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-11-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-11-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-disabled="true"
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-11-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                OSM
-                <div
-                  class="css-1v4xcoh"
-                  data-theme="light"
-                >
-                  <span>
-                    <svg
-                      aria-label="layerNotAvailable"
-                      color="red"
-                      fill="none"
-                      height="1em"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      style="color: red;"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-                      />
-                      <line
-                        x1="12"
-                        x2="12"
-                        y1="9"
-                        y2="13"
-                      />
-                      <line
-                        x1="12"
-                        x2="12.01"
-                        y1="17"
-                        y2="17"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-11-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              <div
-                class="css-u4p24i"
-                data-theme="light"
-              >
-                TopPlus Open
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    expect(switcherSelect).toMatchSnapshot();
 });
 
 it("should update the ui when a layer title changes", async () => {
@@ -1117,231 +411,30 @@ it("should update the ui when a layer title changes", async () => {
     expect(activeBaseLayer?.id).toBe("osm");
 
     showDropdown(switcherSelect);
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-12-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              OSM
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-12-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-12-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-12-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-12-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-12-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              OSM
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-12-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              TopPlus Open
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+
+    let options = getCurrentOptions(switcherSelect);
+    let optionLabels = Array.from(options).map((opt) => opt.textContent);
+    expect(optionLabels, "basemap options are not equal to their expected values")
+        .toMatchInlineSnapshot(`
+        [
+          "OSM",
+          "TopPlus Open",
+        ]
+      `);
 
     // change layer title
     act(() => {
         activeBaseLayer?.setTitle("New Layer Title");
     });
 
-    // option disabled, warning icon shown and selected option changed?
-    expect(switcherSelect).toMatchInlineSnapshot(`
-      <div
-        class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-12-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="react-select__control react-select__control--menu-is-open css-i2418r"
-          data-theme="light"
-        >
-          <div
-            class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
-          >
-            <div
-              class="react-select__single-value css-1xa1gs2"
-              data-theme="light"
-            >
-              OSM
-            </div>
-            <input
-              aria-autocomplete="list"
-              aria-controls="react-select-12-listbox"
-              aria-expanded="true"
-              aria-haspopup="true"
-              aria-owns="react-select-12-listbox"
-              aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
-              id="react-select-12-input"
-              inputmode="none"
-              role="combobox"
-              tabindex="0"
-              value=""
-            />
-          </div>
-          <div
-            class="react-select__indicators css-hfbj6y"
-            data-theme="light"
-          >
-            <hr
-              aria-orientation="vertical"
-              class="chakra-divider react-select__indicator-separator css-1i6c5ox"
-              data-theme="light"
-            />
-            <div
-              aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-xq12md"
-              data-theme="light"
-            >
-              <svg
-                aria-hidden="true"
-                class="chakra-icon css-onkibi"
-                data-theme="light"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="react-select__menu css-ky7590"
-          data-theme="light"
-          id="react-select-12-listbox"
-        >
-          <div
-            class="react-select__menu-list css-1h5avke"
-            data-theme="light"
-            role="listbox"
-          >
-            <div
-              aria-selected="true"
-              class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
-              data-focus="true"
-              data-theme="light"
-              id="react-select-12-option-0"
-              role="option"
-              tabindex="-1"
-            >
-              New Layer Title
-            </div>
-            <div
-              aria-selected="false"
-              class="basemap-switcher-option react-select__option css-e8c6zu"
-              data-theme="light"
-              id="react-select-12-option-1"
-              role="option"
-              tabindex="-1"
-            >
-              TopPlus Open
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    options = getCurrentOptions(switcherSelect);
+    optionLabels = Array.from(options).map((opt) => opt.textContent);
+    expect(optionLabels, "basemap layer was not renamed").toMatchInlineSnapshot(`
+        [
+          "New Layer Title",
+          "TopPlus Open",
+        ]
+      `);
 });
 
 function showDropdown(switcherSelect: HTMLElement) {
diff --git a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
index 46b892fb8..42e0c534f 100644
--- a/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
+++ b/src/packages/basemap-switcher/__snapshots__/BasemapSwitcher.test.tsx.snap
@@ -1,5 +1,330 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`should deactivate unavailable layers for selection 1`] = `
+<div
+  class="basemap-switcher-select react-select--has-value css-79elbk"
+  data-theme="light"
+>
+  <span
+    class="css-1f43avz-a11yText-A11yText"
+    id="react-select-11-live-region"
+  />
+  <span
+    aria-atomic="false"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="css-1f43avz-a11yText-A11yText"
+  />
+  <div
+    class="react-select__control react-select__control--menu-is-open css-i2418r"
+    data-theme="light"
+  >
+    <div
+      class="react-select__value-container react-select__value-container--has-value css-j93siq"
+      data-theme="light"
+    >
+      <div
+        class="basemap-switcher-value react-select__single-value css-1xa1gs2"
+        data-theme="light"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          OSM
+        </div>
+      </div>
+      <input
+        aria-autocomplete="list"
+        aria-controls="react-select-11-listbox"
+        aria-expanded="true"
+        aria-haspopup="true"
+        aria-owns="react-select-11-listbox"
+        aria-readonly="true"
+        class="css-mohuvp-dummyInput-DummyInput"
+        id="react-select-11-input"
+        inputmode="none"
+        role="combobox"
+        tabindex="0"
+        value=""
+      />
+    </div>
+    <div
+      class="react-select__indicators css-hfbj6y"
+      data-theme="light"
+    >
+      <hr
+        aria-orientation="vertical"
+        class="chakra-divider react-select__indicator-separator css-1i6c5ox"
+        data-theme="light"
+      />
+      <div
+        aria-hidden="true"
+        class="react-select__indicator react-select__dropdown-indicator css-xq12md"
+        data-theme="light"
+      >
+        <svg
+          aria-hidden="true"
+          class="chakra-icon css-onkibi"
+          data-theme="light"
+          focusable="false"
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class="react-select__menu css-ky7590"
+    data-theme="light"
+    id="react-select-11-listbox"
+  >
+    <div
+      class="react-select__menu-list css-1h5avke"
+      data-theme="light"
+      role="listbox"
+    >
+      <div
+        aria-selected="true"
+        class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
+        data-focus="true"
+        data-theme="light"
+        id="react-select-11-option-0"
+        role="option"
+        tabindex="-1"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          OSM
+        </div>
+      </div>
+      <div
+        aria-selected="false"
+        class="basemap-switcher-option react-select__option css-e8c6zu"
+        data-theme="light"
+        id="react-select-11-option-1"
+        role="option"
+        tabindex="-1"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          TopPlus Open
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should deactivate unavailable layers for selection 2`] = `
+<div
+  class="basemap-switcher-select react-select--has-value css-79elbk"
+  data-theme="light"
+>
+  <span
+    class="css-1f43avz-a11yText-A11yText"
+    id="react-select-11-live-region"
+  />
+  <span
+    aria-atomic="false"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="css-1f43avz-a11yText-A11yText"
+  />
+  <div
+    class="react-select__control react-select__control--menu-is-open css-i2418r"
+    data-theme="light"
+  >
+    <div
+      class="react-select__value-container react-select__value-container--has-value css-j93siq"
+      data-theme="light"
+    >
+      <div
+        class="basemap-switcher-value react-select__single-value react-select__single-value--is-disabled css-1xa1gs2"
+        data-theme="light"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          OSM
+          <div
+            class="css-1v4xcoh"
+            data-theme="light"
+          >
+            <span>
+              <svg
+                aria-label="layerNotAvailable"
+                color="red"
+                fill="none"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                style="color: red;"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="9"
+                  y2="13"
+                />
+                <line
+                  x1="12"
+                  x2="12.01"
+                  y1="17"
+                  y2="17"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <input
+        aria-autocomplete="list"
+        aria-controls="react-select-11-listbox"
+        aria-expanded="true"
+        aria-haspopup="true"
+        aria-owns="react-select-11-listbox"
+        aria-readonly="true"
+        class="css-mohuvp-dummyInput-DummyInput"
+        id="react-select-11-input"
+        inputmode="none"
+        role="combobox"
+        tabindex="0"
+        value=""
+      />
+    </div>
+    <div
+      class="react-select__indicators css-hfbj6y"
+      data-theme="light"
+    >
+      <hr
+        aria-orientation="vertical"
+        class="chakra-divider react-select__indicator-separator css-1i6c5ox"
+        data-theme="light"
+      />
+      <div
+        aria-hidden="true"
+        class="react-select__indicator react-select__dropdown-indicator css-xq12md"
+        data-theme="light"
+      >
+        <svg
+          aria-hidden="true"
+          class="chakra-icon css-onkibi"
+          data-theme="light"
+          focusable="false"
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class="react-select__menu css-ky7590"
+    data-theme="light"
+    id="react-select-11-listbox"
+  >
+    <div
+      class="react-select__menu-list css-1h5avke"
+      data-theme="light"
+      role="listbox"
+    >
+      <div
+        aria-disabled="true"
+        aria-selected="true"
+        class="basemap-switcher-option react-select__option react-select__option--is-disabled react-select__option--is-focused react-select__option--is-selected css-e8c6zu"
+        data-focus="true"
+        data-theme="light"
+        id="react-select-11-option-0"
+        role="option"
+        tabindex="-1"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          OSM
+          <div
+            class="css-1v4xcoh"
+            data-theme="light"
+          >
+            <span>
+              <svg
+                aria-label="layerNotAvailable"
+                color="red"
+                fill="none"
+                height="1em"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                style="color: red;"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                />
+                <line
+                  x1="12"
+                  x2="12"
+                  y1="9"
+                  y2="13"
+                />
+                <line
+                  x1="12"
+                  x2="12.01"
+                  y1="17"
+                  y2="17"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-selected="false"
+        class="basemap-switcher-option react-select__option css-e8c6zu"
+        data-theme="light"
+        id="react-select-11-option-1"
+        role="option"
+        tabindex="-1"
+      >
+        <div
+          class="css-u4p24i"
+          data-theme="light"
+        >
+          TopPlus Open
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`should successfully create a basemap switcher component 1`] = `
 <div
   class="basemap-switcher css-0"

From 10d1d748105d6ab5cc5d590cc1057587d61ad840 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 18 Dec 2023 11:07:09 +0100
Subject: [PATCH 53/60] Add accidentally removed disabling of unavailable
 operational layers again

---
 src/packages/toc/LayerList.test.tsx              | 4 ++++
 src/packages/toc/LayerList.tsx                   | 1 +
 src/packages/toc/__snapshots__/Toc.test.tsx.snap | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/src/packages/toc/LayerList.test.tsx b/src/packages/toc/LayerList.test.tsx
index f3bde16fe..c1cbf3718 100644
--- a/src/packages/toc/LayerList.test.tsx
+++ b/src/packages/toc/LayerList.test.tsx
@@ -419,6 +419,7 @@ it("reacts to changes of the layer load state", async () => {
         ]
     });
     const map = await registry.expectMapModel(mapId);
+    const layer = map.layers.getLayerById("layer1");
 
     const { container } = render(
         <PackageContextProvider>
@@ -431,6 +432,7 @@ it("reacts to changes of the layer load state", async () => {
     let icons = container.querySelectorAll(".toc-layer-item-content-icon");
 
     expect(checkbox).toBeTruthy();
+    expect(checkbox.disabled).toBe(false);
     expect(button?.disabled).toBe(false);
     expect(icons).toHaveLength(0);
 
@@ -439,6 +441,7 @@ it("reacts to changes of the layer load state", async () => {
     });
 
     icons = container.querySelectorAll(".toc-layer-item-content-icon");
+    expect(checkbox.disabled).toBe(true);
     expect(button?.disabled).toBe(true);
     expect(icons).toHaveLength(1);
 
@@ -448,6 +451,7 @@ it("reacts to changes of the layer load state", async () => {
     });
 
     icons = container.querySelectorAll(".toc-layer-item-content-icon");
+    expect(checkbox.disabled).toBe(false);
     expect(button?.disabled).toBe(false);
     expect(icons).toHaveLength(0);
 });
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index f0116ea6f..48fd7252c 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -100,6 +100,7 @@ function LayerItem(props: { layer: TocLayer; intl: PackageIntl }): JSX.Element {
                     // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node. The aria-labels of Tooltip and Icon is ignored by screenreader because they are no child element of the checkbox. To consider the notAvailableLabel, an aria-label at the checkbox is necessary.
                     aria-label={title + (!isAvailable ? " " + notAvailableLabel : "")}
                     isChecked={isVisible}
+                    isDisabled={!isAvailable}
                     onChange={(event) => setVisible(event.target.checked)}
                 >
                     {title}
diff --git a/src/packages/toc/__snapshots__/Toc.test.tsx.snap b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
index 29100f45f..a2fcc07cc 100644
--- a/src/packages/toc/__snapshots__/Toc.test.tsx.snap
+++ b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
@@ -162,6 +162,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
+              aria-disabled="false"
               aria-label="Layer 2"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"
@@ -219,6 +220,7 @@ exports[`should successfully create a toc component 1`] = `
             data-theme="light"
           >
             <input
+              aria-disabled="false"
               aria-label="Layer 1"
               class="chakra-checkbox__input"
               style="border: 0px; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;"

From eabb6b53ab869a4d03eb7ef58c26f89390a7112b Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 18 Dec 2023 15:11:41 +0100
Subject: [PATCH 54/60] Add documentation

---
 src/packages/basemap-switcher/README.md |  4 +-
 src/packages/map/README.md              | 59 +++++++++++++++++++++++++
 src/packages/toc/README.md              |  2 +
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/packages/basemap-switcher/README.md b/src/packages/basemap-switcher/README.md
index d6af95a27..7e7b79dff 100644
--- a/src/packages/basemap-switcher/README.md
+++ b/src/packages/basemap-switcher/README.md
@@ -2,6 +2,8 @@
 
 This package provides a UI component that allows a user to switch between different base maps.
 
+Unavailable basemaps are marked with an icon and will be deactivated for selection. If a basemap was configured as initially selected, it remains selected and there will not be any automatic fallback to another basemap.
+
 ## Usage
 
 To add the component to your app, insert the following snippet with a reference to a map ID:
@@ -10,7 +12,7 @@ To add the component to your app, insert the following snippet with a reference
 <BasemapSwitcher mapId="map_id" />
 ```
 
-To provide an option to deactivate all basemap layers, add the optional property `allowSelectingEmptyBasemap`.
+To provide an option to deactivate all basemap layers, add the optional property `allowSelectingEmptyBasemap` (default: `false`).
 
 ```jsx
 <BasemapSwitcher mapId="map_id" allowSelectingEmptyBasemap />
diff --git a/src/packages/map/README.md b/src/packages/map/README.md
index be0c5375c..f2a741fa1 100644
--- a/src/packages/map/README.md
+++ b/src/packages/map/README.md
@@ -258,6 +258,65 @@ layer.updateAttributes({
 layer.deleteAttribute("foo");
 ```
 
+An optional property `healthCheck` allows to determine the availability status of a layer (e.g. map service down). The health check is performed asynchronous.
+
+It is possible to provide
+
+-   either a URL to perform a test request check the returned HTTP status
+-   or a `HealthCheckFunction` performing a custom check and returning the state
+
+**Important**: The availability of a layer is only checked once during initialization to reduce the load on server side. If a service becomes available again later, the application will need to be reloaded in order to update the availability status.
+
+The availability status of a layer can be accessed with the property `loadState`. Its value depends on the result of the health check and the OpenLayers `Source` of the layer. If at least one of both checks returns the state `error`, the `loadState` will be set to `error`.
+
+Example: Check of layer availability ("health check")
+
+```ts
+// YOUR-APP/MapConfigProviderImpl.ts
+import { MapConfig, MapConfigProvider, SimpleLayer } from "@open-pioneer/map";
+import TileLayer from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+
+export class MapConfigProviderImpl implements MapConfigProvider {
+    async getMapConfig(): Promise<MapConfig> {
+        return {
+            layers: [
+                new SimpleLayer({
+                    id: "1",
+                    title: "Layer 1",
+                    olLayer: new TileLayer({
+                        source: new OSM()
+                    }),
+                    // check layer availability by requesting the provided URL
+                    healthCheck:
+                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
+                    isBaseLayer: false,
+                    visible: true
+                }),
+                new SimpleLayer({
+                    id: "2",
+                    title: "Layer 2",
+                    olLayer: new TileLayer({
+                        source: new OSM()
+                    }),
+                    // check layer availability by providing a custom health check function
+                    healthCheck: async () => {
+                        function wait(milliseconds: number): Promise<void> {
+                            return new Promise((resolve) => setTimeout(resolve, milliseconds));
+                        }
+
+                        await wait(3000);
+                        return "error";
+                    },
+                    isBaseLayer: false,
+                    visible: false
+                })
+            ]
+        };
+    }
+}
+```
+
 > NOTE: The visibility of base layers cannot be changed through the method `setVisible`.
 > Call `activateBaseLayer` instead.
 
diff --git a/src/packages/toc/README.md b/src/packages/toc/README.md
index f2f01931a..4ca825de7 100644
--- a/src/packages/toc/README.md
+++ b/src/packages/toc/README.md
@@ -2,6 +2,8 @@
 
 This package provides a UI component that displays the map content to the user and allows them to control it.
 
+Unavailable operational layers are marked with an icon and will be deactivated for selection. If a layer was configured as initially visible, it remains visible.
+
 ## Usage
 
 To integrate the TOC (table of contents) in your app, insert the following snippet and reference a map ID:

From 460522c6ad5b013a383bfa59857de4461dcb1b04 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 18 Dec 2023 17:02:04 +0100
Subject: [PATCH 55/60] Update pnpm-lock.yaml

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd62afe1d..3a87994f5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1165,7 +1165,7 @@ importers:
     dependencies:
       '@chakra-ui/icons':
         specifier: ^2.1.0
-        version: 2.1.1(@chakra-ui/system@2.6.2)(react@18.2.0)
+        version: 2.1.0(@chakra-ui/system@2.6.2)(react@18.2.0)
       '@chakra-ui/system':
         specifier: ^2.6.0
         version: 2.6.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)

From 7dfb758496fd7f8777bffd7138906ea1a8231854 Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 18 Dec 2023 17:03:06 +0100
Subject: [PATCH 56/60] Remove unused statement

---
 src/packages/toc/LayerList.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/packages/toc/LayerList.test.tsx b/src/packages/toc/LayerList.test.tsx
index c1cbf3718..d1386dd80 100644
--- a/src/packages/toc/LayerList.test.tsx
+++ b/src/packages/toc/LayerList.test.tsx
@@ -419,7 +419,6 @@ it("reacts to changes of the layer load state", async () => {
         ]
     });
     const map = await registry.expectMapModel(mapId);
-    const layer = map.layers.getLayerById("layer1");
 
     const { container } = render(
         <PackageContextProvider>

From 7faabefdc100860a29d34d4d991ca6990172d43c Mon Sep 17 00:00:00 2001
From: "Matheisen, Alexander" <alexander.matheisen@it.nrw.de>
Date: Mon, 18 Dec 2023 17:04:13 +0100
Subject: [PATCH 57/60] Add missing import

---
 src/packages/toc/LayerList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
index 48fd7252c..d81ac70d4 100644
--- a/src/packages/toc/LayerList.tsx
+++ b/src/packages/toc/LayerList.tsx
@@ -19,7 +19,7 @@ import {
     Text,
     Tooltip
 } from "@open-pioneer/chakra-integration";
-import { LayerBase, MapModel, Sublayer } from "@open-pioneer/map";
+import { Layer, LayerBase, MapModel, Sublayer } from "@open-pioneer/map";
 import { PackageIntl } from "@open-pioneer/runtime";
 import classNames from "classnames";
 import { useIntl } from "open-pioneer:react-hooks";

From 83bdf9e5bc124a317e7778dd09f5c3703ae46c94 Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 19 Dec 2023 16:42:31 +0100
Subject: [PATCH 58/60] Minor changes

---
 src/index.html                                | 10 +--
 src/packages/map/api/layers/base.ts           |  6 +-
 src/packages/map/model/AbstractLayer.ts       |  1 -
 src/packages/toc/Toc.test.tsx                 |  2 -
 .../ol-app/MapConfigProviderImpl.ts           |  2 -
 .../basemap-switcher-app/AppUI.tsx            | 65 +++++++++----------
 .../{toc-sample => test-toc}/index.html       |  0
 .../toc-app/AppUI.tsx                         | 21 +++++-
 src/samples/test-toc/toc-app/CHANGELOG.md     |  1 +
 .../toc-app/MapConfigProviderImpl.ts          |  0
 .../{toc-sample => test-toc}/toc-app/app.css  |  0
 .../{toc-sample => test-toc}/toc-app/app.ts   |  0
 .../toc-app/build.config.mjs                  |  0
 .../toc-app/i18n/de.yaml                      |  0
 .../toc-app/i18n/en.yaml                      |  0
 .../toc-app/package.json                      |  0
 .../toc-app/services.ts                       |  0
 src/samples/toc-sample/toc-app/CHANGELOG.md   |  1 -
 vite.config.ts                                |  1 +
 19 files changed, 62 insertions(+), 48 deletions(-)
 rename src/samples/{toc-sample => test-toc}/index.html (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/AppUI.tsx (78%)
 create mode 100644 src/samples/test-toc/toc-app/CHANGELOG.md
 rename src/samples/{toc-sample => test-toc}/toc-app/MapConfigProviderImpl.ts (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/app.css (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/app.ts (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/build.config.mjs (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/i18n/de.yaml (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/i18n/en.yaml (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/package.json (100%)
 rename src/samples/{toc-sample => test-toc}/toc-app/services.ts (100%)
 delete mode 100644 src/samples/toc-sample/toc-app/CHANGELOG.md

diff --git a/src/index.html b/src/index.html
index 74c3d6a56..9146c6927 100644
--- a/src/index.html
+++ b/src/index.html
@@ -59,11 +59,6 @@ <h2>Samples</h2>
                 <br />
                 Demonstrates how to use notifications.
             </li>
-            <li>
-                <a href="./samples/toc-sample/">TOC + Health Check</a>
-                <br />
-                Demonstrates the TOC and health check to detect unavailable services.
-            </li>
         </ul>
 
         <h2>Test applications</h2>
@@ -74,6 +69,11 @@ <h2>Test applications</h2>
                 <br />
                 Test app for the basemap switcher.
             </li>
+            <li>
+                <a href="./samples/test-toc/">TOC + Health Check</a>
+                <br />
+                Demonstrates the TOC and health check to detect unavailable services.
+            </li>
             <li>
                 <a href="./samples/theming-sample/">Theming</a>
                 <br />
diff --git a/src/packages/map/api/layers/base.ts b/src/packages/map/api/layers/base.ts
index 01ca4ce6c..e3304be11 100644
--- a/src/packages/map/api/layers/base.ts
+++ b/src/packages/map/api/layers/base.ts
@@ -144,9 +144,9 @@ export interface LayerConfig extends LayerBaseConfig {
     isBaseLayer?: boolean;
 
     /**
-     * Optional to check the availability of the layer. It is possible to provide
-     * either a URL which indicates the state of the service
-     * or a {@link HealthCheckFunction} performing a custom check and returning the state
+     * Optional property to check the availability of the layer.
+     * It is possible to provide either a URL which indicates the state of the service (2xx response meaning "ok")
+     * or a {@link HealthCheckFunction} performing a custom check and returning the state.
      */
     healthCheck?: string | HealthCheckFunction;
 }
diff --git a/src/packages/map/model/AbstractLayer.ts b/src/packages/map/model/AbstractLayer.ts
index 07ef9a314..9cffc0e9d 100644
--- a/src/packages/map/model/AbstractLayer.ts
+++ b/src/packages/map/model/AbstractLayer.ts
@@ -43,7 +43,6 @@ export abstract class AbstractLayer<AdditionalEvents = {}>
                 this.__emitChangeEvent("changed:loadState");
             }
         );
-        // hide layer when initial state is error
         this.#visible = config.visible ?? true;
         this.#loadState = initialState;
         this.#stateWatchResource = stateWatchResource;
diff --git a/src/packages/toc/Toc.test.tsx b/src/packages/toc/Toc.test.tsx
index 85696128c..1fff94c90 100644
--- a/src/packages/toc/Toc.test.tsx
+++ b/src/packages/toc/Toc.test.tsx
@@ -46,7 +46,6 @@ it("should successfully create a toc component", async () => {
     // react-select creates list of options in dom after opening selection
     act(() => {
         fireEvent.keyDown(basemapSelect, { key: "ArrowDown" });
-        //await userEvent.click(basemapSelect); // TODO click doesn't work
     });
 
     await waitFor(() => {
@@ -138,7 +137,6 @@ it("should support overriding basemap-switcher properties", async () => {
     // react-select creates list of options in dom after opening selection
     act(() => {
         fireEvent.keyDown(basemapSelect, { key: "ArrowDown" });
-        //await userEvent.click(basemapSelect); // TODO click doesn't work
     });
 
     await waitFor(() => {
diff --git a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
index 416319b0f..e2c664d9e 100644
--- a/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
+++ b/src/samples/map-sample/ol-app/MapConfigProviderImpl.ts
@@ -64,8 +64,6 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                 new SimpleLayer({
                     title: "Kindertagesstätten",
                     visible: true,
-                    healthCheck:
-                        "https://sgx.geodatenzentrum.de/wmts_topplus_open/1.0.0/WMTSCapabilities.xml",
                     olLayer: createKitasLayer()
                 }),
                 createSchulenLayer(),
diff --git a/src/samples/test-basemap-switcher/basemap-switcher-app/AppUI.tsx b/src/samples/test-basemap-switcher/basemap-switcher-app/AppUI.tsx
index 7a8721b74..f668de5ef 100644
--- a/src/samples/test-basemap-switcher/basemap-switcher-app/AppUI.tsx
+++ b/src/samples/test-basemap-switcher/basemap-switcher-app/AppUI.tsx
@@ -68,39 +68,38 @@ export function AppUI() {
                                     <ClearBaseLayerButton mapId={MAP_ID} />
                                 </Stack>
                             </Box>
-                            <MapAnchor position="top-right" horizontalGap={10} verticalGap={10}>
-                                <VStack
-                                    backgroundColor="whiteAlpha.900"
-                                    borderWidth="1px"
-                                    borderRadius="lg"
-                                    padding={2}
-                                    boxShadow="lg"
-                                    maxWidth="400px"
-                                >
-                                    <Text as="b">Description</Text>
-                                    <Text>
-                                        This application can be used to test the basemap switcher.
-                                        The basemap switcher synchronizes with the state of the
-                                        shared map model. If the map model is changed (for example,
-                                        by changing the current basemap), the basemap switcher must
-                                        update itself accordingly.
-                                    </Text>
-                                    <UnorderedList>
-                                        <ListItem>
-                                            Adding a new basemap updates the dropdown menu (new
-                                            option)
-                                        </ListItem>
-                                        <ListItem>
-                                            Changing the current basemap to another basemap updates
-                                            the selected option
-                                        </ListItem>
-                                        <ListItem>
-                                            Setting the current basemap to {"'undefined'"} also
-                                            updates the selection
-                                        </ListItem>
-                                    </UnorderedList>
-                                </VStack>
-                            </MapAnchor>
+                        </MapAnchor>
+                        <MapAnchor position="top-right" horizontalGap={10} verticalGap={10}>
+                            <VStack
+                                backgroundColor="whiteAlpha.900"
+                                borderWidth="1px"
+                                borderRadius="lg"
+                                padding={2}
+                                boxShadow="lg"
+                                maxWidth="400px"
+                            >
+                                <Text as="b">Description</Text>
+                                <Text>
+                                    This application can be used to test the basemap switcher. The
+                                    basemap switcher synchronizes with the state of the shared map
+                                    model. If the map model is changed (for example, by changing the
+                                    current basemap), the basemap switcher must update itself
+                                    accordingly.
+                                </Text>
+                                <UnorderedList>
+                                    <ListItem>
+                                        Adding a new basemap updates the dropdown menu (new option)
+                                    </ListItem>
+                                    <ListItem>
+                                        Changing the current basemap to another basemap updates the
+                                        selected option
+                                    </ListItem>
+                                    <ListItem>
+                                        Setting the current basemap to {"'undefined'"} also updates
+                                        the selection
+                                    </ListItem>
+                                </UnorderedList>
+                            </VStack>
                         </MapAnchor>
                     </MapContainer>
                 </Flex>
diff --git a/src/samples/toc-sample/index.html b/src/samples/test-toc/index.html
similarity index 100%
rename from src/samples/toc-sample/index.html
rename to src/samples/test-toc/index.html
diff --git a/src/samples/toc-sample/toc-app/AppUI.tsx b/src/samples/test-toc/toc-app/AppUI.tsx
similarity index 78%
rename from src/samples/toc-sample/toc-app/AppUI.tsx
rename to src/samples/test-toc/toc-app/AppUI.tsx
index 587e5dd7d..d0107eb66 100644
--- a/src/samples/toc-sample/toc-app/AppUI.tsx
+++ b/src/samples/test-toc/toc-app/AppUI.tsx
@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { Box, Flex } from "@open-pioneer/chakra-integration";
+import { Box, Flex, VStack, Text } from "@open-pioneer/chakra-integration";
 import { MapAnchor, MapContainer } from "@open-pioneer/map";
 import { SectionHeading, TitledSection, ToolButton } from "@open-pioneer/react-utils";
 import { Toc } from "@open-pioneer/toc";
@@ -75,6 +75,25 @@ export function AppUI() {
                                 </Box>
                             )}
                         </MapAnchor>
+                        <MapAnchor position="top-right" horizontalGap={10} verticalGap={10}>
+                            <VStack
+                                backgroundColor="whiteAlpha.900"
+                                borderWidth="1px"
+                                borderRadius="lg"
+                                padding={2}
+                                boxShadow="lg"
+                                maxWidth="400px"
+                            >
+                                <Text as="b">Description</Text>
+                                <Text>
+                                    This application can be used to test the TOC, including health
+                                    checks for configured layers. Two base layers ({'"'}TopPlus Open
+                                    {'"'} and {'"'}TopPlus Open (Grau){'"'}) and one operational
+                                    layer ({'"'}Schulstandorte{'"'}) will be unavailable and should
+                                    be marked as such by the UI.
+                                </Text>
+                            </VStack>
+                        </MapAnchor>
                         <MapAnchor position="bottom-right" horizontalGap={10} verticalGap={45}>
                             <Flex
                                 role="toolbar"
diff --git a/src/samples/test-toc/toc-app/CHANGELOG.md b/src/samples/test-toc/toc-app/CHANGELOG.md
new file mode 100644
index 000000000..2d05b63fb
--- /dev/null
+++ b/src/samples/test-toc/toc-app/CHANGELOG.md
@@ -0,0 +1 @@
+# toc-app
diff --git a/src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts b/src/samples/test-toc/toc-app/MapConfigProviderImpl.ts
similarity index 100%
rename from src/samples/toc-sample/toc-app/MapConfigProviderImpl.ts
rename to src/samples/test-toc/toc-app/MapConfigProviderImpl.ts
diff --git a/src/samples/toc-sample/toc-app/app.css b/src/samples/test-toc/toc-app/app.css
similarity index 100%
rename from src/samples/toc-sample/toc-app/app.css
rename to src/samples/test-toc/toc-app/app.css
diff --git a/src/samples/toc-sample/toc-app/app.ts b/src/samples/test-toc/toc-app/app.ts
similarity index 100%
rename from src/samples/toc-sample/toc-app/app.ts
rename to src/samples/test-toc/toc-app/app.ts
diff --git a/src/samples/toc-sample/toc-app/build.config.mjs b/src/samples/test-toc/toc-app/build.config.mjs
similarity index 100%
rename from src/samples/toc-sample/toc-app/build.config.mjs
rename to src/samples/test-toc/toc-app/build.config.mjs
diff --git a/src/samples/toc-sample/toc-app/i18n/de.yaml b/src/samples/test-toc/toc-app/i18n/de.yaml
similarity index 100%
rename from src/samples/toc-sample/toc-app/i18n/de.yaml
rename to src/samples/test-toc/toc-app/i18n/de.yaml
diff --git a/src/samples/toc-sample/toc-app/i18n/en.yaml b/src/samples/test-toc/toc-app/i18n/en.yaml
similarity index 100%
rename from src/samples/toc-sample/toc-app/i18n/en.yaml
rename to src/samples/test-toc/toc-app/i18n/en.yaml
diff --git a/src/samples/toc-sample/toc-app/package.json b/src/samples/test-toc/toc-app/package.json
similarity index 100%
rename from src/samples/toc-sample/toc-app/package.json
rename to src/samples/test-toc/toc-app/package.json
diff --git a/src/samples/toc-sample/toc-app/services.ts b/src/samples/test-toc/toc-app/services.ts
similarity index 100%
rename from src/samples/toc-sample/toc-app/services.ts
rename to src/samples/test-toc/toc-app/services.ts
diff --git a/src/samples/toc-sample/toc-app/CHANGELOG.md b/src/samples/toc-sample/toc-app/CHANGELOG.md
deleted file mode 100644
index ba677fe1b..000000000
--- a/src/samples/toc-sample/toc-app/CHANGELOG.md
+++ /dev/null
@@ -1 +0,0 @@
-# toc-map
diff --git a/vite.config.ts b/vite.config.ts
index 47b999d83..c9387b39a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,7 @@ const sampleSites = [
     
     "samples/theming-sample",
     "samples/test-basemap-switcher",
+    "samples/test-toc",
     "samples/test-highlight-and-zoom",
     "samples/test-menu-fix",
 

From c9c5fe851fdf5b785e1b2e9bc07b5a7d9f3ee1e5 Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 19 Dec 2023 17:07:28 +0100
Subject: [PATCH 59/60] remove obsolete code; move options next to current
 value

---
 .../basemap-switcher/BasemapSwitcher.tsx      |  4 ++--
 src/samples/test-toc/toc-app/AppUI.tsx        |  3 ++-
 src/samples/test-toc/toc-app/app.css          | 21 +------------------
 3 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/packages/basemap-switcher/BasemapSwitcher.tsx b/src/packages/basemap-switcher/BasemapSwitcher.tsx
index 13dc0851f..cd9145c19 100644
--- a/src/packages/basemap-switcher/BasemapSwitcher.tsx
+++ b/src/packages/basemap-switcher/BasemapSwitcher.tsx
@@ -94,7 +94,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
             options.push(emptyOption);
         }
 
-        const selectedLayer = options.filter((l) => l.layer === activeBaseLayer)[0];
+        const selectedLayer = options.find((l) => l.layer === activeBaseLayer);
         return { options, selectedLayer };
     }, [allowSelectingEmptyBasemap, baseLayers, map?.layers]);
 
@@ -113,6 +113,7 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     aria-labelledby={ariaLabelledBy}
                     className="basemap-switcher-select"
                     classNamePrefix="react-select"
+                    options={options}
                     value={selectedLayer}
                     onChange={(option) => option && activateLayer(option.value)}
                     isClearable={false}
@@ -128,7 +129,6 @@ export const BasemapSwitcher: FC<BasemapSwitcherProps> = (props) => {
                     }
                     isOptionDisabled={(option) => option?.layer?.loadState === "error"}
                     components={components}
-                    options={options}
                 />
             ) : null}
         </Box>
diff --git a/src/samples/test-toc/toc-app/AppUI.tsx b/src/samples/test-toc/toc-app/AppUI.tsx
index d0107eb66..34370ec31 100644
--- a/src/samples/test-toc/toc-app/AppUI.tsx
+++ b/src/samples/test-toc/toc-app/AppUI.tsx
@@ -34,7 +34,7 @@ export function AppUI() {
                     </Box>
                 }
             >
-                <Flex flex="1" direction="column" position="relative">
+                <Flex flex="1" direction="column">
                     <MapContainer
                         mapId={MAP_ID}
                         role="main"
@@ -65,6 +65,7 @@ export function AppUI() {
                                             >
                                                 <Toc
                                                     mapId={MAP_ID}
+                                                    showTools={true}
                                                     basemapSwitcherProps={{
                                                         allowSelectingEmptyBasemap: true
                                                     }}
diff --git a/src/samples/test-toc/toc-app/app.css b/src/samples/test-toc/toc-app/app.css
index 7c6cff3e7..4accb86f9 100644
--- a/src/samples/test-toc/toc-app/app.css
+++ b/src/samples/test-toc/toc-app/app.css
@@ -1,20 +1 @@
-@media only screen and (max-width: 500px) {
-    .search-top-center-placement {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        z-index: 1;
-    }
-}
-
-@media only screen and (min-width: 501px) {
-    .search-top-center-placement {
-        position: absolute;
-        left: 50%;
-        top: 0px;
-        transform: translate(-50%, 0px);
-        width: 500px;
-        z-index: 1;
-    }
-}
+/* suppress empty file warning */

From 8bb1611c1838a3dbd7dd0f2cee726d570447bce3 Mon Sep 17 00:00:00 2001
From: Michael Beckemeyer <m.beckemeyer@conterra.de>
Date: Tue, 19 Dec 2023 17:09:06 +0100
Subject: [PATCH 60/60] fix lockfile

---
 pnpm-lock.yaml | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a87994f5..0bd632c28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1149,19 +1149,7 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
 
-  src/samples/theming-sample/theming-app:
-    dependencies:
-      '@open-pioneer/chakra-integration':
-        specifier: ^1.1.0
-        version: 1.1.0(@chakra-ui/react@2.8.2)(@emotion/cache@11.11.0)(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(framer-motion@10.16.5)(react-dom@18.2.0)(react@18.2.0)
-      '@open-pioneer/runtime':
-        specifier: ^1.1.0
-        version: 1.1.0(@formatjs/intl@2.9.9)(@open-pioneer/base-theme@0.1.0)(@open-pioneer/chakra-integration@1.1.0)(@open-pioneer/core@1.1.0)(@open-pioneer/runtime-react-support@1.0.0)(react-dom@18.2.0)(react@18.2.0)
-      '@open-pioneer/theme':
-        specifier: workspace:^
-        version: link:../../../packages/theme
-
-  src/samples/toc-sample/toc-app:
+  src/samples/test-toc/toc-app:
     dependencies:
       '@chakra-ui/icons':
         specifier: ^2.1.0
@@ -1203,6 +1191,18 @@ importers:
         specifier: ^4.11.0
         version: 4.11.0(react@18.2.0)
 
+  src/samples/theming-sample/theming-app:
+    dependencies:
+      '@open-pioneer/chakra-integration':
+        specifier: ^1.1.0
+        version: 1.1.0(@chakra-ui/react@2.8.2)(@emotion/cache@11.11.0)(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(framer-motion@10.16.5)(react-dom@18.2.0)(react@18.2.0)
+      '@open-pioneer/runtime':
+        specifier: ^1.1.0
+        version: 1.1.0(@formatjs/intl@2.9.9)(@open-pioneer/base-theme@0.1.0)(@open-pioneer/chakra-integration@1.1.0)(@open-pioneer/core@1.1.0)(@open-pioneer/runtime-react-support@1.0.0)(react-dom@18.2.0)(react@18.2.0)
+      '@open-pioneer/theme':
+        specifier: workspace:^
+        version: link:../../../packages/theme
+
   support/disabled-package: {}
 
 packages: