@vcmap/ui 6.2.1 → 6.2.2

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-ffa735dc.js";
+export * from "./ui-b13e28a1.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-09a72820.js";
+export * from "./vue-6a295c0b.js";

package/dist/assets/{vuetify-def19d80.js → vuetify-a1930526.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-def19d80.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-09a72820.js";
+} await loadCss('./assets/vuetify-a1930526.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, Fragment as ie, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, isVNode as Rc, Comment as Nc, unref as ot, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, camelize as Ir, h as Gt, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onDeactivated as _r, onActivated as Wc, onMounted as Ye, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-6a295c0b.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-def19d80.js";
+export * from "./vuetify-a1930526.js";

package/index.d.ts

@@ -325,7 +325,7 @@ export { applyKeyMapping, applyValueMapping, default as AbstractFeatureInfoView
 export type * from "./src/featureInfo/abstractFeatureInfoView.d.ts";
 export { extractNestedKey, default as BalloonFeatureInfoView } from "./src/featureInfo/balloonFeatureInfoView.js";
 export type * from "./src/featureInfo/balloonFeatureInfoView.d.ts";
-export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener } from "./src/featureInfo/balloonHelper.js";
+export { getBalloonPosition, setBalloonPosition, setupBalloonPositionListener, getBalloonPositionFromFeature } from "./src/featureInfo/balloonHelper.js";
 export type * from "./src/featureInfo/balloonHelper.d.ts";
 export { getHighlightStyleFromStyle, getHighlightStyle, getClusterHighlightStyle, featureInfoViewSymbol } from "./src/featureInfo/featureInfo.js";
 export type * from "./src/featureInfo/featureInfo.d.ts";

package/index.js

@@ -191,6 +191,7 @@ export {
   getBalloonPosition,
   setBalloonPosition,
   setupBalloonPositionListener,
+  getBalloonPositionFromFeature,
 } from './src/featureInfo/balloonHelper.js';
 export { default as BalloonComponent } from './src/featureInfo/BalloonComponent.vue';
 export { default as AddressBalloonComponent } from './src/featureInfo/AddressBalloonComponent.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.2.1",
+  "version": "6.2.2",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -58,13 +58,14 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.3",
-    "@vcmap/core": "^6.2.2",
+    "@vcmap/core": "^6.2.3",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"
   },
   "overrides": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "@zip.js/zip.js": "2.7.68"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",

package/plugins/@vcmap-show-case/category-tester/src/CollectionComponentOptions.vue

@@ -24,13 +24,22 @@
         />
       </v-col>
     </v-row>
+    <v-row no-gutters>
+      <v-col>
+        <VcsLabel>{{ $st(`pagination`) }}</VcsLabel>
+      </v-col>
+      <v-col>
+        <VcsCheckbox v-model="pagination" />
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
-  import { inject, isRef, reactive } from 'vue';
+  import { inject, isRef, reactive, watch, ref } from 'vue';
   import { VContainer, VRow, VCol } from 'vuetify/components';
   import { VcsCheckbox, VcsLabel, VcsTextField } from '@vcmap/ui';
+  import { Collection } from '@vcmap/core';
 
   /**
    * Shows CollectionComponentOptions of a provided collectionComponent
@@ -45,7 +54,9 @@
       VRow,
       VCol,
     },
+    props: {},
     setup() {
+      /** @type {import("@vcmap/ui").CollectionComponentClass} */
       const collectionComponent = inject('collectionComponent');
       const localOptions = reactive({
         draggable: collectionComponent.draggable,
@@ -54,7 +65,34 @@
         renamable: collectionComponent.renamable,
         removable: collectionComponent.removable,
       });
-
+      // clone is for demonstration purposes only: caches the original items while pagination is active.
+      const collectionClone = new Collection();
+      const pagination = ref(!!collectionComponent.pagination.value);
+      watch(pagination, (value) => {
+        if (value) {
+          collectionClone.clear();
+          [...collectionComponent.collection].forEach((item) => {
+            collectionClone.add(item);
+          });
+          collectionComponent.setPagination({
+            // just for demonstration purposes -> get Items should fetch items from server.
+            getItems(startIndex, count) {
+              return {
+                items: [...collectionClone].slice(
+                  startIndex,
+                  count + startIndex,
+                ),
+                total: collectionClone.size,
+              };
+            },
+          });
+        } else {
+          collectionComponent.setPagination(undefined);
+          [...collectionClone].forEach((item) => {
+            collectionComponent.collection.add(item);
+          });
+        }
+      });
       return {
         title: collectionComponent.title,
         keys: Object.keys(localOptions),
@@ -67,6 +105,7 @@
             collectionComponent[key] = value;
           }
         },
+        pagination,
       };
     },
   };

package/plugins/@vcmap-show-case/category-tester/src/index.js

@@ -54,6 +54,7 @@ export default async function categoryTest() {
           singleSelect: 'Einfachauswahl',
           renamable: 'umbenennbar',
           removable: 'löschbar',
+          pagination: 'Pagination',
           fooEditor: {
             name: 'Name',
             title: 'Titel',
@@ -70,6 +71,7 @@ export default async function categoryTest() {
           singleSelect: 'single select',
           renamable: 'renamable',
           removable: 'removable',
+          pagination: 'Pagination',
           fooEditor: {
             name: 'Name',
             title: 'Title',

package/src/application/VcsSplashScreen.vue

@@ -12,6 +12,9 @@
     <v-card>
       <v-card-text class="pb-0 overflow-y-auto">
         <VcsMarkdown :content="$st(options.content)" />
+      </v-card-text>
+
+      <div class="vcs-splash-screen-checkboxes px-8">
         <VcsCheckbox v-if="options.acceptInput" v-model="checkBox">
           <template #label>
             <VcsMarkdown
@@ -32,7 +35,7 @@
             </div>
           </template>
         </VcsCheckbox>
-      </v-card-text>
+      </div>
 
       <v-card-actions class="vcs-splash-screen-actions">
         <div class="d-flex gc-2 w-100 justify-end">
@@ -197,4 +200,9 @@
     position: sticky !important;
     bottom: 0;
   }
+  .vcs-splash-screen-checkboxes {
+    background-color: rgb(var(--v-theme-surface));
+    position: sticky !important;
+    bottom: 0;
+  }
 </style>

package/src/components/lists/VcsTreeNode.vue

@@ -53,7 +53,7 @@
           :disabled="item.disabled"
           right
           tooltip-position="right"
-          block-overflow
+          :block-overflow="item.blockOverflow ?? true"
           class="col-4 pa-0 ml-auto pr-4"
         />
       </slot>
@@ -133,6 +133,7 @@
    * @property {Array<VcsTreeNodeItem>} [children] - An optional array of children. Can be binded to another key, using the `item-children` attributes of the VcsTreeview component.
    * @property {string|HTMLCanvasElement|HTMLImageElement|undefined} [icon] - An optional icon to display with this item. Can be a URL or HTMLElement.
    * @property {function(string):void} [clicked] - A callback called when the item is clicked.
+   * @property {boolean} [blockOverflow=true] - Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow.
    */
 
   /**

package/src/components/lists/VcsTreeNode.vue.d.ts

@@ -28,4 +28,8 @@ export type VcsTreeNodeItem = {
      * - A callback called when the item is clicked.
      */
     clicked?: ((arg0: string) => void) | undefined;
+    /**
+     * - Forwards the blockOverflow setting to the ActionButtonList, if true will reserve some space for an overflow.
+     */
+    blockOverflow?: boolean | undefined;
 };

package/src/contentTree/LayerSwap.vue

@@ -89,6 +89,15 @@
             name: l.name,
             title: l.properties?.title || l.name,
             index: app.layers.indexOf(l),
+            actions: [
+              {
+                name: 'layer-swap.delete',
+                icon: 'mdi-delete',
+                title: 'components.layerSwap.deleteButton',
+                callback: () => l.deactivate(),
+              },
+            ],
+            blockOverflow: false,
           };
           if (wmsGroupItemsMap[l.name]) {
             return {

package/src/contentTree/LayerSwap.vue.d.ts

@@ -4,6 +4,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         name: any;
         title: any;
         index: any;
+        actions: {
+            name: string;
+            icon: string;
+            title: string;
+            callback: () => any;
+        }[];
+        blockOverflow: boolean;
     } | {
         children: (Partial<import("./contentTreeItem.js", { with: { "resolution-mode": "import" } }).TreeViewItem> & {
             index: number;
@@ -13,6 +20,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         name: any;
         title: any;
         index: any;
+        actions: {
+            name: string;
+            icon: string;
+            title: string;
+            callback: () => any;
+        }[];
+        blockOverflow: boolean;
     })[]>;
     dropTargetZones(item: any, targetItem: any): false | {
         into: boolean;

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(

package/src/featureInfo/featureInfoInteraction.js

@@ -41,7 +41,10 @@ class FeatureInfoInteraction extends AbstractInteraction {
           featureId !== this._featureInfo.selectedClusterFeatureId
         ) {
           event.stopPropagation = true;
-          await this._featureInfo.selectClusterFeature(event.feature);
+          await this._featureInfo.selectClusterFeature(
+            event.feature,
+            event.position,
+          );
         }
       } else if (
         !this._featureInfo.selectedFeature ||

package/src/featureInfo/iframeWmsFeatureInfoView.js

@@ -1,6 +1,7 @@
 import { get as getOlProj } from 'ol/proj.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
+import { getBalloonPositionFromFeature } from './balloonHelper.js';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { infoFormat: string, title?: string, sandbox?:string, disableSandbox?: boolean }} IframeWmsFeatureInfoViewOptions
@@ -54,17 +55,22 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
    * @returns {import("../manager/window/windowManager.js").WindowComponentOptions}
    */
   getWindowComponentOptions(app, featureInfo, layer) {
+    const position = getBalloonPositionFromFeature(
+      featureInfo.feature,
+      layer,
+      featureInfo.position,
+    );
     const componentOptions = super.getWindowComponentOptions(
       app,
       featureInfo,
       layer,
     );
     const resolution = app.maps.activeMap.getCurrentResolution(
-      featureInfo.position,
+      position.position,
     );
     componentOptions.props.src =
       layer.featureProvider.wmsSource.getFeatureInfoUrl(
-        featureInfo.position,
+        position.position,
         resolution,
         getOlProj('EPSG:3857'),
         { INFO_FORMAT: this.infoFormat },
@@ -79,9 +85,13 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
    * @returns {import("./iframeFeatureInfoView.js").IframeFeatureInfoViewProps}
    */
   getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
     return {
+      ...properties,
       src: layer.featureProvider.wmsSource.getFeatureInfoUrl(
         featureInfo.position,
+        // no correct resolution available due to missing app.
+        // Thats why same is done in `getWindowComponentOptions` to override the src with correct url
         1,
         getOlProj('EPSG:3857'),
         { INFO_FORMAT: this.infoFormat },