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

package/api/apigeogirafeapp.d.ts

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

package/api/apigeogirafeapp.js

@@ -10,6 +10,7 @@ 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';
 export default class GeoGirafeApi extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -245,17 +246,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 +257,43 @@ 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;
+        }
+    }
     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.2545448597",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/api.html

@@ -290,6 +290,21 @@
         </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. You can specify size and offset. 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>
+
       <!-- 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 +317,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>

package/templates/public/about.json

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

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);
+};