@geogirafe/lib-geoportal 1.1.0-dev.2533501910 → 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/drawing/component.d.ts

@@ -1,11 +1,13 @@
 import { Color } from 'vanilla-picker';
-import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape, DrawingState } from './drawingFeature.js';
-import OlDrawing from './olDrawing.js';
-import CesiumDrawing from './cesiumDrawing.js';
+import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape } from '../../tools/drawing/drawingFeature.js';
+import DrawingState from '../../tools/drawing/drawingState.js';
+import OlDrawing from '../../tools/drawing/olDrawing.js';
+import CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
+export declare const DrawingStateLocation = "drawing";
 export default class DrawingComponent extends GirafeHTMLElement implements IGirafePanel {
     protected templateUrl: string | null;
     protected styleUrls: string[] | null;

package/components/drawing/component.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { htmlFor as uHtmlFor } from 'uhtml/keyed';
 import { html as uHtml } from 'uhtml';
 import { v4 as uuidv4 } from 'uuid';
-import DrawingFeature, { DrawingShape } from './drawingFeature.js';
-import OlDrawing from './olDrawing.js';
-import CesiumDrawing from './cesiumDrawing.js';
+import DrawingFeature, { DrawingShape } from '../../tools/drawing/drawingFeature.js';
+import OlDrawing from '../../tools/drawing/olDrawing.js';
+import CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
 import { GeoJSON, GPX, KML } from 'ol/format.js';
 import { Polygon } from 'ol/geom.js';
 import Feature from 'ol/Feature.js';
@@ -25,6 +25,7 @@ import visibleIcon from './assets/visible.svg?raw';
 import notVisibleIcon from './assets/notVisible.svg?raw';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
 import { UsedInTemplateOnly } from '../../decorators.js';
+export const DrawingStateLocation = 'drawing';
 export default class DrawingComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -200,20 +201,20 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.state.extendedState.drawing) {
-            throw new Error('ExtendedState has to be defined in main typescript file.');
+        if (!this.state.extendedState[DrawingStateLocation]) {
+            throw new Error(`ExtendedState '${DrawingStateLocation}' has to be defined in main typescript file.`);
         }
-        this.drawingState = this.state.extendedState.drawing;
+        this.drawingState = this.state.extendedState[DrawingStateLocation];
         const map = this.context.componentManager.getComponents(MapComponent)[0];
-        this.olDrawing = new OlDrawing(map, this.name, this.context, (featureId) => {
+        this.olDrawing = new OlDrawing(map, DrawingStateLocation, this.context, (featureId) => {
             const drawingFeature = this.drawingState.features.find((drawingFeature) => drawingFeature.id === featureId);
             if (drawingFeature) {
                 this.deleteFeature(drawingFeature);
             }
         });
-        this.cesiumDrawing = new CesiumDrawing(map, this.name, this.context);
+        this.cesiumDrawing = new CesiumDrawing(map, DrawingStateLocation, this.context);
         this.render();
-        this.subscribe('extendedState.drawing.features', (olds, news) => this.onFeaturesChanged(olds, news));
+        this.subscribe(`extendedState.${DrawingStateLocation}.features`, (olds, news) => this.onFeaturesChanged(olds, news));
         this.subscribe('projection', (olds, news) => this.onProjectionChanged(olds, news));
         this.subscribe('globe.loaded', () => {
             if (this.state.globe.loaded && this.isPanelVisible) {

package/components/main.d.ts

@@ -12,7 +12,7 @@ export { default as CrossSectionSettingsComponent } from './cross-section/cross-
 export { default as CrossSectionViewComponent } from './cross-section/cross-section-viewer/component.js';
 export { default as DisplayMenuButtonMobile } from './displaymenubutton-mobile/component.js';
 export { default as DisplaySelectorButtonMobile } from './displayselectorbutton-mobile/component.js';
-export { default as DrawingComponent } from './drawing/component.js';
+export { default as DrawingComponent, DrawingStateLocation } from './drawing/component.js';
 export type { FixedDimensionValueChangedEventDetails, DimensionUnit } from './drawing/fixed-dimension/component.js';
 export { default as FixedDimensionComponent } from './drawing/fixed-dimension/component.js';
 export { default as DrawingContainerMobile } from './drawing-container-mobile/component.js';

package/components/main.js

@@ -12,7 +12,7 @@ export { default as CrossSectionSettingsComponent } from './cross-section/cross-
 export { default as CrossSectionViewComponent } from './cross-section/cross-section-viewer/component.js';
 export { default as DisplayMenuButtonMobile } from './displaymenubutton-mobile/component.js';
 export { default as DisplaySelectorButtonMobile } from './displayselectorbutton-mobile/component.js';
-export { default as DrawingComponent } from './drawing/component.js';
+export { default as DrawingComponent, DrawingStateLocation } from './drawing/component.js';
 export { default as FixedDimensionComponent } from './drawing/fixed-dimension/component.js';
 export { default as DrawingContainerMobile } from './drawing-container-mobile/component.js';
 export { default as EditComponent } from './edit/component.js';

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.2533501910",
+  "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.2533501910", "build":"2533501910", "date":"18/05/2026"}
+{"version":"1.1.0-dev.2545448597", "build":"2545448597", "date":"22/05/2026"}

package/tools/app/geogirafeapp.js

@@ -9,7 +9,7 @@ import MapDefaultContextMenuComponent from '../../components/context-menu/defaul
 import MapCustomContextMenuComponent from '../../components/context-menu/custom-context-menu/component.js';
 import CrossSectionSettingsComponent from '../../components/cross-section/cross-section-settings/component.js';
 import CrossSectionViewComponent from '../../components/cross-section/cross-section-viewer/component.js';
-import DrawingComponent from '../../components/drawing/component.js';
+import DrawingComponent, { DrawingStateLocation } from '../../components/drawing/component.js';
 import EditComponent from '../../components/edit/component.js';
 import EditFromComponent from '../../components/edit/editform/component.js';
 import HelpComponent from '../../components/help/component.js';
@@ -43,8 +43,8 @@ import TreeViewRootComponent from '../../components/treeview/treeviewroot/compon
 import TreeViewThemeComponent from '../../components/treeview/treeviewtheme/component.js';
 import UserPreferencesComponent from '../../components/userpreferences/component.js';
 import VideoRecordComponent from '../../components/videorecord/component.js';
-import { DrawingState } from '../../components/drawing/drawingFeature.js';
-import DrawingSerializer from '../../components/drawing/drawingSerializer.js';
+import DrawingState from '../drawing/drawingState.js';
+import DrawingSerializer from '../drawing/drawingSerializer.js';
 import { ShareState, ShareStateSerializer } from '../../components/share/sharestate.js';
 import SelectionToolComponent from '../../components/selectiontool/component.js';
 import AdvancedFilterComponent from '../../components/advancedfilter/component.js';
@@ -92,7 +92,7 @@ export default class GeoGirafeApp {
     }
     addCustomSerializers() {
         // Add custom state and serializers (need to be done early, because the shared state will need them)
-        this.context.stateManager.state.extendedState.drawing = new DrawingState();
+        this.context.stateManager.state.extendedState[DrawingStateLocation] = new DrawingState();
         this.context.stateSerializer.addSerializer(DrawingState, new DrawingSerializer(this.context));
         this.context.stateManager.state.extendedState.share = new ShareState();
         this.context.stateSerializer.addSerializer(ShareState, new ShareStateSerializer(this.context, this.isIframe));

package/tools/drawing/cesiumDrawing.d.ts

@@ -0,0 +1,42 @@
+import MapComponent from '../../components/map/component.js';
+import IGirafeContext from '../context/icontext.js';
+export default class CesiumDrawing {
+    private readonly stateLocation;
+    private activeShapePoints;
+    private activeShapes;
+    private floatingPoint;
+    private scene;
+    private handler;
+    private entities;
+    private fixedLineLength;
+    private readonly context;
+    private get state();
+    private get drawingState();
+    private get config();
+    constructor(map: MapComponent, stateLocation: string, context: IGirafeContext);
+    setFixedLineLength(length: number): void;
+    private activateTool;
+    private deactivateTool;
+    private pickOnGlobe;
+    private removeLastPointAndTerminateShape;
+    private terminateShape;
+    private fixLastLength;
+    private updateShape;
+    private addPoint;
+    private leveledCenterToMouse;
+    private makeRectangle;
+    private makeRegularPolygon;
+    private getShapes;
+    registerInteractions(): void;
+    unregisterInteractions(): void;
+    private canExecute;
+    private getPosition;
+    private getLength;
+    private createLabel;
+    private createPoint;
+    private getPolygonCenter;
+    private getPolyLineLabels;
+    private getPolygonArea;
+    private getPolyline;
+    private getPolygonEntity;
+}

package/{components → tools}/drawing/cesiumDrawing.js

@@ -6,7 +6,8 @@ import DrawingFeature, { DrawingShape } from './drawingFeature.js';
 import proj4 from 'proj4';
 const CLAMP_TO_GROUND = Cesium.HeightReference.CLAMP_TO_GROUND;
 export default class CesiumDrawing {
-    toolName;
+    // Writes drawn features into the specified location in the extended state
+    stateLocation;
     activeShapePoints = [];
     activeShapes = [];
     floatingPoint = undefined;
@@ -19,20 +20,20 @@ export default class CesiumDrawing {
         return this.context.stateManager.state;
     }
     get drawingState() {
-        return this.state.extendedState.drawing;
+        return this.state.extendedState[this.stateLocation];
     }
     get config() {
         return this.context.configManager.Config;
     }
-    constructor(map, toolName, context) {
-        this.toolName = toolName;
+    constructor(map, stateLocation, context) {
+        this.stateLocation = stateLocation;
         this.context = context;
         map.subscribe('globe.loaded', () => {
             if (this.state.globe.loaded) {
                 this.scene = map.map3d.getCesiumScene();
                 this.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
                 this.entities = map.map3d.getDataSourceDisplay().defaultDataSource.entities;
-                map.subscribe('extendedState.drawing.activeTool', (_oldTool, newTool) => newTool === null ? this.deactivateTool() : this.activateTool(newTool));
+                map.subscribe(`extendedState.${this.stateLocation}.activeTool`, (_oldTool, newTool) => newTool === null ? this.deactivateTool() : this.activateTool(newTool));
             }
         });
     }
@@ -305,16 +306,16 @@ export default class CesiumDrawing {
         }
     }
     registerInteractions() {
-        this.context.userInteractionManager.registerListener('globe.select', true, this.toolName);
-        this.context.userInteractionManager.registerListener('globe.draw', true, this.toolName);
+        this.context.userInteractionManager.registerListener('globe.select', true, this.stateLocation);
+        this.context.userInteractionManager.registerListener('globe.draw', true, this.stateLocation);
     }
     unregisterInteractions() {
         this.deactivateTool();
-        this.context.userInteractionManager.unregisterListener('globe.select', this.toolName);
-        this.context.userInteractionManager.unregisterListener('globe.draw', this.toolName);
+        this.context.userInteractionManager.unregisterListener('globe.select', this.stateLocation);
+        this.context.userInteractionManager.unregisterListener('globe.draw', this.stateLocation);
     }
     canExecute(event) {
-        return this.context.userInteractionManager.canListenerExecute(event, this.toolName);
+        return this.context.userInteractionManager.canListenerExecute(event, this.stateLocation);
     }
     getPosition(p) {
         const carto = Cartographic.fromCartesian(p);

package/{components → tools}/drawing/drawingFeature.d.ts

@@ -1,8 +1,8 @@
 import { Style } from 'ol/style.js';
-import type { IBrainSerializable } from '../../tools/state/brain/decorators.js';
 import type { Circle as CircleGeom, Geometry } from 'ol/geom.js';
 import type Feature from 'ol/Feature.js';
-import IGirafeContext from '../../tools/context/icontext.js';
+import IGirafeContext from '../context/icontext.js';
+import DrawingState from './drawingState.js';
 export declare enum DrawingShape {
     Point = 0,
     Polyline = 1,
@@ -16,11 +16,6 @@ export declare enum DrawingShape {
 export type ArrowStyle = 'none' | 'start' | 'end' | 'both';
 export type ArrowPosition = 'whole' | 'each' | 'mid';
 export type LineStroke = 'full' | 'dash' | 'dot' | 'double';
-export declare class DrawingState implements IBrainSerializable {
-    isBrainSerializable: boolean;
-    activeTool: DrawingShape | null;
-    features: DrawingFeature[];
-}
 export type SerializedFeature = {
     n: string;
     sc: string;
@@ -102,13 +97,13 @@ export default class DrawingFeature {
     getAzimuthText(circle: CircleGeom): string;
     isPointOrPolyline(): boolean;
     getVertexStyle(activeNode?: boolean): Style;
-    static deserialize(serializedFeature: SerializedFeature, context: IGirafeContext): DrawingFeature;
+    static deserialize(serializedFeature: SerializedFeature, context: IGirafeContext, drawingState: DrawingState): DrawingFeature;
     static circleToPolygon(center: number[], radius: number, nbEdges?: number): number[][];
     static geojsonFromOlFeature(olFeature: Feature<Geometry>, shapeType: DrawingShape): object;
     /**
-     * Finds an name composed of the shape type and a number.
-     * The number starts from how many shape of the same type type are already in the state +1.
-     * Then checks if such candidate name already exists and increments if so.
+     * Finds a name composed of the shape type and a number.
+     * The number starts from how many shapes of the same type are already in the state +1.
+     * Then checks if such a candidate name already exists and increments if so.
      * @param geometryTypename
      * @returns
      */

package/{components → tools}/drawing/drawingFeature.js

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Fill, RegularShape, Stroke, Style } from 'ol/style.js';
 import { toRadians } from 'ol/math.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
-import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../../tools/utils/olutils.js';
+import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../utils/olutils.js';
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -15,11 +15,6 @@ export var DrawingShape;
     DrawingShape[DrawingShape["FreehandPolyline"] = 6] = "FreehandPolyline";
     DrawingShape[DrawingShape["FreehandPolygon"] = 7] = "FreehandPolygon";
 })(DrawingShape || (DrawingShape = {}));
-export class DrawingState {
-    isBrainSerializable = true;
-    activeTool = null;
-    features = [];
-}
 export default class DrawingFeature {
     _tool;
     _name;
@@ -230,9 +225,9 @@ export default class DrawingFeature {
             })
         });
     }
-    static deserialize(serializedFeature, context) {
+    static deserialize(serializedFeature, context, drawingState) {
         console.log(serializedFeature);
-        const newFeature = new DrawingFeature(serializedFeature.t, context.stateManager.state.extendedState.drawing, context.configManager.Config.drawing);
+        const newFeature = new DrawingFeature(serializedFeature.t, drawingState, context.configManager.Config.drawing);
         newFeature.geojson = serializedFeature.g;
         newFeature.name = serializedFeature.n;
         newFeature.strokeColor = serializedFeature.sc;
@@ -279,9 +274,9 @@ export default class DrawingFeature {
         return JSON.parse(new GeoJSON().writeFeature(olFeature));
     }
     /**
-     * Finds an name composed of the shape type and a number.
-     * The number starts from how many shape of the same type type are already in the state +1.
-     * Then checks if such candidate name already exists and increments if so.
+     * Finds a name composed of the shape type and a number.
+     * The number starts from how many shapes of the same type are already in the state +1.
+     * Then checks if such a candidate name already exists and increments if so.
      * @param geometryTypename
      * @returns
      */

package/{components → tools}/drawing/drawingSerializer.d.ts

@@ -1,10 +1,10 @@
-import IGirafeContext from '../../tools/context/icontext.js';
-import type { IBrainSerializer } from '../../tools/state/brain/serialize.js';
-import { DrawingState } from './drawingFeature.js';
+import IGirafeContext from '../context/icontext.js';
+import type { IBrainSerializer } from '../state/brain/serialize.js';
+import DrawingState from './drawingState.js';
 export default class DrawingSerializer implements IBrainSerializer<DrawingState> {
     private readonly context;
     constructor(context: IGirafeContext);
     private get state();
     brainSerialize(drawingState: DrawingState): string;
-    brainDeserialize(str: string): void;
+    brainDeserialize(str: string, stateLocation: string): void;
 }

package/{components → tools}/drawing/drawingSerializer.js

@@ -1,4 +1,5 @@
-import DrawingFeature, { DrawingState } from './drawingFeature.js';
+import DrawingFeature from './drawingFeature.js';
+import DrawingState from './drawingState.js';
 export default class DrawingSerializer {
     context;
     constructor(context) {
@@ -14,22 +15,23 @@ export default class DrawingSerializer {
         }
         return JSON.stringify(serializedDrawings);
     }
-    brainDeserialize(str) {
+    brainDeserialize(str, stateLocation) {
         const serializedFeatures = JSON.parse(str);
         if (serializedFeatures) {
-            if (this.state.extendedState.drawing) {
+            let drawingState = new DrawingState();
+            if (this.state.extendedState[stateLocation]) {
                 // First, delete existing drawing features in the state before adding new ones.
                 //  This will trigger removal of the ol features in the map.
-                const drawingState = this.state.extendedState.drawing;
+                drawingState = this.state.extendedState[stateLocation];
                 drawingState.features.splice(0, drawingState.features.length);
             }
             else {
-                this.state.extendedState.drawing = new DrawingState();
+                this.state.extendedState[stateLocation] = drawingState;
             }
-            serializedFeatures.forEach((f) => DrawingFeature.deserialize(f, this.context));
+            serializedFeatures.forEach((f) => DrawingFeature.deserialize(f, this.context, drawingState));
         }
         else {
-            throw new Error(`Cannot deserialize drawings`);
+            throw new Error(`Cannot deserialize the drawing state for ${stateLocation}`);
         }
     }
 }

package/tools/drawing/drawingState.d.ts

@@ -0,0 +1,7 @@
+import type { IBrainSerializable } from '../state/brain/decorators.js';
+import DrawingFeature, { DrawingShape } from './drawingFeature.js';
+export default class DrawingState implements IBrainSerializable {
+    isBrainSerializable: boolean;
+    activeTool: DrawingShape | null;
+    features: DrawingFeature[];
+}

package/tools/drawing/drawingState.js

@@ -0,0 +1,5 @@
+export default class DrawingState {
+    isBrainSerializable = true;
+    activeTool = null;
+    features = [];
+}

package/{components → tools}/drawing/olDrawing.d.ts

@@ -1,45 +1,38 @@
-import DrawingFeature, { DrawingShape } from './drawingFeature.js';
-import MapComponent from '../map/component.js';
-import { Collection, Feature } from 'ol';
-import { Geometry, SimpleGeometry } from 'ol/geom.js';
-import { SketchCoordType } from 'ol/interaction/Draw.js';
-import { Style } from 'ol/style.js';
-import { Draw, Modify, Snap, Translate } from 'ol/interaction.js';
-import VectorSource, { VectorSourceEvent } from 'ol/source/Vector.js';
+import DrawingFeature from './drawingFeature.js';
+import MapComponent from '../../components/map/component.js';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom.js';
+import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
-import { Projection } from 'ol/proj.js';
-import { Coordinate } from 'ol/coordinate.js';
-import { ContextMenu } from '../map/tools/contextmenu.js';
-import IGirafeContext from '../../tools/context/icontext.js';
+import IGirafeContext from '../context/icontext.js';
 import { StyleFunction } from 'ol/style/Style.js';
-import Transform from 'ol-ext/interaction/Transform.js';
 export default class OlDrawing {
     private readonly map;
-    private readonly toolName;
+    private readonly stateLocation;
     private readonly context;
     private readonly deleteHandler;
-    modifiableFeatures: Collection<Feature>;
-    draw: Draw | null;
-    modify: Modify | null;
-    snap: Snap | null;
-    editContextMenu: ContextMenu | null;
-    currentShape: DrawingShape | null;
-    fixedLineLength: number;
-    fixedSquareSide: number;
-    fixedRectangleWidth: number;
-    fixedRectangleHeight: number;
-    drawingSource: VectorSource;
-    drawingLayer: VectorLayer;
-    lastClosestFeature: Feature | null;
-    translate: Translate | null;
-    transform: Transform | null;
+    private readonly modifiableFeatures;
+    private draw;
+    private modify;
+    private snap;
+    private editContextMenu;
+    private currentShape;
+    private fixedLineLength;
+    private fixedSquareSide;
+    private fixedRectangleWidth;
+    private fixedRectangleHeight;
+    readonly drawingSource: VectorSource;
+    readonly drawingLayer: VectorLayer;
+    private lastClosestFeature;
+    private translate;
+    private transform;
     private readonly modifyFeatureChangeListeners;
     defaultStyle: StyleFunction | undefined;
     private readonly updateGeometryInState;
     private get state();
     private get drawingState();
     private get config();
-    constructor(map: MapComponent, toolName: string, context: IGirafeContext, deleteHandler: (featureId: string) => void);
+    constructor(mapComponent: MapComponent, stateLocation: string, context: IGirafeContext, deleteHandler: (featureId: string) => void);
     private addModifyInteraction;
     private addSnapInteraction;
     private addTranslateInteraction;
@@ -51,15 +44,15 @@ export default class OlDrawing {
      * when the user does an alternate click ( = context event) on or near a vertex of a modifiable feature.
      */
     private addEditContextMenu;
-    addEditInteractions(): void;
-    removeEditInteractions(): void;
+    private addEditInteractions;
+    private removeEditInteractions;
     private readonly prepareMenuEntriesForVertex;
     private readonly prepareMenuEntriesForShape;
     /**
      Check if there is a vertex of a selected (=editable) feature within the pixel tolerance of the clicked coordinates.
      */
-    hasEditableVertexAtCoordinate(coordinate: Coordinate): boolean;
-    hasEditableShapeAtCoordinate(coordinate: Coordinate): boolean;
+    private hasEditableVertexAtCoordinate;
+    private hasEditableShapeAtCoordinate;
     /**
      Returns the closest vertex and feature to a coordinate from the drawing source.
      The feature source can be pre-filtered via an optional filter function.
@@ -97,7 +90,7 @@ export default class OlDrawing {
      *
      * @param {VectorSourceEvent} e - The add-feature event.
      */
-    onFeatureAdded(e: VectorSourceEvent): void;
+    private onFeatureAdded;
     private getOlFeatureFromDrawingSource;
     private isOlFeatureInState;
     createOlFeature(dFeature: DrawingFeature): Feature<Geometry>;
@@ -105,14 +98,14 @@ export default class OlDrawing {
     setFixedSquareSide(length: number): void;
     setFixedRectangleWidth(width: number): void;
     setFixedRectangleHeight(height: number): void;
-    createLineStringFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
-    createSquareFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry, proj: Projection): SimpleGeometry;
-    createPolygonFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
-    createDiskFixedLength(coordinates: SketchCoordType, geom: SimpleGeometry): SimpleGeometry;
-    createRectangleFixedSides(coordinates: SketchCoordType, geom: SimpleGeometry, proj: Projection): SimpleGeometry;
-    addDrawInteraction(tool: DrawingShape): void;
+    private createLineStringFixedLength;
+    private createSquareFixedLength;
+    private createPolygonFixedLength;
+    private createDiskFixedLength;
+    private createRectangleFixedSides;
+    private addDrawInteraction;
     centerViewOnFeature(drawingFeature: DrawingFeature): void;
-    getStyle(dFeature: DrawingFeature, olFeature: Feature<Geometry>): Style[];
+    private getStyle;
     private removeDrawInteraction;
     private removeModifyInteraction;
     private getDrawingShapeType;

package/{components → tools}/drawing/olDrawing.js

@@ -10,11 +10,11 @@ import VectorLayer from 'ol/layer/Vector.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getPointResolution } from 'ol/proj.js';
 import { always, never, primaryAction } from 'ol/events/condition.js';
-import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle, unByKeyAll } from '../../tools/utils/olutils.js';
-import { ContextMenu, EntryInteractionType } from '../map/tools/contextmenu.js';
-import { formatCoordinates } from '../../tools/geometrytools.js';
+import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle, unByKeyAll } from '../utils/olutils.js';
+import { ContextMenu, EntryInteractionType } from '../../components/map/tools/contextmenu.js';
+import { formatCoordinates } from '../geometrytools.js';
 import { v4 as uuidv4 } from 'uuid';
-import { isAlternateMouseClick, isPrimaryPointerAction } from '../../tools/state/userinteractionevent.js';
+import { isAlternateMouseClick, isPrimaryPointerAction } from '../state/userinteractionevent.js';
 import { calculateCenterAndMinRadius, createScaledAndRotatedGeometry, getGeometryForRendering, shouldAllowVertexInsertionForShape } from './shapeConstraints.js';
 import Transform from 'ol-ext/interaction/Transform.js';
 function getLineStroke(strokeType, lineWidth) {
@@ -51,7 +51,8 @@ function extractVerticesFromGeometry(geometry) {
 }
 export default class OlDrawing {
     map;
-    toolName;
+    // Writes drawn features into the specified location in the extended state
+    stateLocation;
     context;
     deleteHandler;
     modifiableFeatures = new Collection([]);
@@ -82,14 +83,14 @@ export default class OlDrawing {
         return this.context.stateManager.state;
     }
     get drawingState() {
-        return this.state.extendedState.drawing;
+        return this.state.extendedState[this.stateLocation];
     }
     get config() {
         return this.context.configManager.Config;
     }
-    constructor(map, toolName, context, deleteHandler) {
-        this.map = map;
-        this.toolName = toolName;
+    constructor(mapComponent, stateLocation, context, deleteHandler) {
+        this.map = mapComponent;
+        this.stateLocation = stateLocation;
         this.context = context;
         this.deleteHandler = deleteHandler;
         this.drawingSource = new VectorSource({ features: new Collection() });
@@ -103,7 +104,7 @@ export default class OlDrawing {
             }
         });
         this.defaultStyle = new Modify({ source: this.drawingSource }).getOverlay().getStyleFunction();
-        this.map.subscribe('extendedState.drawing.activeTool', (_oldTool, newTool) => newTool === null ? this.removeDrawInteraction() : this.addDrawInteraction(newTool));
+        this.map.subscribe(`extendedState.${this.stateLocation}.activeTool`, (_oldTool, newTool) => newTool === null ? this.removeDrawInteraction() : this.addDrawInteraction(newTool));
         // Could be useful logic if we decide that the mobile UI should rely use a dedicated button
         // to remove a selected vetex from a polygon/line (rather than using a longpress context menu)
         // this.map.olMap.on("click", (e) => {
@@ -116,7 +117,7 @@ export default class OlDrawing {
         //     console.log("Map Coordinate:", mapCoordinate, e.pixel, hasEditableVertex);
         //   }
         // })
-        this.map.subscribe(/extendedState.drawing.features.*\.selected/, (_old, _new) => this.updateModifiableFeatures());
+        this.map.subscribe(new RegExp(String.raw `extendedState.${this.stateLocation}.features.*\.selected`, 'g'), (_old, _new) => this.updateModifiableFeatures());
         // OlCesium duplicates drawn shapes when 3D view is open if its eventListener is not removed
         this.map.subscribe('globe.loaded', () => {
             if (this.state.globe.loaded) {
@@ -595,7 +596,7 @@ export default class OlDrawing {
     addDrawInteraction(tool) {
         this.removeDrawInteraction();
         // Block feature selection while drawing by registering 'map.select' exclusively
-        this.context.userInteractionManager.registerListener('map.select', true, this.toolName);
+        this.context.userInteractionManager.registerListener('map.select', true, this.stateLocation);
         this.currentShape = tool;
         let geomFunction = undefined;
         let olTool;
@@ -836,7 +837,7 @@ export default class OlDrawing {
             this.draw = null;
         }
         // Reactivate feature selection by unregistering 'map.select'
-        this.context.userInteractionManager.unregisterListener('map.select', this.toolName);
+        this.context.userInteractionManager.unregisterListener('map.select', this.stateLocation);
     }
     removeModifyInteraction() {
         this.clearModifyFeatureChangeListeners();
@@ -925,19 +926,19 @@ export default class OlDrawing {
         }
     }
     registerInteractions() {
-        this.context.userInteractionManager.registerListener('map.draw', true, this.toolName);
-        this.context.userInteractionManager.registerListener('map.modify', true, this.toolName);
-        this.context.userInteractionManager.registerListener('map.snap', true, this.toolName);
+        this.context.userInteractionManager.registerListener('map.draw', true, this.stateLocation);
+        this.context.userInteractionManager.registerListener('map.modify', true, this.stateLocation);
+        this.context.userInteractionManager.registerListener('map.snap', true, this.stateLocation);
     }
     unregisterInteractions() {
         this.removeDrawInteraction();
         this.removeEditInteractions();
-        this.context.userInteractionManager.unregisterListener('map.draw', this.toolName);
-        this.context.userInteractionManager.unregisterListener('map.modify', this.toolName);
-        this.context.userInteractionManager.unregisterListener('map.snap', this.toolName);
+        this.context.userInteractionManager.unregisterListener('map.draw', this.stateLocation);
+        this.context.userInteractionManager.unregisterListener('map.modify', this.stateLocation);
+        this.context.userInteractionManager.unregisterListener('map.snap', this.stateLocation);
     }
     canExecute(event) {
-        return this.context.userInteractionManager.canListenerExecute(event, this.toolName);
+        return this.context.userInteractionManager.canListenerExecute(event, this.stateLocation);
     }
     fixLastLength(length, coordinates, scale = 1) {
         const coord = coordinates;

package/tools/main.d.ts

@@ -12,6 +12,13 @@ export { default as ConfigManager } from './configuration/configmanager.js';
 export { default as GirafeConfig } from './configuration/girafeconfig.js';
 export { default as GirafeContext } from './context/context.js';
 export type { default as IGirafeContext } from './context/icontext.js';
+export { default as CesiumDrawing } from './drawing/cesiumDrawing.js';
+export type { DrawingShape, ArrowStyle, ArrowPosition, LineStroke, SerializedFeature } from './drawing/drawingFeature.js';
+export { default as DrawingFeature } from './drawing/drawingFeature.js';
+export { default as DrawingSerializer } from './drawing/drawingSerializer.js';
+export { default as DrawingState } from './drawing/drawingState.js';
+export { default as OlDrawing } from './drawing/olDrawing.js';
+export { calculateCenterAndMinRadius, createScaledAndRotatedGeometry, getGeometryForRendering, shouldAllowVertexInsertionForShape } from './drawing/shapeConstraints.js';
 export { default as ErrorManager } from './error/errormanager.js';
 export { default as CsvManager } from './export/csvmanager.js';
 export { download } from './export/download.js';
@@ -113,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

@@ -11,6 +11,12 @@ export { default as PluginManager } from './auth/pluginmanager.js';
 export { default as ConfigManager } from './configuration/configmanager.js';
 export { default as GirafeConfig } from './configuration/girafeconfig.js';
 export { default as GirafeContext } from './context/context.js';
+export { default as CesiumDrawing } from './drawing/cesiumDrawing.js';
+export { default as DrawingFeature } from './drawing/drawingFeature.js';
+export { default as DrawingSerializer } from './drawing/drawingSerializer.js';
+export { default as DrawingState } from './drawing/drawingState.js';
+export { default as OlDrawing } from './drawing/olDrawing.js';
+export { calculateCenterAndMinRadius, createScaledAndRotatedGeometry, getGeometryForRendering, shouldAllowVertexInsertionForShape } from './drawing/shapeConstraints.js';
 export { default as ErrorManager } from './error/errormanager.js';
 export { default as CsvManager } from './export/csvmanager.js';
 export { download } from './export/download.js';
@@ -88,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/brain/serialize.d.ts

@@ -1,7 +1,7 @@
 export type Constructor<T> = new (...args: any[]) => T;
 export interface IBrainSerializer<T> {
     brainSerialize(obj: T): string;
-    brainDeserialize(str: string): void;
+    brainDeserialize(str: string, stateLocation?: string): void;
 }
 export default class BrainSerializer<T extends Record<string | symbol, any>> {
     private readonly registry;

package/tools/state/brain/serialize.js

@@ -37,7 +37,7 @@ export default class BrainSerializer {
                 const serializer = this.getSerializer(state[key]);
                 if (serializer) {
                     console.debug(`Deserializing ${key} with custom serializer`);
-                    serializer.brainDeserialize(serializedState[key]);
+                    serializer.brainDeserialize(serializedState[key], key);
                 }
                 else {
                     console.debug(`Deserializing ${key} with default serializer`);

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

package/components/drawing/cesiumDrawing.d.ts

@@ -1,45 +0,0 @@
-import * as Cesium from 'cesium';
-import { Cartesian2, Cartesian3, Entity } from 'cesium';
-import DrawingFeature, { DrawingShape } from './drawingFeature.js';
-import MapComponent from '../map/component.js';
-import IGirafeContext from '../../tools/context/icontext.js';
-export default class CesiumDrawing {
-    toolName: string;
-    activeShapePoints: Cartesian3[];
-    activeShapes: Entity[];
-    floatingPoint: Entity | undefined;
-    scene: Cesium.Scene | undefined;
-    handler: Cesium.ScreenSpaceEventHandler | undefined;
-    entities: Cesium.EntityCollection | undefined;
-    fixedLineLength: number;
-    private readonly context;
-    private get state();
-    private get drawingState();
-    private get config();
-    constructor(map: MapComponent, toolName: string, context: IGirafeContext);
-    setFixedLineLength(length: number): void;
-    activateTool(tool: DrawingShape): void;
-    deactivateTool(): void;
-    pickOnGlobe(position: Cartesian2): Cesium.Cartesian3 | undefined;
-    removeLastPointAndTerminateShape(tool: DrawingShape): () => void;
-    terminateShape(tool: DrawingShape): void;
-    fixLastLength(tool: DrawingShape, length: number, coord: Cartesian3[]): void;
-    updateShape(tool: DrawingShape): (event: Cesium.ScreenSpaceEventHandler.MotionEvent) => void;
-    addPoint(tool: DrawingShape): (event: Cesium.ScreenSpaceEventHandler.PositionedEvent) => void;
-    leveledCenterToMouse(pos: Cartesian3[]): Cesium.Cartesian3;
-    makeRectangle(pos: Cartesian3[]): Cesium.Cartesian3[];
-    makeRegularPolygon(center: Cartesian3, firstPosition: Cartesian3, nbEdges: number): Cesium.Cartesian3[];
-    getShapes(tool: DrawingShape, pos: Cartesian3[], feature: DrawingFeature): Cesium.Entity[];
-    registerInteractions(): void;
-    unregisterInteractions(): void;
-    private canExecute;
-    private getPosition;
-    private getLength;
-    private createLabel;
-    private createPoint;
-    private getPolygonCenter;
-    private getPolyLineLabels;
-    private getPolygonArea;
-    private getPolyline;
-    private getPolygonEntity;
-}