@vcmap/ui 6.1.0-rc.5 → 6.1.0-rc.7

package/src/components/lists/VcsTreeviewTitle.vue

@@ -30,11 +30,18 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .disabled {
+    cursor: default;
+    opacity: var(--v-disabled-opacity);
+  }
 </style>
 <template>
   <div
     class="title-parent pr-2 vcs-treeview-title w-100"
-    :class="{ 'cursor-pointer': cursorPointer }"
+    :class="{
+      'cursor-pointer': cursorPointer && !item.disabled,
+      disabled: item.disabled,
+    }"
     ref="titleParent"
   >
     <span class="w-100">

package/src/contentTree/contentTreeCollection.js

@@ -212,6 +212,7 @@ class ContentTreeCollection extends IndexedCollection {
       { id, action, weight: subTreeViewItem[subTreeItemWeight] },
       vcsAppSymbol,
       ButtonLocation.CONTENT,
+      { mobile: true, desktop: true, tablet: true },
     );
     return () => {
       app.windowManager.remove(id);

package/src/contentTree/flightContentTreeItem.d.ts

@@ -1,9 +1,11 @@
 export default FlightContentTreeItem;
 export type FlightContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     flightName: string;
+    showWhenNotSupported?: boolean;
 };
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string, showWhenNotSupported?: boolean }} FlightContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 /**
  * A flight item. Allows for playing a flight from the content tree.
@@ -23,6 +25,11 @@ declare class FlightContentTreeItem extends VcsObjectContentTreeItem<any> {
      * @private
      */
     private _flightName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<Function>}
      * @private

package/src/contentTree/flightContentTreeItem.js

@@ -1,11 +1,13 @@
 import { CesiumMap } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import { reactive } from 'vue';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string }} FlightContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { flightName: string, showWhenNotSupported?: boolean }} FlightContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -36,6 +38,15 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._flightName = options.flightName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<Function>}
      * @private
@@ -161,7 +172,12 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
         this._app.flights.added.addEventListener(resetHandler),
       );
     } else {
-      this.visible = this._app.maps.activeMap instanceof CesiumMap;
+      let isCesium = this._app.maps.activeMap instanceof CesiumMap;
+      this.visible = isCesium || this._showWhenNotSupported;
+
+      if (this._showWhenNotSupported) {
+        this.disabled = !isCesium;
+      }
       this._setupPlayer();
       this.setPropertiesFromObject(this._flight);
 
@@ -174,7 +190,11 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
 
       this._listeners.push(
         this._app.maps.mapActivated.addEventListener(() => {
-          this.visible = this._app.maps.activeMap instanceof CesiumMap;
+          isCesium = this._app.maps.activeMap instanceof CesiumMap;
+          this.visible = isCesium || this._showWhenNotSupported;
+          if (this._showWhenNotSupported) {
+            this.disabled = !isCesium;
+          }
         }),
       );
     }
@@ -186,6 +206,9 @@ class FlightContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.flightName = this._flightName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/contentTree/groupContentTreeItem.d.ts

@@ -1,14 +1,30 @@
 export default GroupContentTreeItem;
+export type GroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
+    disableIfChildrenDisabled?: boolean;
+};
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} GroupContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
 /**
  * A clickable group item. When clicked, every child with a state not NONE will also be clicked.
  * @class
  * @extends {ContentTreeItem}
  */
 declare class GroupContentTreeItem extends ContentTreeItem {
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _disableIfChildrenDisabled;
     /**
      * @type {function():void}
      * @private
      */
     private _childWatcher;
+    /**
+     * @returns {GroupContentTreeItemOptions}
+     */
+    toJSON(): GroupContentTreeItemOptions;
 }
 import ContentTreeItem from './contentTreeItem.js';

package/src/contentTree/groupContentTreeItem.js

@@ -1,9 +1,15 @@
 import { watch } from 'vue';
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
 
+/**
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { disableIfChildrenDisabled?: boolean }} GroupContentTreeItemOptions
+ * @property {boolean} [disableIfChildrenDisabled=false] - optional flag to disable the contentTreeItem if all children are disabled.
+ */
+
 /**
  * A clickable group item. When clicked, every child with a state not NONE will also be clicked.
  * @class
@@ -24,6 +30,15 @@ class GroupContentTreeItem extends ContentTreeItem {
   constructor(options, app) {
     super(options, app);
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._disableIfChildrenDisabled = parseBoolean(
+      options.disableIfChildrenDisabled,
+      false,
+    );
+
     /**
      * @type {function():void}
      * @private
@@ -33,6 +48,10 @@ class GroupContentTreeItem extends ContentTreeItem {
       () => {
         const children = this._children.value;
         this.visible = children.some((c) => c.visible);
+
+        if (this._disableIfChildrenDisabled) {
+          this.disabled = children.every((c) => c.disabled);
+        }
         if (
           children.every((c) => c.state === StateActionState.NONE || !c.visible)
         ) {
@@ -74,11 +93,22 @@ class GroupContentTreeItem extends ContentTreeItem {
             state !== StateActionState.ACTIVE;
 
     const promises = this._children.value
-      .filter((c) => c.visible && statePredicate(c.state))
+      .filter((c) => c.visible && !c.disabled && statePredicate(c.state))
       .map((c) => c.clicked());
     await Promise.all(promises);
   }
 
+  /**
+   * @returns {GroupContentTreeItemOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this._disableIfChildrenDisabled) {
+      config.disableIfChildrenDisabled = this._disableIfChildrenDisabled;
+    }
+    return config;
+  }
+
   destroy() {
     this._childWatcher();
     super.destroy();

package/src/contentTree/layerContentTreeItem.d.ts

@@ -1,5 +1,6 @@
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string, showWhenNotSupported?: boolean }} LayerContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 /**
  * @typedef {import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & { availableStyles?: string[], defaultViewpoint?: string }} LayerContentTreeItemProperties
@@ -27,6 +28,7 @@ export function getStateFromLayer(layer: import("@vcmap/core").Layer): StateActi
 export default LayerContentTreeItem;
 export type LayerContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerName: string;
+    showWhenNotSupported?: boolean;
 };
 export type LayerContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
     availableStyles?: string[];
@@ -49,6 +51,11 @@ declare class LayerContentTreeItem extends VcsObjectContentTreeItem<LayerContent
      * @private
      */
     private _layerName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<Function>}
      * @private

package/src/contentTree/layerContentTreeItem.js

@@ -1,4 +1,5 @@
 import { Viewpoint } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import { reactive } from 'vue';
 import { StateActionState } from '../actions/stateRefAction.js';
 import {
@@ -12,7 +13,8 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string }} LayerContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerName: string, showWhenNotSupported?: boolean }} LayerContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -125,6 +127,15 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._layerName = options.layerName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<Function>}
      * @private
@@ -215,7 +226,11 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
         this._app.layers.added.addEventListener(resetHandler),
       );
     } else {
-      this.visible = this._layer.isSupported(this._app.maps.activeMap);
+      let isSupported = this._layer.isSupported(this._app.maps.activeMap);
+      this.visible = isSupported || this._showWhenNotSupported;
+      if (this._showWhenNotSupported) {
+        this.disabled = !isSupported;
+      }
       this.state = getStateFromLayer(this._layer);
       this._setLayerExtentAction();
       this.setPropertiesFromObject(this._layer);
@@ -235,7 +250,11 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
 
       this._listeners.push(
         this._app.maps.mapActivated.addEventListener(() => {
-          this.visible = this._layer.isSupported(this._app.maps.activeMap);
+          isSupported = this._layer.isSupported(this._app.maps.activeMap);
+          this.visible = isSupported || this._showWhenNotSupported;
+          if (this._showWhenNotSupported) {
+            this.disabled = !isSupported;
+          }
         }),
       );
     }
@@ -260,6 +279,9 @@ class LayerContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerName = this._layerName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/contentTree/layerGroupContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default LayerGroupContentTreeItem;
 export type LayerGroupContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     layerNames: string[];
+    showWhenNotSupported?: boolean;
     defaultViewpoint?: string;
     availableStyles?: string[];
 };
@@ -20,6 +21,11 @@ declare class LayerGroupContentTreeItem extends ContentTreeItem {
      * @private
      */
     private _layerNames;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<function():void>}
      * @private

package/src/contentTree/layerGroupContentTreeItem.js

@@ -1,3 +1,4 @@
+import { parseBoolean } from '@vcsuite/parsers';
 import ContentTreeItem, {
   contentTreeClassRegistry,
 } from './contentTreeItem.js';
@@ -10,8 +11,9 @@ import { StateActionState } from '../actions/stateRefAction.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { layerNames: string[], showWhenNotSupported?: boolean, defaultViewpoint?: string, availableStyles?: string[] }} LayerGroupContentTreeItemOptions
  * @property {Array<string>} layerNames list of LayerNames which should be activated on click
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  * @property {string} [defaultViewpoint] - the name of an optional default viewpoint
  */
 
@@ -63,6 +65,15 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
       ? options.layerNames.slice()
       : [];
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -121,8 +132,14 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
       }
     };
     const layers = this._layers;
+    let isSupported = layers.some((l) =>
+      l.isSupported(this._app.maps.activeMap),
+    );
 
-    this.visible = layers.some((l) => l.isSupported(this._app.maps.activeMap));
+    this.visible = isSupported || this._showWhenNotSupported;
+    if (this._showWhenNotSupported) {
+      this.disabled = !isSupported;
+    }
     this.state = getStateFromLayers(layers);
     setViewpointAction(this, this._app, this._defaultViewpoint);
     setStyleAction(
@@ -148,9 +165,13 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
 
     this._listeners.push(
       this._app.maps.mapActivated.addEventListener(() => {
-        this.visible = !!layers.find((l) =>
+        isSupported = layers.some((l) =>
           l.isSupported(this._app.maps.activeMap),
         );
+        this.visible = isSupported || this._showWhenNotSupported;
+        if (this._showWhenNotSupported) {
+          this.disabled = !isSupported;
+        }
       }),
     );
   }
@@ -179,6 +200,9 @@ class LayerGroupContentTreeItem extends ContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.layerNames = this._layerNames.slice();
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     if (this._defaultViewpoint) {
       config.defaultViewpoint = this._defaultViewpoint;
     }

package/src/contentTree/obliqueCollectionContentTreeItem.d.ts

@@ -1,6 +1,7 @@
 export default ObliqueCollectionContentTreeItem;
 export type ObliqueCollectionContentTreeItemOptions = import("./contentTreeItem.js").ContentTreeItemOptions & {
     collectionName: string;
+    showWhenNotSupported?: boolean;
 };
 export type ObliqueCollectionContentTreeItemProperties = import("./vcsObjectContentTreeItem.js").VcsObjectContentTreeItemProperties & {
     defaultViewpoint: string;
@@ -20,6 +21,11 @@ declare class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem<
      * @private
      */
     private _collectionName;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private _showWhenNotSupported;
     /**
      * @type {Array<function():void>}
      * @private

package/src/contentTree/obliqueCollectionContentTreeItem.js

@@ -1,4 +1,5 @@
 import { ObliqueMap, DefaultObliqueCollection } from '@vcmap/core';
+import { parseBoolean } from '@vcsuite/parsers';
 import VcsObjectContentTreeItem from './vcsObjectContentTreeItem.js';
 import { setViewpointAction } from './layerContentTreeItem.js';
 import { StateActionState } from '../actions/stateRefAction.js';
@@ -6,7 +7,8 @@ import { contentTreeClassRegistry } from './contentTreeItem.js';
 import { executeCallbacks } from '../callback/vcsCallback.js';
 
 /**
- * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { collectionName: string }} ObliqueCollectionContentTreeItemOptions
+ * @typedef {import("./contentTreeItem.js").ContentTreeItemOptions & { collectionName: string, showWhenNotSupported?: boolean }} ObliqueCollectionContentTreeItemOptions
+ * @property {boolean} [showWhenNotSupported=false] - optional flag to show the item even if it is not supported by the activeMap.
  */
 
 /**
@@ -43,6 +45,15 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
      */
     this._collectionName = options.collectionName;
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._showWhenNotSupported = parseBoolean(
+      options.showWhenNotSupported,
+      false,
+    );
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -105,6 +116,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
       const map = this._app.maps.activeMap;
       if (map instanceof ObliqueMap) {
         this.visible = true;
+        if (this._showWhenNotSupported) {
+          this.disabled = false;
+        }
         this.state =
           map.collection === this._collection
             ? StateActionState.ACTIVE
@@ -118,7 +132,10 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
           }),
         );
       } else {
-        this.visible = false;
+        this.visible = this._showWhenNotSupported;
+        if (this._showWhenNotSupported) {
+          this.disabled = this._showWhenNotSupported;
+        }
       }
 
       this.setPropertiesFromObject(this._collection);
@@ -171,6 +188,9 @@ class ObliqueCollectionContentTreeItem extends VcsObjectContentTreeItem {
   toJSON() {
     const config = super.toJSON();
     config.collectionName = this._collectionName;
+    if (this._showWhenNotSupported) {
+      config.showWhenNotSupported = this._showWhenNotSupported;
+    }
     return config;
   }
 

package/src/featureInfo/BalloonComponent.vue

@@ -177,13 +177,13 @@
 </script>
 
 <style lang="scss">
-  .balloon {
+  :not(.mobile) > .balloon {
     z-index: 0 !important;
   }
-  .balloon hr:first-child {
+  :not(.mobile) > .balloon hr:first-child {
     display: none;
   }
-  .balloon:after {
+  :not(.mobile) > .balloon:after {
     content: '';
     position: absolute;
     bottom: -12px;
@@ -194,11 +194,11 @@
     width: 0;
     filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .balloon:after {
+  :not(.mobile) > .balloon:after {
     border-color: rgb(var(--v-theme-surface-light)) transparent;
   }
-  .balloon .v-list-item .v-list-item__title,
-  .balloon .v-list-item .v-list-item__subtitle {
+  :not(.mobile) > .balloon .v-list-item .v-list-item__title,
+  :not(.mobile) > .balloon .v-list-item .v-list-item__subtitle {
     line-height: 18px;
   }
 </style>

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,25 +1,19 @@
 <template>
   <BalloonComponent v-bind="{ ...$attrs }" class="markdown-balloon-component">
-    <VcsMarkdown :content="content" />
+    <vcs-template-markdown v-bind="{ ...$attrs }" />
   </BalloonComponent>
 </template>
 <script>
   import BalloonComponent from './BalloonComponent.vue';
-  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
+  import VcsTemplateMarkdown from '../components/form-output/VcsTemplateMarkdown.vue';
 
   /**
    * @description A balloon showing markdown content
    */
   export default {
     name: 'MarkdownBalloonComponent',
-    props: {
-      content: {
-        type: String,
-        required: true,
-      },
-    },
     components: {
-      VcsMarkdown,
+      VcsTemplateMarkdown,
       BalloonComponent,
     },
   };

package/src/featureInfo/MarkdownBalloonComponent.vue.d.ts

@@ -1,12 +1,2 @@
-declare const _default: import("vue").DefineComponent<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}, any, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    content: {
-        type: StringConstructor;
-        required: true;
-    };
-}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/src/featureInfo/balloonHelper.js

@@ -75,7 +75,7 @@ export async function getBalloonPosition(app, position) {
  * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
  */
 export function setBalloonPosition(windowManager, id, windowPosition, target) {
-  if (!windowPosition) {
+  if (!windowPosition || !windowManager.has(id)) {
     return;
   }
 

package/src/featureInfo/featureInfo.js

@@ -224,6 +224,7 @@ function setupFeatureInfoTool(app) {
           action,
         },
         vcsAppSymbol,
+        { desktop: true, tablet: true, mobile: true },
       );
     }
   }
@@ -662,9 +663,7 @@ class FeatureInfo extends Collection {
         clusterGroup.vectorProperties.getValuesForFeatures([feature]),
         [feature],
       );
-      const clusterStyle = clusterGroup.style.createStyleFunction((layerName) =>
-        this._app.layers.getByKey(layerName),
-      )(clusterFeature, 1);
+      const clusterStyle = clusterGroup.styleFunction(clusterFeature, 1);
       const highlightStyle = getClusterHighlightStyle(
         clusterFeature,
         clusterGroup,

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -26,12 +26,6 @@ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
      * @type {string | string[]}
      */
     template: string | string[];
-    /**
-     * @param {Record<string, unknown>} attributes
-     * @protected
-     * @returns {string}
-     */
-    protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
      * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,5 +1,3 @@
-import { renderTemplate } from '@vcmap/core';
-import { parseAndSanitizeMarkdown } from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 
@@ -39,15 +37,6 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
       : options.template;
   }
 
-  /**
-   * @param {Record<string, unknown>} attributes
-   * @protected
-   * @returns {string}
-   */
-  _renderTemplate(attributes) {
-    return renderTemplate(this.template, attributes);
-  }
-
   /**
    * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
@@ -58,9 +47,11 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      content: parseAndSanitizeMarkdown(
-        this._renderTemplate({ ...properties, ...properties.attributes }),
-      ),
+      template: this.template,
+      context: {
+        ...properties,
+        ...properties.attributes,
+      },
     };
   }