@geogirafe/lib-geoportal 1.1.0-dev.2591751450 → 1.1.0-dev.2593337676

package/api/apigeogirafeapp.js

@@ -11,6 +11,7 @@ import MapCustomContextMenuComponent from '../components/context-menu/custom-con
 import SearchComponent from '../components/search/component.js';
 import SelectionWindowComponent from '../components/selectionwindow/component.js';
 import { splitTrimAndConvertToNumber } from '../tools/utils/utils.js';
+import DOMPurify from 'dompurify';
 const getImageSize = (url) => {
     return new Promise((resolve, reject) => {
         const img = new Image();
@@ -120,7 +121,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         this.manageUserInteraction();
     }
     manageUserInteraction() {
-        // Deacivate the preview of search results
+        // Deactivate the preview of search results
         this.context.configManager.Config.search.objectPreview = false;
         this.context.configManager.Config.search.layerPreview = false;
         // Force window as selection component
@@ -145,9 +146,11 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     }
     defineAndAddComponent(customElementName, customElementType) {
         if (!customElements.get(customElementName)) {
+            console.log(`Defining custom element: ${customElementName}`);
             customElements.define(customElementName, customElementType);
         }
         const existingElement = this.shadowRoot?.querySelector(customElementName);
+        console.log('existingElement', existingElement);
         if (!existingElement) {
             const component = new customElementType();
             this.shadow.appendChild(component);
@@ -246,13 +249,16 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         if (tooltip) {
             this.defineAndAddComponent('girafe-custom-context-menu', MapCustomContextMenuComponent);
             const content = tooltip.split('|');
+            const hasTitle = content.length > 2;
             const coords = content[0].split(',');
             const x = Number(coords[0].trim());
             const y = Number(coords[1].trim());
             if (!Number.isNaN(x) && !Number.isNaN(y)) {
-                const text = content[1];
+                const title = hasTitle ? content[1] : undefined;
+                const text = content[hasTitle ? 2 : 1];
                 this.context.stateManager.state.position.tooltip = {
                     position: [x, y],
+                    title,
                     content: text
                 };
             }
@@ -316,6 +322,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     manageMarkersFileAttribute() {
         const markersFile = this.getAttributeFromConfig('markersfile');
         if (markersFile) {
+            this.defineAndAddComponent('girafe-custom-context-menu', MapCustomContextMenuComponent);
             void this.readMarkersFromFile(markersFile).then((markers) => {
                 this.context.stateManager.state.position.markers.push(...markers);
             });
@@ -336,18 +343,22 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             return [];
         }
         const headers = lines[0].split('\t').map((header) => header.trim());
-        const pointIndex = headers.indexOf('point');
-        const iconIndex = headers.indexOf('icon');
-        const iconSizeIndex = headers.indexOf('iconSize');
-        const iconOffsetIndex = headers.indexOf('iconOffset');
-        if (pointIndex === -1 || iconIndex === -1) {
+        const columnIndexes = {
+            pointIndex: headers.indexOf('point'),
+            titleIndex: headers.indexOf('title'),
+            descriptionIndex: headers.indexOf('description'),
+            iconIndex: headers.indexOf('icon'),
+            iconSizeIndex: headers.indexOf('iconSize'),
+            iconOffsetIndex: headers.indexOf('iconOffset')
+        };
+        if (columnIndexes.pointIndex === -1 || columnIndexes.iconIndex === -1) {
             console.warn(`Invalid markers file '${fileUrl}': missing required 'point' or 'icon' column`);
             return [];
         }
         const markers = [];
         const legacy = fileUrl.includes('legacy');
         for (const line of lines.slice(1)) {
-            await this.lineToMarker(line, pointIndex, iconIndex, iconSizeIndex, iconOffsetIndex, legacy).then((marker) => {
+            await this.lineToMarker(line, columnIndexes, legacy).then((marker) => {
                 if (marker) {
                     markers.push(marker);
                 }
@@ -355,11 +366,12 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         }
         return markers;
     }
-    async lineToMarker(line, pointIndex, iconIndex, iconSizeIndex, iconOffsetIndex, legacy) {
+    async lineToMarker(line, columnIndexes, legacy) {
         const columns = line.split('\t');
-        const coords = splitTrimAndConvertToNumber(columns[pointIndex]);
-        const imageUrl = columns[iconIndex]?.trim();
-        if (coords.length < 2 || !imageUrl || Number.isNaN(coords[0]) || Number.isNaN(coords[1])) {
+        const getColumOrUndefined = (index) => index ? columns[index]?.trim() : undefined;
+        const coords = splitTrimAndConvertToNumber(columns[columnIndexes.pointIndex]);
+        const imageUrl = columnIndexes.iconIndex ? columns[columnIndexes.iconIndex]?.trim() : undefined;
+        if (!coords || coords.length < 2 || !imageUrl || Number.isNaN(coords[0]) || Number.isNaN(coords[1])) {
             console.warn(`Invalid marker line ': ${line}`);
             return undefined;
         }
@@ -367,12 +379,8 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         if (coords[0] < coords[1] && this.context.stateManager.state.projection === 'EPSG:2056') {
             coords.reverse();
         }
-        const size = iconSizeIndex >= 0 && columns[iconSizeIndex]?.trim()
-            ? splitTrimAndConvertToNumber(columns[iconSizeIndex])
-            : undefined;
-        let offset = iconOffsetIndex >= 0 && columns[iconOffsetIndex]?.trim()
-            ? splitTrimAndConvertToNumber(columns[iconOffsetIndex])
-            : undefined;
+        const size = splitTrimAndConvertToNumber(getColumOrUndefined(columnIndexes.iconSizeIndex));
+        let offset = splitTrimAndConvertToNumber(getColumOrUndefined(columnIndexes.iconOffsetIndex));
         // In the old WebGIS the Offset referred to the Size of the original Image, while now it refers to the Size of the
         // resized Image. This is to ensure compatibility with older data.
         if (offset && size && legacy) {
@@ -382,11 +390,17 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
                 offset = [offset[0] * scaleX, offset[1] * scaleY];
             });
         }
+        const tooltipTitle = getColumOrUndefined(columnIndexes.titleIndex);
+        const tooltipContent = getColumOrUndefined(columnIndexes.descriptionIndex);
+        const tooltip = tooltipTitle && tooltipContent ?
+            { title: tooltipTitle, content: DOMPurify.sanitize(tooltipContent) } :
+            undefined;
         return {
             position: [coords[0], coords[1]],
             imageUrl,
             size,
-            offset
+            offset,
+            tooltip,
         };
     }
     async initialize() {

package/assets/i18n/de.json

@@ -495,6 +495,7 @@
     "Swisstopo WMTS": "Swisstopo WMTS",
     "system": "System",
     "Take measure": "Messen",
+    "Test for Translation": "Test für Übersetzung",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Vielen Dank für Ihre Nachricht. Falls erforderlich, wird sich so schnell wie möglich jemand mit Ihnen in Verbindung setzen.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Der folgende Link wird mit Ihrer Nachricht gesendet. Er enthält Ihre aktuelle Konfiguration und hilft uns, Ihr Problem zu verstehen.",
     "The generated document may contain sensitive data.": "Das generierte Dokument kann sensible Daten enthalten.",
@@ -509,6 +510,7 @@
     "themes-type-custom": "Benutzerdefinierte",
     "themes-type-favorites": "Favoriten",
     "This instance of GeoGirafe cannot be used at the moment.": "Diese Instanz von GeoGirafe kann momentan nicht verwendet werden.",
+    "This Text should be translated": "Dieser Text sollte übersetzt werden",
     "Toggle all legends": "Alle Legenden umschalten",
     "Toggle legend": "Legende umschalten",
     "Tools": "Werkzeuge",

package/assets/i18n/en.json

@@ -498,6 +498,7 @@
     "Swisstopo WMTS": "Swisstopo WMTS",
     "system": "System",
     "Take measure": "Take measure",
+    "Test for Translation": "Test for Translation",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Thanks for your message. If necessary, someone will get in touch with you as soon as possible.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.",
     "The generated document may contain sensitive data.": "The generated document may contain sensitive data.",
@@ -512,6 +513,7 @@
     "themes-type-custom": "Custom Themes",
     "themes-type-favorites": "Favorite Themes",
     "This instance of GeoGirafe cannot be used at the moment.": "This instance of GeoGirafe cannot be used at the moment.",
+    "This Text should be translated": "This Text should be translated",
     "Toggle all legends": "Toggle all legends",
     "Toggle legend": "Toggle legend",
     "Tools": "Tools",

package/assets/i18n/fr.json

@@ -495,6 +495,7 @@
     "Swisstopo WMTS": "Swisstopo WMTS",
     "system": "Système",
     "Take measure": "Prendre une mesure",
+    "Test for Translation": "Test de traduction",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Merci pour votre message. Si nécessaire, quelqu'un prendra contact avec vous dès que possible.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Le lien ci-dessous sera envoyé avec votre message. Il contient votre configuration courante et nous aidera à analyser votre demande.",
     "The generated document may contain sensitive data.": "Le document généré peut contenir des données sensibles.",
@@ -509,6 +510,7 @@
     "themes-type-custom": "Personnalisés",
     "themes-type-favorites": "Favoris",
     "This instance of GeoGirafe cannot be used at the moment.": "Cette instance de GeoGirafe ne peut pas être utilisée pour le moment.",
+    "This Text should be translated": "Ce texte doit être traduit",
     "Toggle all legends": "Afficher / Masquer toutes les légendes",
     "Toggle legend": "Afficher / Masquer la légende",
     "Tools": "Outis",

package/assets/i18n/it.json

@@ -495,6 +495,7 @@
     "Swisstopo WMTS": "Swisstopo WMTS",
     "system": "Sistema",
     "Take measure": "Prendi misura",
+    "Test for Translation": "Test di traduzione",
     "Thanks for your message. If necessary, somebody will enter in contact with you as soon as possible.": "Grazie per il tuo messaggio. Se necessario, qualcuno ti contatterà il prima possibile.",
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Il seguente link verrà inviato con il tuo messaggio. Contiene la tua configurazione attuale e ci aiuterà a capire il problema.",
     "The generated document may contain sensitive data.": "Il documento generato potrebbe contenere dati sensibili.",
@@ -509,6 +510,7 @@
     "themes-type-custom": "Personalizzati",
     "themes-type-favorites": "Preferiti",
     "This instance of GeoGirafe cannot be used at the moment.": "Questa istanza di GeoGirafe non può essere utilizzata al momento.",
+    "This Text should be translated": "Questo testo dovrebbe essere tradotto",
     "Toggle all legends": "Attiva / Disattiva tutte le legende",
     "Toggle legend": "Attiva / Disattiva legenda",
     "Tools": "Strumenti",

package/components/context-menu/custom-context-menu/component.d.ts

@@ -4,7 +4,11 @@ declare class MapCustomContextMenuComponent extends GirafeHTMLElement {
     protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private get map();
-    private static contextMenuOverlay;
+    private static readonly contextMenuOverlayByMap;
+    private get contextMenuOverlay();
+    private set contextMenuOverlay(value);
+    get tooltipTitle(): "" | import("uhtml").Hole;
+    get tooltipContent(): "" | import("uhtml").Hole;
     constructor();
     render(): void;
     closeMenu(): void;

package/components/context-menu/custom-context-menu/component.js

@@ -8,7 +8,7 @@ class MapCustomContextMenuComponent extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);border-radius:0;position:absolute;left:0;transform:translate(-50%)}
+.map-info-contextmenu{--contextmenu-border-width:1px;--contextmenu-triangle-width:20px;--contextmenu-triangle-height:10px;border:var(--contextmenu-border-width) solid var(--text-color-grad1);bottom:var(--contextmenu-triangle-height);border-radius:0;position:absolute;left:0;transform:translate(-50%);& .title-container{padding-bottom:.5rem;&.no-title{padding-bottom:0}& span.title{font-weight:700}}}
 </style><style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
@@ -17,21 +17,51 @@ class MapCustomContextMenuComponent extends GirafeHTMLElement {
 .ol-popup{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.9em}.ol-popup .ol-popup-content{cursor:default;padding:.25em .5em;overflow:hidden}.ol-popup.hasclosebox .ol-popup-content{margin-right:1.7em}.ol-popup .ol-popup-content:after{clear:both;content:"";height:0;font-size:0;display:block}.ol-popup .anchor{pointer-events:none;background:red;width:0;height:0;margin:-11px 22px;display:block;position:absolute}.ol-popup .anchor:after,.ol-popup .anchor:before{position:absolute}.ol-popup-right .anchor:after,.ol-popup-right .anchor:before{right:0}.ol-popup-top .anchor{top:0}.ol-popup-bottom .anchor{bottom:0}.ol-popup-right .anchor{right:0}.ol-popup-left .anchor{left:0}.ol-popup-center .anchor{left:50%;margin-left:0!important}.ol-popup-middle .anchor{top:50%;margin-top:0!important}.ol-popup-center.ol-popup-middle .anchor{display:none}.ol-popup.ol-fixed{margin:0!important;inset:.5em .5em auto auto!important;transform:none!important}.ol-popup.ol-fixed .anchor{display:none}.ol-popup.ol-fixed.anim>div{animation:none}.ol-popup .ol-fix{float:right;cursor:pointer;background:#fff;width:1em;height:.9em;margin:.2em;position:relative}.ol-popup .ol-fix:before{content:"";box-sizing:border-box;border:.1em solid #666;border-right-width:.3em;width:.8em;height:.7em;margin:.1em;display:block}.ol-popup.shadow{box-shadow:2px 2px 2px 2px #00000080}.ol-popup .closeBox{color:#fff;cursor:pointer;float:right;background-color:#003c8880;border:0;border-radius:2px;width:1.4em;height:1.4em;margin:5px 5px 0 0;padding:0;font-size:.9em;font-weight:700;display:none;position:relative}.ol-popup.hasclosebox .closeBox{display:block}.ol-popup .closeBox:hover{background-color:#003c88b3}.ol-popup .closeBox:after{content:"u00d7";text-align:center;width:100%;margin:-.5em 0;font-size:1.5em;line-height:1em;position:absolute;top:50%;left:0;right:0}.ol-popup.modifytouch{background-color:#eee}.ol-popup.modifytouch .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.modifytouch .ol-popup-content a{text-decoration:none}.ol-popup.tooltips{background-color:#ffa}.ol-popup.tooltips .ol-popup-content{white-space:nowrap;padding:0 .25em;font-size:.85em}.ol-popup.default>div{background-color:#fff;border:1px solid #69f;border-radius:5px}.ol-popup.default{margin:-11px 0;transform:translateY(-22px)}.ol-popup-top.ol-popup.default{margin:11px 0;transform:none}.ol-popup-left.default{margin:-11px -22px;transform:translateY(-22px)}.ol-popup-top.ol-popup-left.default{margin:11px -22px;transform:none}.ol-popup-right.default{margin:-11px 22px;transform:translate(44px,-22px)}.ol-popup-top.ol-popup-right.default{margin:11px 22px;transform:translate(44px)}.ol-popup-middle.default{margin:0 10px;transform:none}.ol-popup-middle.ol-popup-right.default{margin:0 -10px;transform:translate(-20px)}.ol-popup.default .anchor{color:#69f}.ol-popup.default .anchor:after,.ol-popup.default .anchor:before{content:"";border:11px solid;border-color:currentColor #0000;margin:0 -11px}.ol-popup.default .anchor:after{border-width:11px;border-color:#fff #0000;margin:2px -11px}.ol-popup-top.default .anchor:before,.ol-popup-top.default .anchor:after{border-top:0;top:0}.ol-popup-bottom.default .anchor:before,.ol-popup-bottom.default .anchor:after{border-bottom:0;bottom:0}.ol-popup-middle.default .anchor:before{border-color:#0000 currentColor;margin:-11px -33px}.ol-popup-middle.default .anchor:after{border-color:#0000 #fff;margin:-11px -31px}.ol-popup-middle.ol-popup-left.default .anchor:before,.ol-popup-middle.ol-popup-left.default .anchor:after{border-left:0}.ol-popup-middle.ol-popup-right.default .anchor:before,.ol-popup-middle.ol-popup-right.default .anchor:after{border-right:0}.ol-popup.placemark{color:#c00;margin:-.65em 0;transform:translateY(-1.3em)}.ol-popup.placemark>div{width:2em;height:2em;min-width:unset;box-sizing:border-box;background-color:#fff;border:0;border-radius:50%;font-size:15px;position:relative;box-shadow:inset 0 0 0 .45em}.ol-popup.placemark .ol-popup-content{cursor:default;text-align:center;width:1em;height:1em;padding:.25em 0;line-height:1em;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.ol-popup.placemark .anchor{margin:0}.ol-popup.placemark .anchor:before{content:"";background:0 0;border-radius:50%;width:1em;height:.5em;margin:-.5em;box-shadow:0 1em .5em #00000080}.ol-popup.placemark .anchor:after{content:"";border:.7em solid #0000;border-top:1em solid;border-bottom:0 solid;margin:-.75em -.7em;bottom:0}.ol-popup.placemark.shield>div{border-radius:.2em}.ol-popup.placemark.shield .anchor:after{border-width:.8em 1em 0;margin:-.7em -1em}.ol-popup.placemark.blazon>div{border-radius:.2em}.ol-popup.placemark.pushpin{margin:-2.2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin>div{border-radius:0;width:1.1em;box-shadow:inset 2em 0;background:0 0!important}.ol-popup.placemark.pushpin>div:before{content:"";pointer-events:none;border:.5em solid #0000;border-top:.3em solid;border-bottom-color:currentColor;width:1.3em;height:1.5em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ol-popup.placemark.needle{margin:-2em 0;transform:translateY(-4em)}.ol-popup.placemark.pushpin .anchor,.ol-popup.placemark.needle .anchor{margin:-1.2em}.ol-popup.placemark.pushpin .anchor:after,.ol-popup.placemark.needle .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -.2em}.ol-popup.placemark.pushpin .anchor:before,.ol-popup.placemark.needle .anchor:before{margin:-.75em -.5em}.ol-popup.placemark.flagv{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flagv>div{box-shadow:none;background-color:#0000;border-radius:0}.ol-popup.placemark.flagv>div:before{content:"";pointer-events:none;border:1em solid #0000;border-left:2em solid;position:absolute}.ol-popup.placemark.flagv .anchor{margin:-1.4em}.ol-popup.placemark.flag{margin:-2em 1em;transform:translateY(-4em)}.ol-popup.placemark.flag>div{border-radius:0;transform-origin:0 150%!important}.ol-popup.placemark.flag .anchor{margin:-1.4em}.ol-popup.placemark.flagv .anchor:after,.ol-popup.placemark.flag .anchor:after{border-style:solid;border-width:2em .15em 0;width:.1em;margin:-.55em -1em}.ol-popup.placemark.flagv .anchor:before,.ol-popup.placemark.flag .anchor:before{margin:-.75em -1.25em}.ol-popup.placemark.flag.finish{margin:-2em 1em}.ol-popup.placemark.flag.finish>div{background-image:linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor),linear-gradient(45deg,currentColor 25%,#0000 25% 75%,currentColor 75%,currentColor);background-position:.5em 0,0 .5em;background-size:1em 1em;box-shadow:inset 0 0 0 .25em}.ol-popup.black .closeBox{color:#f80;background-color:#00000080;border-radius:5px}.ol-popup.black .closeBox:hover{color:#da2;background-color:#000000b3}.ol-popup.black{margin:-20px 0;transform:translateY(-40px)}.ol-popup.black>div{color:#fff;background-color:#0009;border-radius:5px}.ol-popup-top.ol-popup.black{margin:20px 0;transform:none}.ol-popup-left.black{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.black{margin:20px -22px;transform:none}.ol-popup-right.black{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.black{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.black{margin:0 11px;transform:none}.ol-popup-left.ol-popup-middle.black{transform:none}.ol-popup-right.ol-popup-middle.black{margin:0 -11px;transform:translate(-22px)}.ol-popup.black .anchor{color:#0009;margin:-20px 11px}.ol-popup.black .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.black .anchor:before{border-top:0;top:0}.ol-popup-bottom.black .anchor:before{border-bottom:0;bottom:0}.ol-popup-middle.black .anchor:before{border-color:#0000 currentColor;margin:-20px -22px}.ol-popup-middle.ol-popup-left.black .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.black .anchor:before{border-right:0}.ol-popup-center.black .anchor:before{margin:0 -10px}.ol-popup.tips .closeBox{color:#fff;background-color:red;border-radius:50%;width:1.2em;height:1.2em}.ol-popup.tips .closeBox:hover{background-color:#f40}.ol-popup.tips{margin:-20px 0;transform:translateY(-40px)}.ol-popup.tips>div{color:#333;background-color:#cea;border:5px solid #ad7;border-radius:5px}.ol-popup-top.ol-popup.tips{margin:20px 0;transform:none}.ol-popup-left.tips{margin:-20px -22px;transform:translateY(-40px)}.ol-popup-top.ol-popup-left.tips{margin:20px -22px;transform:none}.ol-popup-right.tips{margin:-20px 22px;transform:translate(44px,-40px)}.ol-popup-top.ol-popup-right.tips{margin:20px 22px;transform:translate(44px)}.ol-popup-middle.tips{margin:0;transform:none}.ol-popup-left.ol-popup-middle.tips{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.tips{margin:0 -22px;transform:translate(-44px)}.ol-popup.tips .anchor{color:#ad7;margin:-18px 22px}.ol-popup.tips .anchor:before{content:"";border:20px solid;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.tips .anchor:before{border-top:0;top:0}.ol-popup-bottom.tips .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.tips .anchor:before{border-width:20px 6px;margin:0 -6px}.ol-popup-left.tips .anchor:before{border-left:0;margin-left:0}.ol-popup-right.tips .anchor:before{border-right:0;margin-right:0}.ol-popup-middle.tips .anchor:before{border-width:6px 20px;border-color:#0000 currentColor;margin:-6px -41px}.ol-popup-middle.ol-popup-left.tips .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.tips .anchor:before{border-right:0}.ol-popup.warning .closeBox{color:#fff;background-color:red;border-radius:50%;font-size:.83em}.ol-popup.warning .closeBox:hover{background-color:#f40}.ol-popup.warning{color:#900;background-color:#fd0;border:4px dashed red;border-radius:3px;margin:-28px 10px;transform:translateY(-56px)}.ol-popup-top.ol-popup.warning{margin:28px 10px;transform:none}.ol-popup-left.warning{margin:-28px -22px;transform:translateY(-56px)}.ol-popup-top.ol-popup-left.warning{margin:28px -22px;transform:none}.ol-popup-right.warning{margin:-28px 22px;transform:translate(44px,-56px)}.ol-popup-top.ol-popup-right.warning{margin:28px 22px;transform:translate(44px)}.ol-popup-middle.warning{margin:0;transform:none}.ol-popup-left.ol-popup-middle.warning{margin:0 22px;transform:none}.ol-popup-right.ol-popup-middle.warning{margin:0 -22px;transform:translate(-44px)}.ol-popup.warning .anchor{margin:-33px 7px}.ol-popup.warning .anchor:before{content:"";border:30px solid red;border-left:11px solid #0000;border-right:11px solid #0000}.ol-popup-top.warning .anchor:before{border-top:0;top:0}.ol-popup-bottom.warning .anchor:before{border-bottom:0;bottom:0}.ol-popup-center.warning .anchor:before{margin:0 -21px}.ol-popup-middle.warning .anchor:before{border-width:10px 22px;border-color:#0000 red;margin:-10px -33px}.ol-popup-middle.ol-popup-left.warning .anchor:before{border-left:0}.ol-popup-middle.ol-popup-right.warning .anchor:before{border-right:0}.ol-popup .ol-popupfeature table{width:100%}.ol-popup .ol-popupfeature table td{text-overflow:ellipsis;max-width:25em;overflow:hidden}.ol-popup .ol-popupfeature table td img{max-width:100px;max-height:100px}.ol-popup .ol-popupfeature tr:nth-child(odd){background-color:#eee}.ol-popup .ol-popupfeature .ol-zoombt{color:#003c8880;background:0 0;border:0;outline:none;width:2em;height:2em;display:inline-block;position:relative}.ol-popup .ol-popupfeature .ol-zoombt:before{content:"";box-sizing:border-box;background-color:#0000;border:.17em solid;border-radius:100%;width:1em;height:1em;position:absolute;top:.3em;left:.3em}.ol-popup .ol-popupfeature .ol-zoombt:after{content:"";box-sizing:border-box;border-style:solid;border-width:.1em .3em;border-radius:.03em;position:absolute;top:1.35em;left:1.15em;transform:rotate(45deg);box-shadow:-.2em 0 0 -.04em}.ol-popup .ol-popupfeature .ol-count{float:right;margin:.25em 0}.ol-popup .ol-popupfeature .ol-prev,.ol-popup .ol-popupfeature .ol-next{vertical-align:bottom;cursor:pointer;border:.5em solid #0000;border-left-color:#003c8880;border-right:0 solid #003c8880;margin:0 .5em;display:inline-block}.ol-popup .ol-popupfeature .ol-prev{border-width:.5em .5em .5em 0}.ol-popup.tooltips.black{background-color:#0000}.ol-popup.tooltips.black>div{background-color:#00000080;padding:.2em .5em;transform:scaleY(1.3)}.ol-popup-middle.tooltips.black .anchor:before{border-width:5px 10px;margin:-5px -21px}.ol-popup-center.ol-popup-middle,.ol-popup-top.ol-popup-left.ol-fixPopup,.ol-popup-top.ol-popup-right.ol-fixPopup,.ol-popup.ol-fixPopup{margin:0}
 </style>
 <style>${this.customStyle}</style>
-<div class="map-info-contextmenu"><button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button><div>${this.htmlUnsafe(this.state.position.tooltip?.content ?? '')}</div><svg class="tooltip-triangle" viewBox="0 0 20 10" preserveAspectRatio="none"><polygon points="0,0 10,10 20,0" class="triangle-fill"/><path d="M0,0 L10,10 L20,0" class="triangle-border"/></svg></div>`;
+<div class="map-info-contextmenu"><div class="${this.tooltipTitle ? 'title-container' : 'title-container no-title'}"><span class="title">${this.tooltipTitle}</span> <button class="contextmenu-closer gg-icon-button gg-small" onclick="${() => this.closeMenu()}"></button></div><div>${this.tooltipContent}</div><svg class="tooltip-triangle" viewBox="0 0 20 10" preserveAspectRatio="none"><polygon points="0,0 10,10 20,0" class="triangle-fill"/><path d="M0,0 L10,10 L20,0" class="triangle-border"/></svg></div>`;
     };
     get map() {
         return this.context.mapManager.getMap();
     }
-    // We use a static property for the overlay
-    // Because OpenLayer is recreating a new object each time when we do an addOverlay()
-    static contextMenuOverlay;
+    // We use a static property/getter for the overlay, because OpenLayer is recreating a new object each time when we do
+    // an addOverlay(). But as multiple instances of the Map (when using multiple <geogirafe-map ... /> in API context)
+    // should NOT share the same overlay, we need to create a new one for each map instance (indentified by Map's custom
+    // UUID Property).
+    static contextMenuOverlayByMap = {};
+    get contextMenuOverlay() {
+        const uuid = this.map.get('uuid');
+        return MapCustomContextMenuComponent.contextMenuOverlayByMap[uuid];
+    }
+    set contextMenuOverlay(value) {
+        const uuid = this.map.get('uuid');
+        MapCustomContextMenuComponent.contextMenuOverlayByMap[uuid] = value;
+    }
+    get tooltipTitle() {
+        const title = this.state.position.tooltip?.title;
+        if (!title) {
+            return '';
+        }
+        if (title.includes('<')) {
+            return this.htmlUnsafe(title);
+        }
+        return this.htmlUnsafe(this.context.i18nManager.getTranslation(title));
+    }
+    get tooltipContent() {
+        const content = this.state.position.tooltip?.content;
+        if (!content) {
+            return '';
+        }
+        if (content.includes('<')) {
+            return this.htmlUnsafe(content);
+        }
+        return this.htmlUnsafe(this.context.i18nManager.getTranslation(content));
+    }
     constructor() {
         super('custom-map-context-menu');
     }
     render() {
         if (this.state.position.tooltip) {
             super.render();
-            MapCustomContextMenuComponent.contextMenuOverlay.setPosition(this.state.position.tooltip.position);
+            this.contextMenuOverlay.setPosition(this.state.position.tooltip.position);
         }
         else {
             super.renderEmpty();
@@ -53,12 +83,12 @@ class MapCustomContextMenuComponent extends GirafeHTMLElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!MapCustomContextMenuComponent.contextMenuOverlay) {
-            MapCustomContextMenuComponent.contextMenuOverlay = new Overlay({
+        if (!this.contextMenuOverlay) {
+            this.contextMenuOverlay = new Overlay({
                 element: this,
                 autoPan: { animation: { duration: 250 } }
             });
-            this.map.addOverlay(MapCustomContextMenuComponent.contextMenuOverlay);
+            this.map.addOverlay(this.contextMenuOverlay);
         }
         this.registerEvents();
     }

package/components/map/component.d.ts

@@ -55,6 +55,7 @@ export default class MapComponent extends GirafeHTMLElement {
     geolocationSource: VectorSource;
     private readonly markerSource;
     private readonly markerLayer;
+    private mapMarkerUnderCursor;
     get projection(): import("ol/proj.js").Projection;
     get config(): import("../../tools/main.js").GirafeConfig;
     get onMobile(): boolean;

package/components/map/component.js

@@ -82,6 +82,7 @@ export default class MapComponent extends GirafeHTMLElement {
     markerLayer = new VectorLayer({
         source: this.markerSource
     });
+    mapMarkerUnderCursor = null;
     get projection() {
         return this.olMap.getView().getProjection();
     }
@@ -362,6 +363,17 @@ export default class MapComponent extends GirafeHTMLElement {
         if (this.registerInteractionListener('map.select', false)) {
             // Simple click for single feature selection
             this.olMap.on('singleclick', (e) => {
+                if (this.mapMarkerUnderCursor) {
+                    const mapMarker = this.mapMarkerUnderCursor.get('mapMarker');
+                    if (mapMarker) {
+                        this.state.position.tooltip = {
+                            title: mapMarker.tooltip?.title,
+                            content: mapMarker.tooltip?.content ?? '',
+                            position: mapMarker.position
+                        };
+                        return;
+                    }
+                }
                 if (this.canExecute('map.select')) {
                     this.onClick(e);
                 }
@@ -396,6 +408,19 @@ export default class MapComponent extends GirafeHTMLElement {
     }
     onPointerMove(e) {
         this.state.mouseCoordinates = e.coordinate;
+        const featuresAtPixel = this.olMap.getFeaturesAtPixel(e.pixel, { layerFilter: (layer) => layer === this.markerLayer });
+        let cursor = 'default';
+        if (featuresAtPixel.length > 0) {
+            this.mapMarkerUnderCursor = featuresAtPixel[0];
+            const mapMarker = this.mapMarkerUnderCursor.get('mapMarker');
+            if (mapMarker?.tooltip) {
+                cursor = 'pointer';
+            }
+        }
+        else {
+            this.mapMarkerUnderCursor = null;
+        }
+        this.mapTarget.style.cursor = cursor;
     }
     onMoveEnd(_e) {
         const view = this.olMap.getView();
@@ -1028,9 +1053,18 @@ export default class MapComponent extends GirafeHTMLElement {
         this.markerSource.clear();
     }
     addMarker(mapMarker) {
+        /*
+         In OpenLayers we need to calculate the anchor based on the marker size and offset as it is `fraction` by default.
+         As the offset and the size are provided in pixel, we need to calculate the fraction for each axis. So, for example,
+         when you have size [21,25] and offset [-10.5,-25] the anchor must be [0.5, 1] to have the bottom center of the
+         marker at the given coordinates.
+         */
+        const anchor = mapMarker.offset && mapMarker.size
+            ? [Math.abs(mapMarker.offset[0] / mapMarker.size[0]), Math.abs(mapMarker.offset[1] / mapMarker.size[1])]
+            : undefined;
         const iconStyle = new Style({
             image: new Icon({
-                displacement: mapMarker.offset,
+                anchor: anchor,
                 src: mapMarker.imageUrl,
                 width: mapMarker.size ? mapMarker.size[0] : undefined,
                 height: mapMarker.size ? mapMarker.size[1] : undefined
@@ -1040,6 +1074,7 @@ export default class MapComponent extends GirafeHTMLElement {
             geometry: new Point(mapMarker.position)
         });
         marker.setStyle(iconStyle);
+        marker.set('mapMarker', mapMarker);
         this.markerSource.addFeature(marker);
     }
     showCrosshair(position) {

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2591751450",
+  "version": "1.1.0-dev.2593337676",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/api.html

@@ -260,7 +260,7 @@
 
       <!-- Tooltip -->
       <h2>Add a toolip somewhere on the map</h2>
-      <p class="descr">Add a tooltip with cutom text at the defined coordinates.</p>
+      <p class="descr">Add a tooltip with custom text and optional title at the defined coordinates.</p>
       <section>
         <div class="row">
           <div class="left">
@@ -321,7 +321,9 @@
       </p>
       <p class="descr">Allowed column names:</p>
       <ul>
-        <li><strong>point</strong>: coordinates where the amrker should be added.</li>
+        <li><strong>point</strong>: coordinates where the marker should be added.</li>
+        <li><strong>title</strong> (optional): the title for the popup shown when clicking on the marker.</li>
+        <li><strong>description</strong> (optional): the description (content) of the popup shown when clicking on the marker.</li>
         <li><strong>icon</strong>: url to the marker image</li>
         <li><strong>iconSize</strong> (optional): size if the marker should be resized</li>
         <li><strong>iconOffset</strong> (optional): offset if the marker should be shifted</li>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2591751450", "build":"2591751450", "date":"10/06/2026"}
+{"version":"1.1.0-dev.2593337676", "build":"2593337676", "date":"11/06/2026"}

package/templates/public/api/data-mapbs.txt

@@ -1,6 +1,6 @@
 id	point	title	description	icon	iconSize	iconOffset
 1	2611778,1266865	Popups konfigurieren	<br>Popups können via der Text-Datei beliebig mit Inhalt gefüllt werden!<br/>Die anderen zwei Beispiel-Popups zeigen weitere Beispiele.<br><img src="/static/api/apihelp/img/geoportal-bs.jpg" width="300px">	api/marker-blue.png	21,25	-10.5,-25
-2	2611542,1267266	Klänge der Basler Fasnacht	<br/><br/>Audio-Dateien in ein Popup einbinden:<br/><br/><audio controls><source src="/static/api/apihelp/BS_N19_Fasnacht_v1.mp3" type="audio/mp3">Your browser does not support the audio element.</audio> 	api/marker-green.png	21,25	-10.5,-25
+2	2611542,1267266	Klänge der Basler Fasnacht	<br/><br/>Audio-Dateien in ein Popup einbinden:<br/><br/><audio controls><source src="/static/api/apihelp/BS_N19_Fasnacht_v1.mp3" type="audio/mp3">Your browser does not support the audio element.</audio> 	api/marker-gold.png	21,25	-10.5,-25
 3	2613089,1267566	FILM AB! Für den GEO-Beruf	<br>IFrames in ein Popup einbinden: <br/><br/><iframe width="312" height="175" src="https://www.youtube.com/embed/-Mw277Rgcyc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>	api/parking.png	21,25	-10.5,-25
 4	2611738,1267123	Test for Offset/Size	Test for Offset/Size	api/marker-huge.png	24,38	-162,-512
-5	2611738,1267123	Test for Offset/Size	Test for Offset/Size	api/marker-huge.png	24,38	-12,-38
+5	2611638,1267183	Test for Translation	This Text should be translated	api/marker-green.png	24,38	-12,-38

package/templates/public/config.api.json

@@ -5,7 +5,7 @@
       "zoom": "11",
       "basemap": "ArcGIS Imagery",
       "crosshair": "1631989, 5067094",
-      "tooltip": "1631989, 5067094 | Hello from the GeoGirafe API!",
+      "tooltip": "1631989, 5067094 | GeoGirafe API | Hello from the GeoGirafe API!",
       "layers": "OpenTopoMap",
       "multiLayers": "GL_AbschnittsStoergrade, SW_Jugendlichenanteil, KJ_Jugendangebot",
       "layersWithConfig": "GR_Grundwasserschutzzonen|o;0.4|f;gr_gz_kantypbez;eq;S1",

package/tools/main.d.ts

@@ -86,7 +86,7 @@ export type { default as IGirafePanel } from './state/igirafepanel.js';
 export { isGirafePanel } from './state/igirafepanel.js';
 export { default as LayersConfig } from './state/layersConfig.js';
 export { default as MapManager } from './state/mapManager.js';
-export type { MapMarker } from './state/mapposition.js';
+export type { MapMarkerTooltip, MapMarker } from './state/mapposition.js';
 export { default as MapPosition } from './state/mapposition.js';
 export type { InitialSelectionQuery } from './state/objectselection.js';
 export { default as ObjectSelection } from './state/objectselection.js';

package/tools/state/mapManager.js

@@ -5,6 +5,7 @@ import { defaults as defaultControls } from 'ol/control/defaults.js';
 import { defaults as defaultInteractions } from 'ol/interaction/defaults.js';
 import { DragPan } from 'ol/interaction.js';
 import { Kinetic } from 'ol';
+import { v4 as uuidv4 } from 'uuid';
 /** The singleton containing the main OpenLayers map accessible from everywhere */
 export default class MapManager extends GirafeSingleton {
     map;
@@ -26,6 +27,9 @@ export default class MapManager extends GirafeSingleton {
             interactions: interactions,
             moveTolerance: 5
         });
+        // Needed to identify the map instance for reusing Overlay (or not) in the context menu (see
+        // CustomContextMenu.contextMenuOverlayByMap)
+        this.map.set('uuid', uuidv4());
     }
     getMap() {
         if (!this.map) {

package/tools/state/mapposition.d.ts

@@ -1,9 +1,14 @@
 import { Coordinate } from 'ol/coordinate.js';
+export type MapMarkerTooltip = {
+    title: string;
+    content?: string;
+};
 export type MapMarker = {
     imageUrl: string;
     position: Coordinate;
     size?: number[];
     offset?: number[];
+    tooltip?: MapMarkerTooltip;
 };
 declare class MapPosition {
     center: Coordinate;
@@ -12,6 +17,7 @@ declare class MapPosition {
     scale?: number;
     crosshair?: Coordinate;
     tooltip?: {
+        title?: string;
         content: string;
         position?: Coordinate;
     };

package/tools/state/mapposition.js

@@ -24,6 +24,7 @@ class MapPosition {
         position.crosshair = this.crosshair ? [...this.crosshair] : undefined;
         position.tooltip = this.tooltip
             ? {
+                title: this.tooltip.title,
                 content: this.tooltip.content,
                 position: this.tooltip.position ? [...this.tooltip.position] : undefined
             }
@@ -33,7 +34,8 @@ class MapPosition {
                 imageUrl: marker.imageUrl,
                 position: marker.position,
                 size: marker.size,
-                offset: marker.offset
+                offset: marker.offset,
+                tooltip: marker.tooltip,
             });
         }
         return position;

package/tools/utils/utils.d.ts

@@ -78,7 +78,8 @@ export declare const linkify: (str: string) => string;
  */
 export declare function applyDefaultPrefixToUrl(context: IGirafeContext, metadataUrl?: string): string | undefined;
 /**
- * Splits a String containing Numbers into an Array of Numbers. The Separator is a comma.
+ * Splits a String containing Numbers into an Array of Numbers. The Separator is a comma. Or returns
+ * <code>undefined</code> if the input is <code>undefined</code>
  * @param numbersAsString The String containing Numbers.
  */
-export declare const splitTrimAndConvertToNumber: (numbersAsString: string) => number[];
+export declare const splitTrimAndConvertToNumber: (numbersAsString: string | undefined) => number[] | undefined;

package/tools/utils/utils.js

@@ -200,12 +200,13 @@ export function applyDefaultPrefixToUrl(context, metadataUrl) {
     return metadataUrl;
 }
 /**
- * Splits a String containing Numbers into an Array of Numbers. The Separator is a comma.
+ * Splits a String containing Numbers into an Array of Numbers. The Separator is a comma. Or returns
+ * <code>undefined</code> if the input is <code>undefined</code>
  * @param numbersAsString The String containing Numbers.
  */
 export const splitTrimAndConvertToNumber = (numbersAsString) => {
-    return numbersAsString
+    return numbersAsString ? numbersAsString
         .split(',')
         .map((e) => e.trim())
-        .map(Number);
+        .map(Number) : undefined;
 };