@vcmap/ui 6.2.1 → 6.2.3

package/src/contentTree/wmsGroupContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default WMSGroupContentTreeItem;
 export type WMSGroupContentTreeItemOptions = import('./contentTreeItem.js').ContentTreeItemOptions & {
     layerName: string;
+    loadOnStartup?: boolean;
     showWhenNotSupported?: boolean;
     setWMSLayersExclusive?: boolean;
     hideStyleSelector?: boolean;
@@ -21,12 +22,13 @@ export type WMSEntry = {
 };
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
- * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
- * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * { layerName: string, loadOnStartup?: boolean, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
  * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [loadOnStartup=false] - optional flag to load the capabilities on startup, will be loaded on click otherwise. Leads to an inherent "initOpen" flag  if not true.
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
  * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
- * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ * @property {string[]} [allowedWMSLayers] - The list of layers to be shown, other available layers will not be shown.
  */
 /**
  * @typedef {Object} WMSStyleEntry
@@ -61,6 +63,11 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _layerName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _loadOnStartup;
     /**
      * @type {boolean}
      * @private
@@ -115,6 +122,12 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _pauseStateChangedListener;
+    /**
+     * Flag to track if children have been loaded
+     * @type {boolean}
+     * @private
+     */
+    private _childrenLoaded;
     /**
      * readonly access, do not manipulate the entries directly.
      * @type {Array<WMSEntry>}
@@ -157,6 +170,12 @@ declare class WMSGroupContentTreeItem extends VcsObjectContentTreeItem<import(".
      * @private
      */
     private _setStateFromLayer;
+    /**
+     * Loads WMS entries and creates child items
+     * @returns {Promise<void>}
+     * @private
+     */
+    private _loadWMSChildren;
     /**
      * @returns {Promise<void>}
      * @private

package/src/contentTree/wmsGroupContentTreeItem.js

@@ -112,12 +112,13 @@ function createWMSChildContentTreeItem(
 
 /**
  * @typedef {import('./contentTreeItem.js').ContentTreeItemOptions &
- * { layerName: string, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
- * @property {boolean} showWhenNotSupported - optional flag to show the item even if it is not supported by the activeMap.
+ * { layerName: string, loadOnStartup?: boolean, showWhenNotSupported?: boolean, setWMSLayersExclusive?:boolean, hideStyleSelector?:boolean, allowedWMSLayers?:string[]}} WMSGroupContentTreeItemOptions
  * @property {string} layerName - The name of the WMSLayer to show the children of.
+ * @property {boolean} [loadOnStartup=false] - optional flag to load the capabilities on startup, will be loaded on click otherwise. Leads to an inherent "initOpen" flag  if not true.
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {boolean} [setWMSLayersExclusive=false] - Whether the WMSlayers are mutually exclusive.
  * @property {boolean} [hideStyleSelector=false] - Whether the layer style can be selected. Will add a StyleSelector action to compatible items if the Layer has more than one style.
- * @property {string[]} allowedWMSLayers - The list of layers to be shown, other available layers will not be shown.
+ * @property {string[]} [allowedWMSLayers] - The list of layers to be shown, other available layers will not be shown.
  */
 
 /**
@@ -154,7 +155,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
    * @param {import("../vcsUiApp.js").default} app
    */
   constructor(options, app) {
-    super(options, app);
+    super({ initOpen: !options.loadOnStartup, ...options }, app);
 
     /**
      * @type {string}
@@ -162,6 +163,12 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._loadOnStartup = parseBoolean(options.loadOnStartup, false);
+
     /**
      * @type {boolean}
      * @private
@@ -180,7 +187,7 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       false,
     );
     // if WMSLayers should be handled exclusive, the item should handle like a NodeContentTreeItem.
-    this.clickable = !this._setWMSLayersExclusive;
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
 
     /**
      * @type {boolean}
@@ -188,9 +195,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._hideStyleSelector = parseBoolean(options.hideStyleSelector, false);
 
-    this.state = this._setWMSLayersExclusive
-      ? StateActionState.NONE
-      : StateActionState.INACTIVE;
+    this.state =
+      this._setWMSLayersExclusive || !this._loadOnStartup
+        ? StateActionState.NONE
+        : StateActionState.INACTIVE;
 
     /**
      * @type {boolean}
@@ -238,6 +246,13 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._pauseStateChangedListener = false;
 
+    /**
+     * Flag to track if children have been loaded
+     * @type {boolean}
+     * @private
+     */
+    this._childrenLoaded = false;
+
     this._setup();
   }
 
@@ -421,6 +436,10 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     this._listeners.splice(0);
     this._availableWMSEntries = [];
     this._legendSet = false;
+    this._childrenLoaded = false;
+
+    // Reset clickable state based on initial configuration
+    this.clickable = !this._setWMSLayersExclusive || !this._loadOnStartup;
   }
 
   /**
@@ -463,6 +482,83 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     }
   }
 
+  /**
+   * Loads WMS entries and creates child items
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _loadWMSChildren() {
+    if (this._childrenLoaded || !this._layer) {
+      return;
+    }
+
+    this.state = StateActionState.LOADING;
+    this.clickable = !this._setWMSLayersExclusive;
+
+    try {
+      const availableWMSEntries = await getWMSEntries(
+        this._layer.url,
+        this._layer.parameters,
+      );
+      // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
+      if (!this._layer) {
+        return;
+      }
+      this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
+        return this._allowedWMSLayers
+          ? this._allowedWMSLayers.includes(wmsEntry.name)
+          : true;
+      });
+      const childItems = this._availableWMSEntries.map((wmsEntry) =>
+        createWMSChildContentTreeItem(
+          this._app,
+          wmsEntry,
+          this.name,
+          this._hideStyleSelector,
+        ),
+      );
+      childItems.forEach((childItem) => {
+        this._app.contentTree.add(childItem);
+        childItem.disabled = this.disabled;
+        this._listeners.push(
+          childItem.clickedEvent.addEventListener(() => {
+            this._handleChildClickedEvent(childItem);
+          }),
+          childItem.styleSelected.addEventListener((style) => {
+            this._handleStyleSelectedEvent(childItem, style);
+          }),
+        );
+      });
+      this._childItems = childItems;
+      // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
+      if (this._layer.properties.legend) {
+        this._legendSet = true;
+      }
+      // we need to get the Initial State from the Layer, to set the correct State to the children.
+      this._setStateFromLayer();
+      // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
+      this._setState();
+      this._setLegend();
+      this._childrenLoaded = true;
+
+      // Update clickable state after children are loaded
+      if (!this._setWMSLayersExclusive) {
+        this.clickable = true;
+      }
+    } catch (e) {
+      // if the layer is not there it has been removed while fetching the capabilities.
+      if (this._layer) {
+        this._layer.deactivate();
+        this.visible = false;
+        this._invalid = true;
+      }
+      getLogger(this.className).error(
+        `An error occured while fetching the ${this._layerName} capabilities:`,
+        e,
+      );
+    }
+  }
+
   /**
    * @returns {Promise<void>}
    * @private
@@ -489,7 +585,6 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
       if (this._showWhenNotSupported) {
         this.disabled = !isSupported;
       }
-      this.state = StateActionState.LOADING;
       this.setPropertiesFromObject(this._layer);
 
       this._listeners.push(
@@ -517,67 +612,18 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
           }
         }),
       );
-      try {
-        const availableWMSEntries = await getWMSEntries(
-          this._layer.url,
-          this._layer.parameters,
-        );
-        // check if the layer still exists, it can happen that the layer was removed while fetching the capabilities.
-        if (!this._layer) {
-          return;
-        }
-        this._availableWMSEntries = availableWMSEntries.filter((wmsEntry) => {
-          return this._allowedWMSLayers
-            ? this._allowedWMSLayers.includes(wmsEntry.name)
-            : true;
-        });
-        const childItems = this._availableWMSEntries.map((wmsEntry) => {
-          return createWMSChildContentTreeItem(
-            this._app,
-            wmsEntry,
-            this.name,
-            this._hideStyleSelector,
-          );
-        });
-        childItems.forEach((childItem) => {
-          this._app.contentTree.add(childItem);
-          childItem.disabled = this.disabled;
-          this._listeners.push(
-            childItem.clickedEvent.addEventListener(() => {
-              this._handleChildClickedEvent(childItem);
-            }),
-            childItem.styleSelected.addEventListener((style) => {
-              this._handleStyleSelectedEvent(childItem, style);
-            }),
-          );
-        });
-        this._childItems = childItems;
-        // check if we do have a legend already configured, if yes we set a flag, that we do not need to set the legend.
-        if (this._layer.properties.legend) {
-          this._legendSet = true;
-        }
-        // we need to get the Initial State from the Layer, to set the correct State to the children.
-        this._setStateFromLayer();
-        // the layer State maybe incomplete or does not fit to the wmsGroupContentTreeItem, so we need to set the State to the Layer.
-        this._setState();
-        this._setLegend();
-      } catch (e) {
-        // if the layer is not there it has been removed while fetching the capabilities.
-        if (this._layer) {
-          this._layer.deactivate();
-          this.visible = false;
-          this._invalid = true;
-        }
-        getLogger(this.className).error(
-          `An error occured while fetching the ${this._layerName} capabilities:`,
-          e,
-        );
+      if (this._loadOnStartup) {
+        await this._loadWMSChildren();
       }
     }
   }
 
   async clicked() {
     await super.clicked();
+    if (!this._childrenLoaded) {
+      await this._loadWMSChildren();
+      return;
+    }
     if (this.state === StateActionState.NONE || this._setWMSLayersExclusive) {
       return;
     }
@@ -591,12 +637,28 @@ class WMSGroupContentTreeItem extends VcsObjectContentTreeItem {
     await this._setStateToLayer();
   }
 
+  /**
+   * Returns a readonly TreeViewItem used for rendering the current item.
+   * @returns {import('./contentTreeItem.js').TreeViewItem}
+   */
+  getTreeViewItem() {
+    const item = super.getTreeViewItem();
+    item.forceNodeDisplay = !this._loadOnStartup;
+    return item;
+  }
   /**
    * @returns {WMSGroupContentTreeItemOptions}
    */
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    const defaultInitOpen = !this._loadOnStartup;
+    if (this.initOpen !== defaultInitOpen) {
+      config.initOpen = this.initOpen;
+    }
+    if (this._loadOnStartup) {
+      config.loadOnStartup = this._loadOnStartup;
+    }
     if (this._showWhenNotSupported) {
       config.showWhenNotSupported = this._showWhenNotSupported;
     }

package/src/featureInfo/balloonFeatureInfoView.d.ts

@@ -15,9 +15,23 @@ export type BalloonFeatureInfoViewProps = import("./abstractFeatureInfoView.js")
     balloonTitle: string;
     balloonSubtitle: string;
     position: import("ol/coordinate.js").Coordinate;
-    heightReference: HeightReference;
+    heightReference: import("@vcmap-cesium/engine").HeightReference;
     heightOffset: number;
 };
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { balloonTitle?: string, balloonSubtitle?: string }} BalloonFeatureInfoViewOptions
+ * @property {string} [balloonTitle] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonSubtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ */
+/**
+ * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoProps & {
+ *   balloonTitle: string,
+ *   balloonSubtitle: string,
+ *   position: import("ol/coordinate.js").Coordinate
+ *   heightReference: import("@vcmap-cesium/engine").HeightReference,
+ *   heightOffset: number
+ * }} BalloonFeatureInfoViewProps
+ */
 /**
  * @class
  * @description An balloon view.
@@ -48,5 +62,4 @@ declare class BalloonFeatureInfoView extends AbstractFeatureInfoView {
      */
     toJSON(): BalloonFeatureInfoViewOptions;
 }
-import { HeightReference } from '@vcmap-cesium/engine';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';

package/src/featureInfo/balloonFeatureInfoView.js

@@ -1,24 +1,8 @@
-import { Feature } from 'ol';
-import { getCenter } from 'ol/extent.js';
-import Point from 'ol/geom/Point.js';
-import {
-  Cartographic,
-  Entity,
-  HeightReference,
-  Math as CesiumMath,
-} from '@vcmap-cesium/engine';
-import {
-  getGeometryHeight,
-  getHeightInfo,
-  isAbsoluteHeightReference,
-  isRelativeHeightReference,
-  Projection,
-  VectorProperties,
-} from '@vcmap/core';
 import { check } from '@vcsuite/check';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import BalloonComponent from './BalloonComponent.vue';
+import { getBalloonPositionFromFeature } from './balloonHelper.js';
 
 /**
  * derive value from attributes
@@ -47,91 +31,11 @@ export function extractNestedKey(key, attrs, defaultValue = null) {
  *   balloonTitle: string,
  *   balloonSubtitle: string,
  *   position: import("ol/coordinate.js").Coordinate
- *   heightReference: HeightReference,
+ *   heightReference: import("@vcmap-cesium/engine").HeightReference,
  *   heightOffset: number
  * }} BalloonFeatureInfoViewProps
  */
 
-/**
- * @param {import("@vcmap/core").Cartesian3} cartesian
- * @returns {import("ol/coordinate.js").Coordinate}
- */
-function cartesian3ToCoordinate(cartesian) {
-  const cartographic = Cartographic.fromCartesian(cartesian);
-  const wgs84position = [
-    CesiumMath.toDegrees(cartographic.longitude),
-    CesiumMath.toDegrees(cartographic.latitude),
-    cartographic.height,
-  ];
-  return Projection.wgs84ToMercator(wgs84position);
-}
-
-/**
- * @param {FeatureType} feature
- * @param {import("@vcmap/core").Layer} layer
- * @param {import("ol/coordinate.js").Coordinate|undefinded} clickedPosition
- * @returns {{position?: import("ol/coordinate.js").Coordinate, heightReference: HeightReference, heightOffset: number}}
- */
-function getPositionFromFeature(feature, layer, clickedPosition) {
-  let heightReference = HeightReference.NONE;
-  let heightOffset = 0;
-  let position = null;
-  if (feature instanceof Feature && feature.getGeometry() instanceof Point) {
-    const point = feature.getGeometry();
-    const vectorProperties =
-      layer.vectorProperties ??
-      layer.featureProvider?.vectorProperties ??
-      new VectorProperties();
-    const renderAs = vectorProperties.renderAs(feature);
-    if (renderAs === 'geometry') {
-      // special case where we do not want to use the clickedPosition but the exact Position of the Point
-      const heightInfo = getHeightInfo(feature, point, vectorProperties);
-      ({ heightReference } = heightInfo);
-      let height = clickedPosition?.[2] ?? 0;
-      position = point.getCoordinates();
-      // if clamped, do nothing
-      if (isRelativeHeightReference(heightReference)) {
-        height = getGeometryHeight(point, heightInfo);
-        if (heightInfo.groundLevel != null) {
-          // we have a groundLevel, so no need to clamp the point
-          heightReference = HeightReference.NONE;
-        }
-        if (heightInfo.heightAboveGround != null) {
-          heightOffset += heightInfo.heightAboveGround;
-        }
-        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
-          (acc, storeyHeight) => acc + storeyHeight,
-          0,
-        );
-        heightOffset += extrudedHeight;
-        height += extrudedHeight;
-        position = [position[0], position[1], height];
-      } else if (isAbsoluteHeightReference(heightReference)) {
-        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
-          (acc, storeyHeight) => acc + storeyHeight,
-          0,
-        );
-        position = [
-          position[0],
-          position[1],
-          heightInfo.groundLevelOrMinHeight + extrudedHeight,
-        ];
-      }
-      return { position, heightOffset, heightReference };
-    }
-  }
-  if (clickedPosition) {
-    position = clickedPosition.slice();
-  } else if (feature instanceof Feature && feature.getGeometry()) {
-    position = getCenter(feature.getGeometry().getExtent());
-  } else if (feature instanceof Entity) {
-    position = cartesian3ToCoordinate(feature.position);
-  } else if (feature?.primitive?.boundingSphere?.center) {
-    position = cartesian3ToCoordinate(feature.primitive.boundingSphere.center);
-  }
-  return { position, heightReference, heightOffset };
-}
-
 /**
  * @class
  * @description An balloon view.
@@ -170,11 +74,12 @@ class BalloonFeatureInfoView extends AbstractFeatureInfoView {
    */
   getProperties(featureInfo, layer) {
     const properties = super.getProperties(featureInfo, layer);
-    const { position, heightReference, heightOffset } = getPositionFromFeature(
-      featureInfo.feature,
-      layer,
-      featureInfo.position,
-    );
+    const { position, heightReference, heightOffset } =
+      getBalloonPositionFromFeature(
+        featureInfo.feature,
+        layer,
+        featureInfo.position,
+      );
     return {
       ...properties,
       position,

package/src/featureInfo/balloonHelper.d.ts

@@ -20,6 +20,17 @@ export function setBalloonPosition(windowManager: import("../manager/window/wind
  * @returns {Promise<(() => void)>}
  */
 export function setupBalloonPositionListener(vcsApp: import("@vcmap/core").VcsApp, windowId: string, clickedPosition: import("ol/coordinate.js").Coordinate): Promise<(() => void)>;
+/**
+ * @param {Feature} feature
+ * @param {import("@vcmap/core").Layer} layer
+ * @param {import("ol/coordinate.js").Coordinate|undefined} clickedPosition
+ * @returns {{position?: import("ol/coordinate.js").Coordinate, heightReference: HeightReference, heightOffset: number}}
+ */
+export function getBalloonPositionFromFeature(feature: Feature, layer: import("@vcmap/core").Layer, clickedPosition: import("ol/coordinate.js").Coordinate | undefined): {
+    position?: import("ol/coordinate.js").Coordinate;
+    heightReference: HeightReference;
+    heightOffset: number;
+};
 /**
  * balloon offset from location or click position in pixel
  * @type {{x: number, y: number}}
@@ -29,3 +40,5 @@ export const balloonOffset: {
     y: number;
 };
 import { Cartesian2 } from '@vcmap-cesium/engine';
+import Feature from 'ol/Feature.js';
+import { HeightReference } from '@vcmap-cesium/engine';

package/src/featureInfo/balloonHelper.js

@@ -2,15 +2,26 @@ import {
   Cartesian2,
   Cartographic,
   SceneTransforms,
+  HeightReference,
+  Entity,
 } from '@vcmap-cesium/engine';
 import {
+  cartesianToMercator,
   CesiumMap,
+  getGeometryHeight,
+  getHeightInfo,
+  isAbsoluteHeightReference,
+  isRelativeHeightReference,
   ObliqueMap,
   OpenlayersMap,
   Projection,
   transformToImage,
+  VectorProperties,
 } from '@vcmap/core';
 import { unByKey } from 'ol/Observable.js';
+import Feature from 'ol/Feature.js';
+import { Point } from 'ol/geom.js';
+import { getCenter } from 'ol/extent.js';
 import {
   getWindowPositionOptionsFromMapEvent,
   WindowAlignment,
@@ -173,3 +184,69 @@ export async function setupBalloonPositionListener(
 
   return destroy;
 }
+
+/**
+ * @param {Feature} feature
+ * @param {import("@vcmap/core").Layer} layer
+ * @param {import("ol/coordinate.js").Coordinate|undefined} clickedPosition
+ * @returns {{position?: import("ol/coordinate.js").Coordinate, heightReference: HeightReference, heightOffset: number}}
+ */
+export function getBalloonPositionFromFeature(feature, layer, clickedPosition) {
+  let heightReference = HeightReference.NONE;
+  let heightOffset = 0;
+  let position = null;
+  if (feature instanceof Feature && feature.getGeometry() instanceof Point) {
+    const point = feature.getGeometry();
+    const vectorProperties =
+      layer.vectorProperties ??
+      layer.featureProvider?.vectorProperties ??
+      new VectorProperties();
+    const renderAs = vectorProperties.renderAs(feature);
+    if (renderAs === 'geometry') {
+      // special case where we do not want to use the clickedPosition but the exact Position of the Point
+      const heightInfo = getHeightInfo(feature, point, vectorProperties);
+      ({ heightReference } = heightInfo);
+      let height = clickedPosition?.[2] ?? 0;
+      position = point.getCoordinates();
+      // if clamped, do nothing
+      if (isRelativeHeightReference(heightReference)) {
+        height = getGeometryHeight(point, heightInfo);
+        if (heightInfo.groundLevel != null) {
+          // we have a groundLevel, so no need to clamp the point
+          heightReference = HeightReference.NONE;
+        }
+        if (heightInfo.heightAboveGround != null) {
+          heightOffset += heightInfo.heightAboveGround;
+        }
+        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
+          (acc, storeyHeight) => acc + storeyHeight,
+          0,
+        );
+        heightOffset += extrudedHeight;
+        height += extrudedHeight;
+        position = [position[0], position[1], height];
+      } else if (isAbsoluteHeightReference(heightReference)) {
+        const extrudedHeight = heightInfo.storeyHeightsAboveGround.reduce(
+          (acc, storeyHeight) => acc + storeyHeight,
+          0,
+        );
+        position = [
+          position[0],
+          position[1],
+          heightInfo.groundLevelOrMinHeight + extrudedHeight,
+        ];
+      }
+      return { position, heightOffset, heightReference };
+    }
+  }
+  if (clickedPosition) {
+    position = clickedPosition.slice();
+  } else if (feature instanceof Feature && feature.getGeometry()) {
+    position = getCenter(feature.getGeometry().getExtent());
+  } else if (feature instanceof Entity) {
+    position = cartesianToMercator(feature.position);
+  } else if (feature?.primitive?.boundingSphere?.center) {
+    position = cartesianToMercator(feature.primitive.boundingSphere.center);
+  }
+  return { position, heightReference, heightOffset };
+}

package/src/featureInfo/featureInfo.d.ts

@@ -225,9 +225,10 @@ declare class FeatureInfo extends Collection<AbstractFeatureInfoView> {
      * The cluster feature will be cloned, highlighted and added on an internal scratch layer to ensure availability until deselection.
      * The original cluster feature will be hidden until deselection.
      * @param {import("ol").Feature} clusterFeature
+     * @param {import("ol/coordinate.js").Coordinate} position
      * @returns {Promise<void>}
      */
-    selectClusterFeature(clusterFeature: import("ol").Feature): Promise<void>;
+    selectClusterFeature(clusterFeature: import("ol").Feature, position: import("ol/coordinate.js").Coordinate): Promise<void>;
     /**
      * Clears the current feature. remove window, highlighting and provided feature.
      * @private

package/src/featureInfo/featureInfo.js

@@ -296,7 +296,10 @@ function setupFeatureInfoTool(app) {
   });
 
   function addFeatureInfoButton() {
-    if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
+    if (
+      app.uiConfig.getByKey('startingFeatureInfo')?.value !== false &&
+      !action.active
+    ) {
       action.callback();
     }
     if (!app.toolboxManager.has('featureInfo')) {
@@ -754,9 +757,10 @@ class FeatureInfo extends Collection {
    * The cluster feature will be cloned, highlighted and added on an internal scratch layer to ensure availability until deselection.
    * The original cluster feature will be hidden until deselection.
    * @param {import("ol").Feature} clusterFeature
+   * @param {import("ol/coordinate.js").Coordinate} position
    * @returns {Promise<void>}
    */
-  async selectClusterFeature(clusterFeature) {
+  async selectClusterFeature(clusterFeature, position) {
     this.clearFeature();
     this._clearClusterInternal();
     const id = `cluster-at-${clusterFeature.getGeometry().getCoordinates().join('-')}`;
@@ -800,7 +804,11 @@ class FeatureInfo extends Collection {
     this._scratchLayer.addFeatures([clonedFeature]);
 
     const features = clusterFeature.get('features');
-    const { items, groups } = getGroupedFeatureList(this._app, features);
+    const { items, groups } = getGroupedFeatureList(
+      this._app,
+      features,
+      position,
+    );
 
     this._clusterWindowId = id;
     this._app.windowManager.add(