@vcmap/ui 6.0.0-rc.2 → 6.0.0-rc.5

package/src/contentTree/contentTreeCollection.js

@@ -53,6 +53,24 @@ class ContentTreeCollection extends IndexedCollection {
      */
     this._weightListeners = new Map();
 
+    const uiConfigChanged = () => {
+      this.subTreeViewItems.value.forEach((subTree) => {
+        if (
+          !this._app.uiConfig.config.hideContentTree &&
+          !this._subTreeListeners.has(subTree.name)
+        ) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        } else if (this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.delete(subTree.name);
+        }
+      });
+    };
+
     /**
      * @type {Array<function():void>}
      * @private
@@ -78,6 +96,8 @@ class ContentTreeCollection extends IndexedCollection {
         }
       }),
       this.moved.addEventListener(() => recreateTree(true)),
+      app.uiConfig.added.addEventListener(uiConfigChanged),
+      app.uiConfig.removed.addEventListener(uiConfigChanged),
     ];
     /**
      * This is the default content tree.
@@ -113,11 +133,19 @@ class ContentTreeCollection extends IndexedCollection {
 
   /**
    * @private
+   * @param {Array<string>} exclude
    */
-  _clearSubTrees() {
-    this._subTreeViewItems.value.clear();
-    [...this._subTreeListeners.values()].forEach((cb) => {
-      cb();
+  _clearSubTrees(exclude = []) {
+    this._subTreeViewItems.value.forEach((tree, key) => {
+      if (!exclude.includes(key)) {
+        this._subTreeViewItems.value.delete(key);
+      }
+    });
+    this._subTreeListeners.forEach((cb, key) => {
+      if (!exclude.includes(key)) {
+        cb();
+        this._subTreeListeners.delete(key);
+      }
     });
   }
 
@@ -159,7 +187,6 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
       ButtonLocation.CONTENT,
     );
-    this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);
       app.navbarManager.remove(id);
@@ -228,14 +255,21 @@ class ContentTreeCollection extends IndexedCollection {
       defaultSubTreeViewItem,
       ...topLevelItems.filter((i) => i[subTreeSymbol]),
     ];
-
+    this._clearSubTrees(
+      subTrees.map((tree) => {
+        return tree.name;
+      }),
+    );
     subTrees.forEach((subTree) => {
       if (!this._app.navbarManager.has(subTree.name) || resetSubtreeButtons) {
-        this._subTreeListeners.get(subTree.name)?.();
-        this._subTreeListeners.set(
-          subTree.name,
-          this._createSubtreeActionButton(subTree),
-        );
+        this._subTreeViewItems.value.set(subTree.name, subTree);
+        if (!this._app.uiConfig.config.hideContentTree) {
+          this._subTreeListeners.get(subTree.name)?.();
+          this._subTreeListeners.set(
+            subTree.name,
+            this._createSubtreeActionButton(subTree),
+          );
+        }
       } else {
         const buttonComponent = this._app.navbarManager.get(subTree.name);
         if (buttonComponent.weight !== subTree[subTreeItemWeight]) {

package/src/contentTree/contentTreeItem.d.ts

@@ -272,11 +272,11 @@ declare class ContentTreeItem {
     /**
      * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
      */
-    set icon(icon: string | HTMLCanvasElement | HTMLImageElement | undefined);
+    set icon(icon: string | HTMLImageElement | HTMLCanvasElement | undefined);
     /**
      * @type {string|HTMLCanvasElement|HTMLImageElement|undefined}
      */
-    get icon(): string | HTMLCanvasElement | HTMLImageElement | undefined;
+    get icon(): string | HTMLImageElement | HTMLCanvasElement | undefined;
     /**
      * @param {number} weight
      */

package/src/contentTree/contentTreeItem.js

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, shallowRef } from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, ofEnum, oneOf } from '@vcsuite/check';
 import { parseBoolean, parseNumber } from '@vcsuite/parsers';
 import { ClassRegistry, VcsEvent } from '@vcmap/core';
 import { createLinkAction } from '../actions/actionHelper.js';
@@ -258,7 +258,7 @@ class ContentTreeItem {
    * @param {StateActionState} state
    */
   set state(state) {
-    check(state, Object.values(StateActionState));
+    check(state, ofEnum(StateActionState));
 
     if (this._state.value !== state) {
       this._state.value = state;
@@ -277,7 +277,7 @@ class ContentTreeItem {
    * @param {string} url
    */
   set infoUrl(url) {
-    checkMaybe(url, String);
+    check(url, maybe(String));
 
     if (this._infoUrl !== url) {
       this._infoUrl = url;
@@ -309,7 +309,7 @@ class ContentTreeItem {
    * @param {string|undefined} title
    */
   set title(title) {
-    checkMaybe(title, String);
+    check(title, maybe(String));
 
     this._title.value = title;
   }
@@ -325,7 +325,7 @@ class ContentTreeItem {
    * @param {string|undefined} tooltip
    */
   set tooltip(tooltip) {
-    checkMaybe(tooltip, String);
+    check(tooltip, maybe(String));
 
     this._tooltip.value = tooltip;
   }
@@ -341,7 +341,7 @@ class ContentTreeItem {
    * @param {(string|HTMLCanvasElement|HTMLImageElement)=} icon
    */
   set icon(icon) {
-    checkMaybe(icon, [String, HTMLElement]);
+    check(icon, maybe(oneOf(String, HTMLElement)));
 
     this._icon.value = icon;
   }
@@ -411,7 +411,7 @@ class ContentTreeItem {
    */
   addAction(action, weight = 11) {
     check(action.name, String);
-    checkMaybe(weight, Number);
+    check(weight, maybe(Number));
 
     const index = this._getActionIndex(action.name);
     if (index > -1) {

package/src/featureInfo/BalloonComponent.vue

@@ -1,9 +1,11 @@
 <template>
   <v-card class="mx-auto elevation-0" v-if="position">
     <slot name="balloon-header" :attrs="{ ...$props, ...$attrs }">
-      <v-list-item class="px-2 align-center">
+      <v-list-item class="px-1">
         <template #prepend>
-          <v-icon color="primary" size="16" class="mr-2"> $vcsInfo </v-icon>
+          <div class="pl-1 pr-2">
+            <v-icon color="primary" size="16"> $vcsInfo </v-icon>
+          </div>
         </template>
         <v-list-item-title>
           <h3 class="font-weight-bold">
@@ -13,12 +15,14 @@
         <v-list-item-subtitle v-if="balloonSubtitle">
           {{ $st(balloonSubtitle) }}
         </v-list-item-subtitle>
-        <VcsButton
-          @click.stop="close"
-          icon="mdi-close-thick"
-          tooltip="components.close"
-          class="d-flex"
-        />
+        <template #append>
+          <VcsButton
+            @click.stop="close"
+            icon="mdi-close-thick"
+            tooltip="components.close"
+            class="px-1"
+          />
+        </template>
       </v-list-item>
     </slot>
 
@@ -194,8 +198,6 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/shades.scss';
-
   .balloon {
     z-index: 0 !important;
   }
@@ -213,11 +215,8 @@
     width: 0;
     filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
   }
-  .theme--light .balloon:after {
-    border-color: map-get($shades, 'white') transparent;
-  }
-  .theme--dark .balloon:after {
-    border-color: map-get($shades, 'black') transparent;
+  .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 {

package/src/featureInfo/MarkdownBalloonComponent.vue

@@ -1,10 +1,11 @@
 <template>
   <BalloonComponent v-bind="{ ...$attrs }">
-    <div class="pa-2" v-html="html" />
+    <VcsMarkdown :content="content" />
   </BalloonComponent>
 </template>
 <script>
   import BalloonComponent from './BalloonComponent.vue';
+  import VcsMarkdown from '../components/form-output/VcsMarkdown.vue';
 
   /**
    * @description A balloon showing markdown content
@@ -12,12 +13,13 @@
   export default {
     name: 'MarkdownBalloonComponent',
     props: {
-      html: {
+      content: {
         type: String,
         required: true,
       },
     },
     components: {
+      VcsMarkdown,
       BalloonComponent,
     },
   };

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

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

package/src/featureInfo/abstractFeatureInfoView.d.ts

@@ -164,6 +164,12 @@ declare class AbstractFeatureInfoView extends VcsObject {
      * @type {import("vue").Component<FeatureInfoProps, unknown, unknown>|undefined}
      */
     get component(): import("vue").Component<FeatureInfoProps, unknown, unknown, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
+    /**
+     * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+     * @returns {Object}
+     * @protected
+     */
+    protected _getAttributesFromFeature(feature: undefined | import("ol").Feature | import("@vcmap-cesium/engine").Cesium3DTileFeature | import("@vcmap-cesium/engine").Cesium3DTilePointFeature): Object;
     /**
      * This method returns all relevant attributes for this view.
      * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.

package/src/featureInfo/abstractFeatureInfoView.js

@@ -1,7 +1,7 @@
 import { VcsObject } from '@vcmap/core';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { defaultTagOptions } from '../components/tables/VcsTable.vue';
-import { replaceAttributes } from '../application/markdownHelper.js';
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 
 /**
  * @typedef {Object} FeatureInfoProps
@@ -251,11 +251,9 @@ function getWindowState(app, state, attributes) {
   let headerTitle = state?.headerTitle;
   if (headerTitle) {
     if (Array.isArray(headerTitle)) {
-      headerTitle = headerTitle.map((item) =>
-        replaceAttributes(item, attributes),
-      );
+      headerTitle = headerTitle.map((item) => renderTemplate(item, attributes));
     } else {
-      headerTitle = replaceAttributes(headerTitle, attributes);
+      headerTitle = renderTemplate(headerTitle, attributes);
     }
   }
   return {
@@ -343,6 +341,16 @@ class AbstractFeatureInfoView extends VcsObject {
     return this._component;
   }
 
+  /**
+   * @param {undefined|import("ol").Feature|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _getAttributesFromFeature(feature) {
+    return feature?.getProperty('attributes') || {};
+  }
+
   /**
    * This method returns all relevant attributes for this view.
    * Called by `getProperties()` to pass attributes as props object to the VueComponent of this view.
@@ -352,7 +360,7 @@ class AbstractFeatureInfoView extends VcsObject {
    * @returns {Object}
    */
   getAttributes(feature) {
-    let attributes = feature.getProperty('attributes') || {};
+    let attributes = this._getAttributesFromFeature(feature);
     if (this.attributeKeys.length > 0) {
       attributes = applyAttributeFilter(attributes, this.attributeKeys);
     }
@@ -375,7 +383,7 @@ class AbstractFeatureInfoView extends VcsObject {
    */
   getTags(feature) {
     if (this.tags) {
-      const attributes = feature.getProperty('attributes') || {};
+      const attributes = this._getAttributesFromFeature(feature);
       const tags = Object.keys(this.tags)
         .filter(
           (key) =>

package/src/featureInfo/featureInfo.d.ts

@@ -10,11 +10,6 @@ export function getHighlightStyle(feature: FeatureType, layer: import("@vcmap/co
  * @returns {FeatureInfoSession}
  */
 export function createFeatureInfoSession(app: import("../vcsUiApp.js").default): FeatureInfoSession;
-/**
- * @typedef {Object} FeatureInfoSession
- * @property {VcsEvent<void>} stopped
- * @property {function():void} stop
- */
 /**
  * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
  */
@@ -43,6 +38,11 @@ export type FeatureInfoSession = {
 };
 import { ClassRegistry } from '@vcmap/core';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+/**
+ * @typedef {Object} FeatureInfoSession
+ * @property {VcsEvent<void>} stopped
+ * @property {function():void} stop
+ */
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.

package/src/featureInfo/featureInfo.js

@@ -21,8 +21,9 @@ import {
   Entity,
 } from '@vcmap-cesium/engine';
 import { Feature } from 'ol';
-import { check, checkMaybe } from '@vcsuite/check';
+import { check, maybe, oneOf } from '@vcsuite/check';
 
+import { reactive } from 'vue';
 import { vcsAppSymbol } from '../pluginHelper.js';
 import FeatureInfoInteraction from './featureInfoInteraction.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
@@ -52,6 +53,17 @@ function getLogger() {
   return getLoggerByName('featureInfo');
 }
 
+/**
+ * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
+ */
+export const featureInfoClassRegistry = new ClassRegistry();
+
+/**
+ * Symbol added to features to overwrite the layers predefined feature info
+ * @type {symbol}
+ */
+export const featureInfoViewSymbol = Symbol('featureInfoView');
+
 /**
  * @param {FeatureType} feature
  * @param {import("@vcmap/core").Layer} layer
@@ -133,7 +145,7 @@ function setupFeatureInfoTool(app) {
   /** @type {FeatureInfoSession|null} */
   let session = null;
 
-  const action = {
+  const action = reactive({
     name: 'featureInfoToggle',
     title: 'featureInfo.activateToolTitle',
     icon: '$vcsInfo',
@@ -144,46 +156,65 @@ function setupFeatureInfoTool(app) {
       } else {
         session = createFeatureInfoSession(app);
         session.stopped.addEventListener(() => {
-          this.active = false;
+          action.active = false;
           session = null;
           app.featureInfo.clear();
-          this.title = 'featureInfo.activateToolTitle';
+          action.title = 'featureInfo.activateToolTitle';
         });
         this.active = true;
-        this.title = 'featureInfo.deactivateToolTitle';
+        action.title = 'featureInfo.deactivateToolTitle';
       }
     },
-  };
+  });
 
   function addFeatureInfoButton() {
     if (app.uiConfig.getByKey('startingFeatureInfo')?.value !== false) {
       action.callback();
     }
-    app.toolboxManager.add(
-      {
-        id: 'featureInfo',
-        type: ToolboxType.SINGLE,
-        action,
-      },
-      vcsAppSymbol,
-    );
+    if (!app.toolboxManager.has('featureInfo')) {
+      app.toolboxManager.add(
+        {
+          id: 'featureInfo',
+          type: ToolboxType.SINGLE,
+          action,
+        },
+        vcsAppSymbol,
+      );
+    }
   }
 
-  if ([...app.layers].some((l) => l.properties?.featureInfo)) {
+  if (
+    [...app.layers].some((l) => l.properties?.featureInfo) ||
+    app.search.resultLayer.getFeatures().some((f) => !!f[featureInfoViewSymbol])
+  ) {
     addFeatureInfoButton();
   }
 
   const listeners = [
     app.layers.added.addEventListener((layer) => {
-      if (
-        layer?.properties?.featureInfo &&
-        !app.toolboxManager.has('featureInfo')
-      ) {
+      if (layer?.properties?.featureInfo) {
         addFeatureInfoButton();
       }
     }),
     app.layers.removed.addEventListener(() => {
       if (
+        ![...app.layers].some((l) => l.properties?.featureInfo) &&
+        !app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol]) &&
+        app.toolboxManager.has('featureInfo')
+      ) {
+        app.toolboxManager.remove('featureInfo');
+      }
+    }),
+    app.search.resultsChanged.addEventListener(() => {
+      if (
+        app.search.resultLayer
+          .getFeatures()
+          .some((f) => !!f[featureInfoViewSymbol])
+      ) {
+        addFeatureInfoButton();
+      } else if (
         ![...app.layers].some((l) => l.properties?.featureInfo) &&
         app.toolboxManager.has('featureInfo')
       ) {
@@ -207,17 +238,6 @@ function setupFeatureInfoTool(app) {
  * @property {function():void} stop
  */
 
-/**
- * @type {ClassRegistry<import("@vcmap/core").Ctor<typeof AbstractFeatureInfoView>>}
- */
-export const featureInfoClassRegistry = new ClassRegistry();
-
-/**
- * Symbol added to features to overwrite the layers predefined feature info
- * @type {symbol}
- */
-export const featureInfoViewSymbol = Symbol('featureInfoView');
-
 /**
  * @class FeatureInfo
  * @description Provides registration of featureInfoClasses and stores featureInfoView instances.
@@ -390,15 +410,13 @@ class FeatureInfo extends Collection {
    * @returns {Promise<void>}
    */
   async selectFeature(feature, position, windowPosition, featureInfoView) {
-    check(feature, [
-      Feature,
-      Entity,
-      Cesium3DTileFeature,
-      Cesium3DTilePointFeature,
-    ]);
-    checkMaybe(position, [Number]);
-    checkMaybe(windowPosition, [Number]);
-    checkMaybe(featureInfoView, AbstractFeatureInfoView);
+    check(
+      feature,
+      oneOf(Feature, Entity, Cesium3DTileFeature, Cesium3DTilePointFeature),
+    );
+    check(position, maybe([Number]));
+    check(windowPosition, maybe([Number]));
+    check(featureInfoView, maybe(AbstractFeatureInfoView));
 
     const usedFeatureInfoView =
       feature[featureInfoViewSymbol] ??
@@ -416,7 +434,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });
@@ -428,7 +446,7 @@ class FeatureInfo extends Collection {
           [featureId]: getHighlightStyle(
             feature,
             layer,
-            this._app.uiConfig.config.value.primaryColor ??
+            this._app.uiConfig.config.primaryColor ??
               getDefaultPrimaryColor(this._app),
           ),
         });

package/src/featureInfo/iframeFeatureInfoView.d.ts

@@ -9,7 +9,7 @@ export type IframeFeatureInfoViewProps = any & {
 };
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 /**
@@ -34,7 +34,13 @@ declare class IframeFeatureInfoView extends AbstractFeatureInfoView {
      */
     title: string | undefined;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * @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 a URL
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {IframeFeatureInfoViewProps}

package/src/featureInfo/iframeFeatureInfoView.js

@@ -1,9 +1,10 @@
+import { renderTemplate } from '../components/form-output/markdownHelper.js';
 import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
 import IframeComponent from './IframeComponent.vue';
 
 /**
  * @typedef {import("./abstractFeatureInfoView.js").FeatureInfoViewOptions & { src: string, title?: string }} IframeFeatureInfoViewOptions
- * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+ * @property {string} src - Specifies the address of the document to embed in the <iframe>. Variables wrapped in `${}` are replaced by their values, e.g. `${featureId}` or `${gml:name}`
  * @property {string} [title] - optional title for the <iframe>
  */
 
@@ -41,7 +42,16 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * @param {Record<string, unknown>} attributes
+   * @protected
+   * @returns {string}
+   */
+  _renderTemplate(attributes) {
+    return renderTemplate(this.src, attributes);
+  }
+
+  /**
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a URL
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {IframeFeatureInfoViewProps}
@@ -50,9 +60,9 @@ class IframeFeatureInfoView extends AbstractFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      src: this.src.replace(/\$\{(.*?)}/g, (match, token) => {
-        const variable = token.split('.');
-        return variable.reduce((obj, prop) => obj?.[prop], properties);
+      src: this._renderTemplate({
+        ...properties,
+        ...properties.attributes,
       }),
       title: this.title,
     };

package/src/featureInfo/markdownBalloonFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownBalloonFeatureInfoViewProps}

package/src/featureInfo/markdownBalloonFeatureInfoView.js

@@ -1,7 +1,7 @@
 import {
   parseAndSanitizeMarkdown,
-  replaceAttributes,
-} from '../application/markdownHelper.js';
+  renderTemplate,
+} from '../components/form-output/markdownHelper.js';
 import BalloonFeatureInfoView from './balloonFeatureInfoView.js';
 import MarkdownBalloonComponent from './MarkdownBalloonComponent.vue';
 
@@ -47,11 +47,11 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
    * @returns {string}
    */
   _renderTemplate(attributes) {
-    return replaceAttributes(this.template, attributes);
+    return renderTemplate(this.template, attributes);
   }
 
   /**
-   * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+   * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive markdown rendering
    * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
    * @param {import("@vcmap/core").Layer} layer
    * @returns {MarkdownBalloonFeatureInfoViewProps}
@@ -60,7 +60,7 @@ class MarkdownBalloonFeatureInfoView extends BalloonFeatureInfoView {
     const properties = super.getProperties(featureInfo, layer);
     return {
       ...properties,
-      html: parseAndSanitizeMarkdown(
+      content: parseAndSanitizeMarkdown(
         this._renderTemplate({ ...properties, ...properties.attributes }),
       ),
     };

package/src/featureInfo/markdownFeatureInfoView.d.ts

@@ -33,7 +33,7 @@ declare class MarkdownFeatureInfoView extends AbstractFeatureInfoView {
      */
     protected _renderTemplate(attributes: Record<string, unknown>): string;
     /**
-     * Variables wrapped in `${}` within `src` are replaced by their values, e.g. `${featureId}` or `${attributes.gml:name}`
+     * Supports markdown templates (e.g. {{someProperty}}) and style expressions to derive a markdown rendering
      * @param {import("./featureInfo.js").FeatureInfoEvent} featureInfo
      * @param {import("@vcmap/core").Layer} layer
      * @returns {MarkdownFeatureInfoViewProps}