@vcmap/ui 6.3.0-rc.5 → 6.3.0

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-1477acda.js";
+export * from "./ui-0e17681d.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-1a3ae885.js";
+export * from "./vue-3cd62695.js";

package/dist/assets/{vuetify-fdf20bf9.js → vuetify-61912396.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-fdf20bf9.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-1a3ae885.js";
+} await loadCss('./assets/vuetify-61912396.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, 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-3cd62695.js";
 function rt(e, n) {
   let t;
   function a() {
@@ -154,7 +154,7 @@ function Bt(e, n) {
 function Dl(e, n, t) {
   const a = /* @__PURE__ */ Object.create(null), l = /* @__PURE__ */ Object.create(null);
   for (const i in e)
-    n.some((o) => o instanceof RegExp ? o.test(i) : o === i) && !(t != null && t.some((o) => o === i)) ? a[i] = e[i] : l[i] = e[i];
+    n.some((o) => o instanceof RegExp ? o.test(i) : o === i) ? a[i] = e[i] : l[i] = e[i];
   return [a, l];
 }
 function Ce(e, n) {
@@ -14328,12 +14328,7 @@ function ul(e) {
       return [...new Set(g)];
     }
     return f({
-      type: "group",
-      items: v,
-      id: "dummy",
-      key: "dummy",
-      value: "dummy",
-      depth: 0
+      items: v
     });
   }
   const c = {
@@ -22504,22 +22499,26 @@ const bS = mb(sb, (e) => {
     ...Ec()
   },
   setup(e, n) {
-    const t = pt(), a = b(() => {
-      const l = t.addMinutes(t.startOfDay(e.day.date), e.intervalDuration * (e.index + e.intervalStart)), i = t.addMinutes(t.startOfDay(e.day.date), e.intervalDuration * (e.index + e.intervalStart + 1) - 1);
+    let {
+      emit: t,
+      slots: a
+    } = n;
+    const l = pt(), i = b(() => {
+      const o = l.addMinutes(l.startOfDay(e.day.date), e.intervalDuration * (e.index + e.intervalStart)), u = l.addMinutes(l.startOfDay(e.day.date), e.intervalDuration * (e.index + e.intervalStart + 1) - 1);
       return {
         ...e.day,
-        label: t.format(l, "fullTime24h"),
-        start: l,
-        end: i,
-        events: e.events ? e.events.filter((o) => !o.allDay && (t.isEqual(l, o.start) || t.isWithinRange(o.start, [l, i]) || t.isWithinRange(l, [o.start, o.end]) || t.isEqual(i, o.end))).map((o) => ({
-          ...o,
-          first: t.isEqual(l, o.start) || t.isWithinRange(o.start, [l, i]),
-          last: t.isEqual(i, o.end) || t.isWithinRange(o.end, [l, i])
+        label: l.format(o, "fullTime24h"),
+        start: o,
+        end: u,
+        events: e.events ? e.events.filter((s) => !s.allDay && (l.isEqual(o, s.start) || l.isWithinRange(s.start, [o, u]) || l.isWithinRange(o, [s.start, s.end]) || l.isEqual(u, s.end))).map((s) => ({
+          ...s,
+          first: l.isEqual(o, s.start) || l.isWithinRange(s.start, [o, u]),
+          last: l.isEqual(u, s.end) || l.isWithinRange(s.end, [o, u])
         })) : []
       };
     });
     return N(() => {
-      var l, i;
+      var o, u;
       return e.dayIndex === 0 ? r("div", {
         class: "v-calendar-day__row-with-label",
         style: `height: ${J(e.intervalHeight)}`
@@ -22527,17 +22526,17 @@ const bS = mb(sb, (e) => {
         class: "v-calendar-day__row-label"
       }, [r("slot", {
         name: "intervalFormat",
-        interval: a.value
-      }, [e.index ? e.intervalFormat ? typeof e.intervalFormat == "string" ? t.format(a.value.start, "hours12h") : e.intervalFormat(a.value) : a.value.label : ""])]), r("div", {
+        interval: i.value
+      }, [e.index ? e.intervalFormat ? typeof e.intervalFormat == "string" ? l.format(i.value.start, "hours12h") : e.intervalFormat(i.value) : i.value.label : ""])]), r("div", {
         class: "v-calendar-day__row-hairline"
       }, null), r("div", {
-        class: ["v-calendar-day__row-content", a.value.events.some((o) => !o.last) ? "v-calendar-day__row-content-through" : ""]
+        class: ["v-calendar-day__row-content", i.value.events.some((s) => !s.last) ? "v-calendar-day__row-content-through" : ""]
       }, [r("slot", {
         name: "intervalBody",
-        interval: a.value
-      }, [(l = a.value.events) == null ? void 0 : l.map((o) => r(yr, {
-        event: o,
-        interval: a.value,
+        interval: i.value
+      }, [(o = i.value.events) == null ? void 0 : o.map((s) => r(yr, {
+        event: s,
+        interval: i.value,
         intervalDivisions: e.intervalDivisions,
         intervalDuration: e.intervalDuration,
         intervalHeight: e.intervalHeight
@@ -22545,19 +22544,19 @@ const bS = mb(sb, (e) => {
         class: "v-calendar-day__row-without-label",
         style: `height: ${J(e.intervalHeight)}`
       }, [r("div", {
-        class: ["v-calendar-day__row-content", a.value.events.some((o) => !o.last) ? "v-calendar-day__row-content-through" : ""]
+        class: ["v-calendar-day__row-content", i.value.events.some((s) => !s.last) ? "v-calendar-day__row-content-through" : ""]
       }, [r("slot", {
         name: "intervalBody",
-        interval: a.value
-      }, [(i = a.value.events) == null ? void 0 : i.filter((o) => !o.allDay).map((o) => r(yr, {
-        event: o,
-        interval: a.value,
+        interval: i.value
+      }, [(u = i.value.events) == null ? void 0 : u.filter((s) => !s.allDay).map((s) => r(yr, {
+        event: s,
+        interval: i.value,
         intervalDivisions: e.intervalDivisions,
         intervalDuration: e.intervalDuration,
         intervalHeight: e.intervalHeight
       }, null))])])]);
     }), {
-      interval: a
+      interval: i
     };
   }
 }), Mc = M({

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-fdf20bf9.js";
+export * from "./vuetify-61912396.js";

package/index.d.ts

@@ -171,6 +171,8 @@ export { default as VcsDataTable } from "./src/components/tables/VcsDataTable.vu
 export type * from "./src/components/tables/VcsDataTable.vue.d.ts";
 export { default as VcsLabel } from "./src/components/form-inputs-controls/VcsLabel.vue";
 export type * from "./src/components/form-inputs-controls/VcsLabel.vue.d.ts";
+export { default as VcsLabeledSlider } from "./src/components/form-inputs-controls/VcsLabeledSlider.vue";
+export type * from "./src/components/form-inputs-controls/VcsLabeledSlider.vue.d.ts";
 export { default as VcsCheckbox } from "./src/components/form-inputs-controls/VcsCheckbox.vue";
 export type * from "./src/components/form-inputs-controls/VcsCheckbox.vue.d.ts";
 export { default as VcsRadio } from "./src/components/form-inputs-controls/VcsRadio.vue";

package/index.js

@@ -295,6 +295,7 @@ export { default as VcsHelpTooltip } from './src/components/notification/VcsHelp
 export { default as VcsTable } from './src/components/tables/VcsTable.vue';
 export { default as VcsDataTable } from './src/components/tables/VcsDataTable.vue';
 export { default as VcsLabel } from './src/components/form-inputs-controls/VcsLabel.vue';
+export { default as VcsLabeledSlider } from './src/components/form-inputs-controls/VcsLabeledSlider.vue';
 export { default as VcsCheckbox } from './src/components/form-inputs-controls/VcsCheckbox.vue';
 export { default as VcsRadio } from './src/components/form-inputs-controls/VcsRadio.vue';
 export { default as VcsFormSection } from './src/components/section/VcsFormSection.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.0-rc.5",
+  "version": "6.3.0",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -49,7 +49,7 @@
     "@vcsuite/check": "^3.0.0",
     "@vcsuite/logger": "^1.0.1",
     "@vcsuite/parsers": "^2.0.1",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.3",
     "fast-deep-equal": "^3.1.3",
     "marked": "^15.0.7",
     "semver": "^7.6.3",
@@ -57,8 +57,8 @@
     "vue-i18n": "^9.13.1"
   },
   "peerDependencies": {
-    "@vcmap-cesium/engine": "^11.0.4",
-    "@vcmap/core": "^6.3.0-rc.3",
+    "@vcmap-cesium/engine": "^11.0.5",
+    "@vcmap/core": "^6.3.1",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"

package/plugins/@vcmap-show-case/form-inputs-example/src/FormInputsExample.vue

@@ -225,6 +225,25 @@
               />
             </v-col>
           </v-row>
+          <VcsLabeledSlider
+            label="Labeled Slider"
+            v-model.number="state.numberInput"
+            :disabled="disabled"
+            unit="cm"
+            :min="0"
+            :max="100"
+            :step="0.001"
+          />
+          <VcsLabeledSlider
+            label="Labeled Slider with Input"
+            v-model.number="state.numberInput"
+            :disabled="disabled"
+            unit="cm"
+            :min="0"
+            :max="100"
+            :step="0.001"
+            allow-text-input
+          />
           <v-row no-gutters>
             <v-col>
               <VcsLabel :disabled="disabled" html-for="formattedNumber">
@@ -498,6 +517,7 @@
     VcsFormattedNumber,
     VcsFormSection,
     VcsLabel,
+    VcsLabeledSlider,
     VcsTextArea,
     VcsDatePicker,
     VcsSlider,
@@ -524,6 +544,7 @@
       VcsFormattedNumber,
       VcsFormSection,
       VcsLabel,
+      VcsLabeledSlider,
       VcsTextArea,
       VcsChipArrayInput,
       VcsCoordinate,

package/plugins/package.json

@@ -8,12 +8,12 @@
     "@vcmap/flight": "^3.0.0",
     "@vcmap/swipe-tool": "^4.0.0",
     "@vcmap/export": "^2.0.0",
-    "@vcmap/viewshed": "^3.0.0",
+    "@vcmap/viewshed": "^4.0.0",
     "@vcmap/measurement": "^5.0.0",
     "@vcmap/multi-view": "^3.0.0",
     "@vcmap/draw": "^5.0.0",
     "@vcmap/shadow": "^3.0.0",
-    "@vcmap/search-wfs": "^2.0.0",
+    "@vcmap/search-wfs": "^2.1.0",
     "@vcmap/search-esri": "^2.0.0",
     "@vcmap/search-coordinate": "^2.0.0",
     "@vcmap/link-button": "^2.0.0",
@@ -30,12 +30,13 @@
     "@vcmap/sensorthings": "^1.0.0",
     "@vcmap/cesium-inspector": "^2.0.0",
     "@vcmap/event-control": "^1.0.1",
-    "@vcmap/dynamic-layer": "^2.0.0",
+    "@vcmap/dynamic-layer": "^3.0.0",
     "@vcmap/geofence": "^1.0.2",
     "@vcmap/panorama": "^1.0.0",
     "@vcmap/layer-settings": "^1.0.1"
   },
   "optionalDependencies": {
+    "@vcmap/guided-tour": "^1.0.5",
     "@vcmap/planning": "^7.0.0"
   }
 }

package/src/components/form-inputs-controls/VcsLabeledSlider.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="vcs-labeled-slider">
+    <v-row no-gutters class="px-1">
+      <v-col>
+        <VcsLabel
+          :html-for="`${cid}-${label}`"
+          v-bind="$attrs"
+          :help-text="tooltip"
+          class="pt-1 gc-2"
+        >
+          {{ $t(label) }}
+        </VcsLabel>
+      </v-col>
+      <v-col :cols="textInputCols">
+        <VcsTextField
+          v-if="allowTextInput"
+          type="number"
+          v-bind="$attrs"
+          v-model.number="localValue"
+        />
+        <div
+          v-else
+          class="visible-value pt-1"
+          :class="{ 'vcs-disabled': $attrs.disabled }"
+        >
+          {{ getVisibleValue(localValue) }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row no-gutters class="slider-container">
+      <VcsSlider
+        :id="`${cid}-${label}`"
+        v-bind="$attrs"
+        v-model.number="localValue"
+      />
+    </v-row>
+  </div>
+</template>
+
+<script>
+  import { VCol, VRow } from 'vuetify/components';
+  import VcsTextField from './VcsTextField.vue';
+  import VcsLabel from './VcsLabel.vue';
+  import VcsSlider from './VcsSlider.vue';
+  import { useProxiedAtomicModel } from '../modelHelper.js';
+  import { useComponentId } from '../composables.js';
+
+  /**
+   * @description stylized component, rendering a row with a label and an inputfield, and another with a slider.
+   * @vue-prop {number} modelValue - The value modeled by the slider and inputfield.
+   * @vue-prop {string} label - The title of the value to be modeled. Will be translated.
+   * @vue-prop {string} [tooltip] - An optional tooltip for the label.
+   * @vue-prop {boolean} [allowTextInput=false] - Whether to allow the value to be manually set in an inputfield.
+   * @vue-prop {number} [textInputCols=6] - The number of columns the text input should take (out of 12).
+   * All other props will be forwarded to the slider and inputfield (if allowTextInput is true). E.g. min, max, step, disabled and unit can be provided to the component.
+   */
+  export default {
+    name: 'VcsLabeledSlider',
+    components: {
+      VCol,
+      VRow,
+      VcsLabel,
+      VcsSlider,
+      VcsTextField,
+    },
+    props: {
+      modelValue: { type: Number, required: true },
+      label: { type: String, required: true },
+      tooltip: { type: String, default: undefined },
+      allowTextInput: { type: Boolean, default: false },
+      textInputCols: { type: Number, default: 6 },
+    },
+    emits: ['update:modelValue'],
+    setup(props, { attrs, emit }) {
+      const cid = useComponentId();
+      const localValue = useProxiedAtomicModel(props, 'modelValue', emit);
+
+      function getVisibleValue(value) {
+        if (Number.isFinite(value)) {
+          const unitText = attrs.unit ? ` ${attrs.unit}` : '';
+          return `${value}${unitText}`;
+        }
+        return '';
+      }
+
+      return {
+        cid,
+        localValue,
+        getVisibleValue,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .slider-container {
+    padding-inline: 2px;
+    overflow: hidden;
+    :deep(.vcs-slider) {
+      overflow: visible !important;
+    }
+  }
+  .visible-value {
+    box-sizing: content-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: calc(var(--v-vcs-font-size) * 2 - 2px);
+  }
+  .vcs-disabled {
+    opacity: var(--v-disabled-opacity);
+  }
+</style>

package/src/components/form-inputs-controls/VcsLabeledSlider.vue.d.ts

@@ -0,0 +1,54 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    allowTextInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInputCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    cid: string;
+    localValue: import("vue").Ref<any>;
+    getVisibleValue: (value: any) => string;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltip: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    allowTextInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textInputCols: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    tooltip: string;
+    allowTextInput: boolean;
+    textInputCols: number;
+}, {}>;
+export default _default;

package/src/components/lists/VcsGroupedList.vue

@@ -20,7 +20,7 @@
    */
 
   /**
-   * @typedef {import("./VcsListItemComponent.vue").VcsListItem & { group: string } VcsGroupedListItem
+   * @typedef {import("./VcsListItemComponent.vue").VcsListItem & { group: string }} VcsGroupedListItem
    * @property {string} group
    */
 

package/src/components/viewpoint/VcsViewpointComponent.vue

@@ -125,41 +125,18 @@
         </template>
         <template v-if="isCesiumMap">
           <div v-for="key in ['heading', 'pitch', 'roll']" :key="key">
-            <v-row no-gutters>
-              <v-col cols="9">
-                <VcsLabel :html-for="`${cid}-${key}`">
-                  {{ $st(`components.viewpoint.${key}`) }}
-                </VcsLabel>
-              </v-col>
-              <v-col cols="3">
-                <VcsTextField
-                  :id="`${cid}-${key}`"
-                  :hide-spin-buttons="true"
-                  type="number"
-                  unit="°"
-                  :disabled="editAction.active"
-                  :decimals="0"
-                  v-model.number="localValue[key]"
-                  @blur="gotoViewpoint"
-                  @update:model-value="gotoViewpoint"
-                  :rules="[isFiniteNumber]"
-                  class="pr-0 ml-6"
-                />
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col cols="12">
-                <VcsSlider
-                  height="32"
-                  hide-details
-                  :step="0.1"
-                  :disabled="editAction.active"
-                  v-bind="hprSliderOptions[key]"
-                  v-model="localValue[key]"
-                  @update:model-value="gotoViewpoint"
-                />
-              </v-col>
-            </v-row>
+            <VcsLabeledSlider
+              :disabled="editAction.active"
+              :label="`components.viewpoint.${key}`"
+              unit="°"
+              allow-text-input
+              text-input-cols="3"
+              hide-spin-buttons
+              v-bind="hprSliderOptions[key]"
+              v-model="localValue[key]"
+              @blur="gotoViewpoint"
+              @update:model-value="gotoViewpoint"
+            />
           </div>
         </template>
       </v-container>
@@ -185,7 +162,7 @@
   import VcsTextField from '../form-inputs-controls/VcsTextField.vue';
   import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
   import VcsCoordinate from '../form-inputs-controls/VcsCoordinate.vue';
-  import VcsSlider from '../form-inputs-controls/VcsSlider.vue';
+  import VcsLabeledSlider from '../form-inputs-controls/VcsLabeledSlider.vue';
   import { useProxiedComplexModel } from '../modelHelper.js';
   import { useComponentId } from '../composables.js';
 
@@ -348,7 +325,7 @@
       VcsTextField,
       VcsCoordinate,
       VcsCheckbox,
-      VcsSlider,
+      VcsLabeledSlider,
     },
     props: {
       modelValue: {

package/src/featureInfo/balloonHelper.js

@@ -31,7 +31,7 @@ import {
  * balloon offset from location or click position in pixel
  * @type {{x: number, y: number}}
  */
-export const balloonOffset = { x: 55, y: 25 };
+export const balloonOffset = { x: 50, y: 20 };
 
 /**
  * @param {import("@vcmap-cesium/engine").Scene} scene
@@ -92,15 +92,10 @@ export function setBalloonPosition(windowManager, id, windowPosition, target) {
 
   const { width, height, maxWidth, maxHeight } = windowManager.get(id).position;
 
-  // Get the actual map target bounding rect to account for panel offsets
-  const targetRect = target?.getBoundingClientRect();
-  const offsetX = targetRect ? targetRect.left : 0;
-  const offsetY = targetRect ? targetRect.top : 0;
-
   const mapWindowPosition = getWindowPositionOptionsFromMapEvent(
     new Cartesian2(
-      windowPosition.x - balloonOffset.x + offsetX,
-      windowPosition.y - balloonOffset.y + offsetY,
+      windowPosition.x - balloonOffset.x,
+      windowPosition.y - balloonOffset.y,
     ),
     target,
     WindowAlignment.BOTTOM_LEFT,

package/src/featureInfo/featureInfo.js

@@ -195,8 +195,13 @@ export function getFeatureInfoViewForFeature(app, feature) {
 export function getGroupedFeatureList(app, features, position = undefined) {
   const groups = {};
   const items = features.map((f) => {
-    const oFeature = f[originalFeatureSymbol] ?? f;
     let actions;
+    const oFeature = f[originalFeatureSymbol] ?? f;
+    const layerName = oFeature[vcsLayerName];
+    const attributes = oFeature.getAttributes();
+    const layer = app.layers.getByKey(layerName);
+    const titlePropName = layer?.properties?.clusterFeatureTitleProperty;
+
     if (oFeature instanceof Feature) {
       actions = [
         createZoomToFeatureAction(
@@ -210,8 +215,9 @@ export function getGroupedFeatureList(app, features, position = undefined) {
     const listItem = reactive({
       name: oFeature.getId(),
       title:
-        oFeature.getAttributes()?.title ||
-        oFeature.getAttributes()?.name ||
+        attributes?.[titlePropName] ||
+        attributes?.title ||
+        attributes?.name ||
         oFeature.getId(),
       disabled: !getFeatureInfoViewForFeature(app, oFeature),
       selectionChanged: (value) => {
@@ -225,10 +231,9 @@ export function getGroupedFeatureList(app, features, position = undefined) {
       },
       actions,
     });
-    const layerName = oFeature[vcsLayerName];
     if (layerName) {
       if (!groups[layerName]) {
-        const title = app.layers.getByKey(layerName)?.properties?.title;
+        const title = layer?.properties?.title;
         groups[layerName] = { name: layerName, title: title || layerName };
       }
       listItem.group = layerName;

package/src/featureInfo/iframeWmsFeatureInfoView.js

@@ -1,4 +1,8 @@
-import { get as getOlProj } from 'ol/proj.js';
+import {
+  getMetersPerDegreeAtCoordinate,
+  mercatorProjection,
+} from '@vcmap/core';
+import { get as getOlProj, getTransform } from 'ol/proj.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 import { getBalloonPositionFromFeature } from './balloonHelper.js';
@@ -68,11 +72,20 @@ class IframeWmsFeatureInfoView extends AbstractFeatureInfoView {
     const resolution = app.maps.activeMap.getCurrentResolution(
       position.position,
     );
+
+    let res = resolution;
+    const projection = layer.featureProvider.wmsSource.getProjection();
+    const transform = getTransform(mercatorProjection.proj, projection);
+    const coords = transform(position.position.slice());
+    if (projection.getUnits() === 'degrees') {
+      const metersPerDegree = getMetersPerDegreeAtCoordinate(coords);
+      res = resolution / metersPerDegree;
+    }
     componentOptions.props.src =
       layer.featureProvider.wmsSource.getFeatureInfoUrl(
-        position.position,
-        resolution,
-        getOlProj('EPSG:3857'),
+        coords,
+        res,
+        projection,
         { INFO_FORMAT: this.infoFormat },
       );
     return componentOptions;

package/src/manager/window/windowHelper.d.ts

@@ -1,6 +1,15 @@
 /**
  *
- * @param {HTMLElement} target
+ * returns the targetSize of the div element of the panel where the Map is rendered.
+ * This is the base for calculating the position of the windows on the map, as the window position is relative to this element.
+ * @param {HTMLElement} target The map Target of the mapCollection
+ * @returns {DOMRect|null}
+ */
+export function getPanelTargetSize(target: HTMLElement): DOMRect | null;
+/**
+ *
+ * returns the targetSize of the windowManager div element.
+ * @param {HTMLElement} target The map Target of the mapCollection
  * @returns {DOMRect|null}
  */
 export function getTargetSize(target: HTMLElement): DOMRect | null;