@geogirafe/lib-geoportal 1.1.0-dev.2536443365 → 1.1.0-dev.2557861681

package/api/apigeogirafeapp.d.ts

@@ -26,6 +26,10 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     private manageCrosshairAttribute;
     private manageTooltipAttribute;
     private manageMarkersAttribute;
+    private markerStringToMapMarker;
+    private manageMarkersFileAttribute;
+    private readMarkersFromFile;
+    private lineToMarker;
     private initialize;
     private injectConfigMetaTags;
 }

package/api/apigeogirafeapp.js

@@ -10,6 +10,22 @@ import MenuButtonComponent from '../components/menubutton/component.js';
 import MapCustomContextMenuComponent from '../components/context-menu/custom-context-menu/component.js';
 import SearchComponent from '../components/search/component.js';
 import SelectionWindowComponent from '../components/selectionwindow/component.js';
+import { splitTrimAndConvertToNumber } from '../tools/utils/utils.js';
+const getImageSize = (url) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({
+                width: img.naturalWidth,
+                height: img.naturalHeight
+            });
+        };
+        img.onerror = () => {
+            reject(new Error(`Failed to load image: ${url}`));
+        };
+        img.src = url;
+    });
+};
 export default class GeoGirafeApi extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -46,7 +62,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         });
     }
     static get observedAttributes() {
-        return ['center', 'zoom', 'basemap', 'basemapselector', 'crosshair', 'tooltip', 'markers', 'layers'];
+        return ['center', 'zoom', 'basemap', 'basemapselector', 'crosshair', 'tooltip', 'markers', 'markersfile', 'layers'];
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (this.isInitialized) {
@@ -73,6 +89,9 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             else if (name === 'markers') {
                 this.manageMarkersAttribute();
             }
+            else if (name === 'markersfile') {
+                this.manageMarkersFileAttribute();
+            }
             else if (name === 'layers') {
                 this.manageLayersAttribute();
             }
@@ -95,6 +114,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         this.manageCrosshairAttribute();
         this.manageTooltipAttribute();
         this.manageMarkersAttribute();
+        this.manageMarkersFileAttribute();
         this.manageLayersAttribute();
         this.manageSelectionboxAttribute();
         this.manageUserInteraction();
@@ -245,17 +265,10 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         const markers = this.getAttributeFromConfig('markers');
         if (markers) {
             const markerValues = markers.split(';');
-            for (const makerValue of markerValues) {
-                const content = makerValue.split('|');
-                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 imageUrl = content[1].trim();
-                    this.context.stateManager.state.position.markers.push({
-                        position: [x, y],
-                        imageUrl: imageUrl
-                    });
+            for (const markerValue of markerValues) {
+                const marker = this.markerStringToMapMarker(markerValue);
+                if (marker) {
+                    this.context.stateManager.state.position.markers.push(marker);
                 }
                 else {
                     console.warn('Invalid marker coordinates');
@@ -263,6 +276,119 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             }
         }
     }
+    markerStringToMapMarker(markerValue) {
+        console.log('markerStringToMapMarker', markerValue);
+        const contentParts = markerValue.split('|');
+        const needToGuessThirdParameter = contentParts.length == 3;
+        if (needToGuessThirdParameter) {
+            console.warn(`Marker has only 3 Parameters! Guessing if third Parameter '${contentParts[2]}' is Size or Offset`);
+        }
+        const coords = contentParts[0].split(',');
+        const x = Number(coords[0].trim());
+        const y = Number(coords[1].trim());
+        if (!Number.isNaN(x) && !Number.isNaN(y)) {
+            const imageUrl = contentParts[1].trim();
+            let size;
+            let offset;
+            if (needToGuessThirdParameter) {
+                if (contentParts[2].match(/[+-]+/gm)) {
+                    offset = splitTrimAndConvertToNumber(contentParts[2]);
+                }
+                else {
+                    size = splitTrimAndConvertToNumber(contentParts[2]);
+                }
+            }
+            else if (contentParts.length > 2) {
+                size = splitTrimAndConvertToNumber(contentParts[2]);
+                offset = splitTrimAndConvertToNumber(contentParts[3]);
+            }
+            return {
+                position: [x, y],
+                imageUrl: imageUrl,
+                size: size,
+                offset: offset
+            };
+        }
+        else {
+            return undefined;
+        }
+    }
+    manageMarkersFileAttribute() {
+        const markersFile = this.getAttributeFromConfig('markersfile');
+        if (markersFile) {
+            void this.readMarkersFromFile(markersFile).then((markers) => {
+                this.context.stateManager.state.position.markers.push(...markers);
+            });
+        }
+    }
+    async readMarkersFromFile(fileUrl) {
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+            console.warn(`Cannot read markers file '${fileUrl}': ${response.status} ${response.statusText}`);
+            return [];
+        }
+        const fileContent = await response.text();
+        const lines = fileContent
+            .split(/\r?\n/)
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0);
+        if (lines.length < 2) {
+            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) {
+            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) => {
+                if (marker) {
+                    markers.push(marker);
+                }
+            });
+        }
+        return markers;
+    }
+    async lineToMarker(line, pointIndex, iconIndex, iconSizeIndex, iconOffsetIndex, 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])) {
+            console.warn(`Invalid marker line ': ${line}`);
+            return undefined;
+        }
+        // In the old WebGIS the coordinates are in the wrong order. This is to ensure compatibility with older data.
+        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;
+        // 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) {
+            await getImageSize(imageUrl).then((imageSize) => {
+                const scaleX = size[0] / imageSize.width;
+                const scaleY = size[1] / imageSize.height;
+                offset = [offset[0] * scaleX, offset[1] * scaleY];
+            });
+        }
+        return {
+            position: [coords[0], coords[1]],
+            imageUrl,
+            size,
+            offset
+        };
+    }
     async initialize() {
         await this.context.initialize();
         // Register Coordinate Reference Systems (CRS) definitions in PROJ4

package/components/map/component.js

@@ -135,7 +135,7 @@ export default class MapComponent extends GirafeHTMLElement {
         this.subscribe('position.markers', () => {
             this.clearAllMarkers();
             for (const marker of this.state.position.markers) {
-                this.addMarker(marker.position, marker.imageUrl);
+                this.addMarker(marker);
             }
         });
         this.subscribe('globe.display', async () => {
@@ -177,7 +177,7 @@ export default class MapComponent extends GirafeHTMLElement {
                 }
                 this.showCrosshair(this.state.position);
                 for (const marker of this.state.position.markers) {
-                    this.addMarker(marker.position, marker.imageUrl);
+                    this.addMarker(marker);
                 }
             }
         });
@@ -1017,23 +1017,24 @@ export default class MapComponent extends GirafeHTMLElement {
             this.state.position = position;
             if (position.markers.length > 0) {
                 // Add marker to the map
-                this.addMarker(position.markers[0].position, position.markers[0].imageUrl);
+                this.addMarker(position.markers[0]);
             }
         }
     }
     clearAllMarkers() {
         this.markerSource.clear();
     }
-    addMarker(position, imageUrl) {
+    addMarker(mapMarker) {
         const iconStyle = new Style({
             image: new Icon({
-                //anchor: [0.5, 1], // Point d'ancrage (centre en bas)
-                src: imageUrl
-                //scale: 0.5, // Ajustez la taille si nécessaire
+                displacement: mapMarker.offset,
+                src: mapMarker.imageUrl,
+                width: mapMarker.size ? mapMarker.size[0] : undefined,
+                height: mapMarker.size ? mapMarker.size[1] : undefined
             })
         });
         const marker = new Feature({
-            geometry: new Point(position)
+            geometry: new Point(mapMarker.position)
         });
         marker.setStyle(iconStyle);
         this.markerSource.addFeature(marker);

package/package.json

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

package/templates/api.html

@@ -113,6 +113,10 @@
         text-align: left;
         margin-bottom: 1rem;
       }
+      ul {
+        width: 100%;
+        margin: 0;
+      }
     </style>
 
     <script type="module" src="src/main.api.ts"></script>
@@ -290,6 +294,53 @@
         </div>
       </section>
 
+      <!-- Multiple markers with size and/or offset -->
+      <h2>Add multiple markers with size and/or offset on the map</h2>
+      <p class="descr">
+        Add multiple markers at the defined coordinates. <br />
+        You can specify size and offset.<br />
+        If you only specify three parameters, the third parameter can be the size if you <strong>don't</strong> include
+        a sign (e.g. <code>24,24</code>) or the offset if you <strong>do</strong> include a sign (e.g.
+        <code>+2,-6</code>).
+      </p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map markers="api.demo.markersWithSizeAndOrOffset" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Multiple markers with size and/or offset -->
+      <h2>Add multiple markers on the map by providing a File/URL</h2>
+      <p class="descr">
+        You can provide a URL to a TXT file containing markers.<br />
+        Each line represents a marker with TAB-separated values.<br />
+        The file must contain the column names as header.
+      </p>
+      <p class="descr">Allowed column names:</p>
+      <ul>
+        <li><strong>point</strong>: coordinates where the amrker should be added.</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>
+      </ul>
+      <p class="descr">
+        Other columns will be ignored.<br />
+        Compatibility with the format used in the old GeoMapFish API will be managed if the URL to fo file contains the
+        keyword <code>legacy</code>.<br />
+        Coordinates can be given in both way (North,East) or (East,North) only if the SRID <code>CH:2056</code> is used.
+      </p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map markersfile="api.demo.markersFile" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
       <!-- Layers -->
       <h2>Add a layer to the map</h2>
       <p class="descr">Add a layer to the map. The layer name must be defined in the themes.json file.</p>
@@ -302,7 +353,7 @@
         </div>
       </section>
 
-      <!-- Mulaiple layers -->
+      <!-- Multiple layers -->
       <h2>Add multiple layers to the map</h2>
       <p class="descr">Add multiple layers to the map. The layer names must be defined in the themes.json file.</p>
       <section>
@@ -394,10 +445,6 @@
        - projection: configure map projection
        - legend:
        - embeded: deactivate mouse scroll
-       - marker: offset, size, ...
-       - load markers from file
-       - load data from file
-
      -->
   </body>
 </html>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2536443365", "build":"2536443365", "date":"19/05/2026"}
+{"version":"1.1.0-dev.2557861681", "build":"2557861681", "date":"28/05/2026"}

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

@@ -0,0 +1,8 @@
+id	point	title	description	icon	iconSize	iconOffset
+1	1146337,2554168	Information	Office de l'information<br />Tél: 032 000 00 00<br>Email: <a href="mailto:info@example.com">info@example.com</a><br />Internet: <a href="http://fr.wikipedia.org/wiki/La_Chaux-de-Fonds" target=new>Cliquer ici</a>	api/marker-plus.png	21,25	-51,-90
+2	1146205,2554168	Ma première station	Diesel pas cher	api/marker2-plus.png	21,25	-51,-90
+3	1145605,2554168	Mon parking	C'est celui-là le meilleur.	api/marker2-plus.png	21,25	-51,-90
+4	1145542,2554168	Mon parking	Ce parking est<br/>le meillleur.	api/marker2-plus.png	21,25	-51,-90
+5	1145977,2554168	Ma deuxième station	Sans-plomb pas cher.	api/marker-plus.png	21,25	-51,-90
+6	1145631,2554175	Test marker 1.	api/marker-plus.png	21,25	-51,-90
+7	1145472,2554507	Test marker 2.	api/marker2-plus.png	21,25	-51,-90

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

@@ -0,0 +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
+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

package/tools/main.d.ts

@@ -120,7 +120,7 @@ export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle,
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';
-export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl } from './utils/utils.js';
+export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl, splitTrimAndConvertToNumber } from './utils/utils.js';
 export { default as VendorSpecificOgcServerManager } from './vendorspecificogcservermanager.js';
 export type { WfsClientOptions, WfsClientOptionalOptions, QueryableLayerWms, GetFeatureOptionsPartial } from './wfs/wfsclient.js';
 export { default as WfsClient, WfsClientMapServer, WfsClientQgis, WfsClientGeorama, WfsClientDefault, WfsClientGeoServer } from './wfs/wfsclient.js';

package/tools/main.js

@@ -94,7 +94,7 @@ export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle,
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';
-export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl } from './utils/utils.js';
+export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl, splitTrimAndConvertToNumber } from './utils/utils.js';
 export { default as VendorSpecificOgcServerManager } from './vendorspecificogcservermanager.js';
 export { default as WfsClient, WfsClientMapServer, WfsClientQgis, WfsClientGeorama, WfsClientDefault, WfsClientGeoServer } from './wfs/wfsclient.js';
 export { default as WfsFilter } from './wfs/wfsfilter.js';

package/tools/state/mapposition.d.ts

@@ -2,6 +2,8 @@ import { Coordinate } from 'ol/coordinate.js';
 export type MapMarker = {
     imageUrl: string;
     position: Coordinate;
+    size?: number[];
+    offset?: number[];
 };
 declare class MapPosition {
     center: Coordinate;

package/tools/state/mapposition.js

@@ -31,7 +31,9 @@ class MapPosition {
         for (const marker of this.markers) {
             position.markers.push({
                 imageUrl: marker.imageUrl,
-                position: marker.position
+                position: marker.position,
+                size: marker.size,
+                offset: marker.offset
             });
         }
         return position;

package/tools/url/permalinkmanager.d.ts

@@ -21,7 +21,12 @@ export default class PermalinkManager extends GirafeSingleton {
     hasMapPosition(): boolean | "" | null;
     private hasToolTip;
     private hasMarker;
+    private hasMarkerSize;
+    private hasMarkerOffset;
     getMapPosition(targetProjection: Projection): MapPosition | undefined;
+    private addCenter;
+    private addTooltip;
+    private addMarker;
     hasSearch(): boolean;
     getSearchTerm(): string;
     hasThemes(): boolean;

package/tools/url/permalinkmanager.js

@@ -5,6 +5,7 @@ import MapPosition from '../state/mapposition.js';
 import { get as getProjection, transform } from 'ol/proj.js';
 import { isCoordinateInDegrees } from '../utils/olutils.js';
 import { BASEMAP_VISIBLE_PARAMETER, SEARCH_VISIBLE_PARAMETER } from './permalinkmanager-constants.js';
+import { splitTrimAndConvertToNumber } from '../utils/utils.js';
 export default class PermalinkManager extends GirafeSingleton {
     urlParamKeys = [
         'map_x',
@@ -13,6 +14,8 @@ export default class PermalinkManager extends GirafeSingleton {
         'map_crosshair',
         'map_tooltip',
         'map_marker',
+        'map_marker_size',
+        'map_marker_offset',
         'search',
         'basemap',
         'themes',
@@ -83,46 +86,71 @@ export default class PermalinkManager extends GirafeSingleton {
     hasMarker() {
         return this.params['map_marker'] !== null;
     }
+    hasMarkerSize() {
+        return this.params['map_marker_size'] !== null;
+    }
+    hasMarkerOffset() {
+        return this.params['map_marker_offset'] !== null;
+    }
     getMapPosition(targetProjection) {
         if (this.hasMapPosition()) {
             const position = new MapPosition();
-            let center = [Number.parseFloat(this.params['map_x']), Number.parseFloat(this.params['map_y'])];
-            // Transform position to the target projection by making an educated guess about the current CRS
-            // of the permalink map position
-            const defaultProjection = this.context.configManager.getDefaultConfigValue('map.srid');
-            const projectionInUrl = getProjection(isCoordinateInDegrees(position.center) ? 'EPSG:4326' : defaultProjection);
-            if (projectionInUrl.getCode() !== this.state.projection) {
-                center = transform(center, projectionInUrl, targetProjection);
-            }
-            position.center = center;
+            this.addCenter(position, targetProjection);
             const defaultZoom = this.context.configManager.getDefaultConfigValue('map.startZoom');
             position.zoom = Number.parseInt(this.params['map_zoom'] ?? defaultZoom);
             if (this.params['map_crosshair'] === 'true') {
-                position.crosshair = center;
-            }
-            if (this.hasToolTip()) {
-                const content = DOMPurify.sanitize(this.params['map_tooltip'], {
-                    ALLOWED_TAGS: ['br', 'b', 'div', 'em', 'i', 'p', 'strong'],
-                    ALLOWED_ATTR: []
-                });
-                position.tooltip = {
-                    content: content,
-                    position: center
-                };
-            }
-            if (this.hasMarker()) {
-                const imageUrl = DOMPurify.sanitize(this.params['map_marker']);
-                position.markers.push({
-                    imageUrl: imageUrl,
-                    position: center
-                });
+                position.crosshair = position.center;
             }
+            this.addTooltip(position);
+            this.addMarker(position);
             if (position.isValid) {
                 return position;
             }
         }
         return undefined;
     }
+    addCenter(position, targetProjection) {
+        let center = [Number.parseFloat(this.params['map_x']), Number.parseFloat(this.params['map_y'])];
+        // Transform position to the target projection by making an educated guess about the current CRS
+        // of the permalink map position
+        const defaultProjection = this.context.configManager.getDefaultConfigValue('map.srid');
+        const projectionInUrl = getProjection(isCoordinateInDegrees(position.center) ? 'EPSG:4326' : defaultProjection);
+        if (projectionInUrl.getCode() !== this.state.projection) {
+            center = transform(center, projectionInUrl, targetProjection);
+        }
+        position.center = center;
+    }
+    addTooltip(position) {
+        if (this.hasToolTip()) {
+            const content = DOMPurify.sanitize(this.params['map_tooltip'], {
+                ALLOWED_TAGS: ['br', 'b', 'div', 'em', 'i', 'p', 'strong'],
+                ALLOWED_ATTR: []
+            });
+            position.tooltip = {
+                content: content,
+                position: position.center
+            };
+        }
+    }
+    addMarker(position) {
+        if (this.hasMarker()) {
+            const imageUrl = DOMPurify.sanitize(this.params['map_marker']);
+            let size;
+            let offset;
+            if (this.hasMarkerSize()) {
+                size = splitTrimAndConvertToNumber(DOMPurify.sanitize(this.params['map_marker_size']));
+            }
+            if (this.hasMarkerOffset()) {
+                offset = splitTrimAndConvertToNumber(DOMPurify.sanitize(this.params['map_marker_offset']));
+            }
+            position.markers.push({
+                imageUrl: imageUrl,
+                position: position.center,
+                size: size,
+                offset: offset
+            });
+        }
+    }
     hasSearch() {
         return this.params['search'] !== null;
     }

package/tools/utils/utils.d.ts

@@ -77,3 +77,8 @@ export declare const linkify: (str: string) => string;
  * @returns
  */
 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.
+ * @param numbersAsString The String containing Numbers.
+ */
+export declare const splitTrimAndConvertToNumber: (numbersAsString: string) => number[];

package/tools/utils/utils.js

@@ -199,3 +199,13 @@ export function applyDefaultPrefixToUrl(context, metadataUrl) {
     }
     return metadataUrl;
 }
+/**
+ * Splits a String containing Numbers into an Array of Numbers. The Separator is a comma.
+ * @param numbersAsString The String containing Numbers.
+ */
+export const splitTrimAndConvertToNumber = (numbersAsString) => {
+    return numbersAsString
+        .split(',')
+        .map((e) => e.trim())
+        .map(Number);
+};