@geogirafe/lib-geoportal 1.1.0-dev.2407038460 → 1.1.0-dev.2410093595

package/api/apigeogirafeapp.d.ts

@@ -1,15 +1,30 @@
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
 import IGirafeContext from '../tools/context/icontext.js';
 export default class GeoGirafeApi extends GirafeHTMLElement {
+    protected templateUrl: string;
+    protected styleUrls: string[];
+    private isInitialized;
     constructor();
+    private get config();
     protected connectedCallback(): void;
+    static get observedAttributes(): string[];
+    protected attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     protected getInheritedContext(): IGirafeContext;
     private defineApiComponents;
     private manageAttributes;
+    private manageUserInteraction;
+    private getAttributeFromConfig;
+    private defineAndAddComponent;
     private manageCenterAttribute;
     private manageZoomAttribute;
     private manageBasemapAttribute;
+    private manageLayersAttribute;
     private manageBasemapSelectorAttribute;
+    private manageSearchbarAttribute;
+    private manageSelectionboxAttribute;
+    private manageCrosshairAttribute;
+    private manageTooltipAttribute;
+    private manageMarkersAttribute;
     private initialize;
     private injectConfigMetaTags;
 }

package/api/apigeogirafeapp.js

@@ -6,12 +6,20 @@ import { register } from 'ol/proj/proj4.js';
 import GirafeApiContext from './apicontext.js';
 import BasemapComponent from '../components/basemap/component.js';
 import MenuButtonComponent from '../components/menubutton/component.js';
-import { applyOpacityToLayers } from '../tools/utils/utils.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';
 export default class GeoGirafeApi extends GirafeHTMLElement {
+    templateUrl = './template.html';
+    styleUrls = ['../styles/common.css', './style.css'];
+    isInitialized = false;
     constructor() {
         super('geogirafe-api');
         this.injectConfigMetaTags();
     }
+    get config() {
+        return this.context.configManager.Config.api.demo;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.initialize().then(() => {
@@ -20,10 +28,46 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             this.subscribe('application.isReady', (_, isLoaded) => {
                 if (isLoaded) {
                     this.manageAttributes();
+                    this.isInitialized = true;
+                    this.dispatchEvent(new CustomEvent('geogirafe-api-ready'));
                 }
             });
+            this.render();
         });
     }
+    static get observedAttributes() {
+        return ['center', 'zoom', 'basemap', 'basemapselector', 'crosshair', 'tooltip', 'markers', 'layers'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this.isInitialized) {
+            // We listen to attribute changes only if the API is already initialized
+            console.log(`Attribute ${name} changed : ${oldValue} → ${newValue}`);
+            if (name === 'center') {
+                this.manageCenterAttribute();
+            }
+            else if (name === 'zoom') {
+                this.manageZoomAttribute();
+            }
+            else if (name === 'basemap') {
+                this.manageBasemapAttribute();
+            }
+            else if (name === 'basemapselector') {
+                this.manageBasemapSelectorAttribute();
+            }
+            else if (name === 'crosshair') {
+                this.manageCrosshairAttribute();
+            }
+            else if (name === 'tooltip') {
+                this.manageTooltipAttribute();
+            }
+            else if (name === 'markers') {
+                this.manageMarkersAttribute();
+            }
+            else if (name === 'layers') {
+                this.manageLayersAttribute();
+            }
+        }
+    }
     getInheritedContext() {
         return new GirafeApiContext();
     }
@@ -31,16 +75,56 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         if (!customElements.get('girafe-map')) {
             customElements.define('girafe-map', MapComponent);
         }
-        this.shadow.innerHTML = `<girafe-map></girafe-map>`;
     }
     manageAttributes() {
         this.manageCenterAttribute();
         this.manageZoomAttribute();
         this.manageBasemapAttribute();
         this.manageBasemapSelectorAttribute();
+        this.manageSearchbarAttribute();
+        this.manageCrosshairAttribute();
+        this.manageTooltipAttribute();
+        this.manageMarkersAttribute();
+        this.manageLayersAttribute();
+        this.manageSelectionboxAttribute();
+        this.manageUserInteraction();
+    }
+    manageUserInteraction() {
+        // Deacivate the preview of search results
+        this.context.configManager.Config.search.objectPreview = false;
+        this.context.configManager.Config.search.layerPreview = false;
+        // Force window as selection component
+        this.state.interface.selectionComponent = 'window';
+        // Deactivate selection if the selectionbox is not active
+        const selectionbox = this.getAttribute('selectionbox');
+        if (selectionbox === null) {
+            this.context.userInteractionManager.registerListener('map.select', true, 'api');
+        }
+    }
+    getAttributeFromConfig(attributeName) {
+        let attributeValue = this.getAttribute(attributeName);
+        if (!attributeValue) {
+            return null;
+        }
+        if (attributeValue.startsWith('api.demo.')) {
+            const configName = attributeValue.replace('api.demo.', '');
+            attributeValue = this.config[configName];
+            this.setAttribute(attributeName, attributeValue);
+        }
+        return attributeValue;
+    }
+    defineAndAddComponent(customElementName, customElementType) {
+        if (!customElements.get(customElementName)) {
+            customElements.define(customElementName, customElementType);
+        }
+        const existingElement = this.shadowRoot?.querySelector(customElementName);
+        if (!existingElement) {
+            const component = new customElementType();
+            this.shadow.appendChild(component);
+        }
     }
     manageCenterAttribute() {
-        const center = this.getAttribute('center');
+        const center = this.getAttributeFromConfig('center');
         if (center) {
             const coords = center.split(',');
             const x = Number(coords[0].trim());
@@ -54,7 +138,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         }
     }
     manageZoomAttribute() {
-        const zoom = this.getAttribute('zoom');
+        const zoom = this.getAttributeFromConfig('zoom');
         if (zoom) {
             const zoomLevel = Number(zoom.trim());
             if (Number.isNaN(zoomLevel)) {
@@ -66,14 +150,15 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         }
     }
     manageBasemapAttribute() {
-        const basemap = this.getAttribute('basemap');
+        const basemap = this.getAttributeFromConfig('basemap');
         if (basemap) {
             const basemapName = basemap.trim();
             if (basemapName) {
                 // Find the basemap in the available basemaps
                 const availableBasemap = Object.values(this.context.stateManager.state.basemaps).find((b) => b.name === basemapName);
                 if (availableBasemap) {
-                    applyOpacityToLayers(1, availableBasemap.layersList);
+                    // Force opacity to 1 for the API
+                    availableBasemap.opacity = 1;
                     this.context.stateManager.state.activeBasemaps = [availableBasemap];
                 }
                 else {
@@ -82,16 +167,90 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             }
         }
     }
+    manageLayersAttribute() {
+        const layers = this.getAttributeFromConfig('layers');
+        if (layers) {
+            const layerNames = layers.split(',');
+            for (const layerName of layerNames) {
+                if (!this.context.themesHelper.addLayerFromName(layerName.trim())) {
+                    console.warn(`Cannot add layer ${layerName.trim()}`);
+                }
+            }
+        }
+    }
     manageBasemapSelectorAttribute() {
         const basemapselector = this.getAttribute('basemapselector');
         if (basemapselector != null) {
-            if (!customElements.get('girafe-menu-button')) {
-                customElements.define('girafe-menu-button', MenuButtonComponent);
+            this.defineAndAddComponent('girafe-menu-button', MenuButtonComponent);
+            this.defineAndAddComponent('girafe-basemap', BasemapComponent);
+        }
+    }
+    manageSearchbarAttribute() {
+        const searchbar = this.getAttribute('searchbar');
+        if (searchbar != null) {
+            this.defineAndAddComponent('girafe-search', SearchComponent);
+        }
+    }
+    manageSelectionboxAttribute() {
+        const selectionbox = this.getAttribute('selectionbox');
+        if (selectionbox != null) {
+            this.defineAndAddComponent('girafe-selection-window', SelectionWindowComponent);
+        }
+    }
+    manageCrosshairAttribute() {
+        const crosshair = this.getAttributeFromConfig('crosshair');
+        if (crosshair) {
+            const coords = crosshair.split(',');
+            const x = Number(coords[0].trim());
+            const y = Number(coords[1].trim());
+            if (!Number.isNaN(x) && !Number.isNaN(y)) {
+                this.context.stateManager.state.position.crosshair = [x, y];
+            }
+            else {
+                console.warn('Invalid crosshair coordinates');
+            }
+        }
+    }
+    manageTooltipAttribute() {
+        const tooltip = this.getAttributeFromConfig('tooltip');
+        if (tooltip) {
+            this.defineAndAddComponent('girafe-custom-context-menu', MapCustomContextMenuComponent);
+            const content = tooltip.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 text = content[1];
+                this.context.stateManager.state.position.tooltip = {
+                    position: [x, y],
+                    content: text
+                };
+            }
+            else {
+                console.warn('Invalid tooltip coordinates');
             }
-            if (!customElements.get('girafe-basemap')) {
-                customElements.define('girafe-basemap', BasemapComponent);
+        }
+    }
+    manageMarkersAttribute() {
+        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
+                    });
+                }
+                else {
+                    console.warn('Invalid marker coordinates');
+                }
             }
-            this.shadow.innerHTML += '<girafe-basemap></girafe-basemap>';
         }
     }
     async initialize() {
@@ -101,7 +260,9 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             proj4.defs(crs.code, crs.definition);
         }
         register(proj4);
-        // Tell the application it is initialized (no auth at the moment for the api)
+        // No custom serializer for the API
+        this.context.stateManager.state.application.isCustomSerializerInitialized = true;
+        // No auth for the api
         this.context.stateManager.state.application.isAuthInitialized = true;
         // Automatically toggle dark/light mode when changed in the system
         globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
@@ -116,9 +277,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     }
     injectConfigMetaTags() {
         const location = new URL(import.meta.url);
-        if (import.meta?.env?.DEV) {
-            location.pathname = location.pathname.replace('/src/api', '');
-        }
+        location.pathname = location.pathname.replace('/src/api', '');
         const origin = `${location.origin}${location.pathname.substring(0, location.pathname.lastIndexOf('/'))}`;
         const baseConfigUrl = `${origin}/config.json`;
         const apiConfigUrl = `${origin}/config.api.json`;

package/components/map/component.d.ts

@@ -17,7 +17,6 @@ import DrawingManager from './tools/drawingmanager.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import Basemap from '../../models/basemaps/basemap.js';
 import Layer from '../../models/layers/layer.js';
-import MapPosition from '../../tools/state/mapposition.js';
 import BaseLayer from '../../models/layers/baselayer.js';
 import { FocusFeature } from './tools/focusfeature.js';
 import XyzManager from './tools/xyzmanager.js';
@@ -52,6 +51,8 @@ export default class MapComponent extends GirafeHTMLElement {
     crosshairFeature: Feature;
     crosshairLayer: VectorLayer<VectorSource>;
     geolocationSource: VectorSource;
+    private readonly markerSource;
+    private readonly markerLayer;
     get projection(): import("ol/proj.js").Projection;
     get config(): import("../../tools/main.js").GirafeConfig;
     /**
@@ -155,5 +156,7 @@ export default class MapComponent extends GirafeHTMLElement {
      * Moves the map to the position defined in the permalink, making sure the map is initialized and ready to be moved.
      */
     private applyMapPositionFromPermalink;
-    showCrosshair(position: MapPosition): void;
+    private clearAllMarkers;
+    private addMarker;
+    private showCrosshair;
 }

package/components/map/component.js

@@ -1,7 +1,7 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import { Collection, Feature } from 'ol';
-import { Circle, Fill, RegularShape, Stroke, Style } from 'ol/style.js';
+import { Circle, Fill, Icon, RegularShape, Stroke, Style } from 'ol/style.js';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import { DragBox } from 'ol/interaction.js';
@@ -74,6 +74,10 @@ export default class MapComponent extends GirafeHTMLElement {
     crosshairFeature;
     crosshairLayer;
     geolocationSource;
+    markerSource = new VectorSource();
+    markerLayer = new VectorLayer({
+        source: this.markerSource
+    });
     get projection() {
         return this.olMap.getView().getProjection();
     }
@@ -124,6 +128,12 @@ export default class MapComponent extends GirafeHTMLElement {
         this.subscribe('selection.selectedFeatures', (_oldFeatures, newFeatures) => this.onFeaturesSelected(newFeatures));
         this.subscribe('selection.highlightedFeatures', (_oldFeatures, newFeatures) => this.onFeatureHighlighted(newFeatures));
         this.subscribe('selection.focusedFeatures', (_oldFeature, newFeature) => this.focusFeature.setFocusedFeatures(newFeature));
+        this.subscribe('position.markers', () => {
+            this.clearAllMarkers();
+            for (const marker of this.state.position.markers) {
+                this.addMarker(marker.position, marker.imageUrl);
+            }
+        });
         this.subscribe('globe.display', async () => {
             await this.onGlobeToggled();
             this.onCameraChanged(this.state.globe.camera);
@@ -162,6 +172,9 @@ export default class MapComponent extends GirafeHTMLElement {
                     this.applyFeatureSelectionFromSharedState();
                 }
                 this.showCrosshair(this.state.position);
+                for (const marker of this.state.position.markers) {
+                    this.addMarker(marker.position, marker.imageUrl);
+                }
             }
         });
     }
@@ -272,6 +285,7 @@ export default class MapComponent extends GirafeHTMLElement {
         this.setHighlightLayerStyle();
         this.olMap.addLayer(this.selectionLayer);
         this.olMap.addLayer(this.highlightLayer);
+        this.olMap.addLayer(this.markerLayer);
         this.selectionLayer.setZIndex(1002);
         this.highlightLayer.setZIndex(1003);
         this.selectionLayer.set('altitudeMode', 'clampToGround');
@@ -999,8 +1013,29 @@ export default class MapComponent extends GirafeHTMLElement {
         if (position?.isValid) {
             // We need the following to recalculate resolution and scale to properly update the position state
             this.state.position = position;
+            if (position.markers.length > 0) {
+                // Add marker to the map
+                this.addMarker(position.markers[0].position, position.markers[0].imageUrl);
+            }
         }
     }
+    clearAllMarkers() {
+        this.markerSource.clear();
+    }
+    addMarker(position, imageUrl) {
+        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
+            })
+        });
+        const marker = new Feature({
+            geometry: new Point(position)
+        });
+        marker.setStyle(iconStyle);
+        this.markerSource.addFeature(marker);
+    }
     showCrosshair(position) {
         if (!position.crosshair) {
             return;

package/components/search/component.js

@@ -118,7 +118,14 @@ class SearchComponent extends GirafeHTMLElement {
         this.render();
         super.girafeTranslate();
         this.registerEvents();
-        this.createTooltip();
+        this.context.i18nManager.ensureTranslationLoaded().then((loaded) => {
+            if (loaded) {
+                this.createTooltip();
+            }
+            else {
+                console.debug('Translations not loaded');
+            }
+        });
         if (this.context.permalinkManager.hasSearch()) {
             this.subscribe('application.isReady', () => {
                 if (this.state.application.isReady) {

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2407038460",
+  "version": "1.1.0-dev.2410093595",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"
@@ -53,7 +53,6 @@
   },
   "peerDependencies": {
     "@geoblocks/mapfishprint": "0.3",
-    "@types/geojson": "7946",
     "cesium": ">1.113",
     "ol": "8 || 9 || 10",
     "ol-ext": "^4.0.37",
@@ -94,10 +93,10 @@
     "proj4": "2.19.10",
     "svgo": "4.0.0",
     "typescript": "5.8.3",
-    "vite": "7.0.6",
-    "vite-bundle-analyzer": "1.3.2",
+    "vite": "7.3.1",
+    "vite-bundle-analyzer": "1.3.6",
     "vite-plugin-html": "3.2.2",
-    "vite-plugin-static-copy": "3.1.1",
+    "vite-plugin-static-copy": "3.2.0",
     "vitest": "3.2.4"
   },
   "types": "./main.d.ts",

package/styles/api.css

@@ -0,0 +1,2 @@
+@import './variables.css';
+@import '../../node_modules/tippy.js/dist/tippy.css';

package/templates/api.html

@@ -8,6 +8,7 @@
       content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
     <title>GeoGirafe API</title>
     <style>
       body {
@@ -66,6 +67,7 @@
       .left {
         width: 50%;
         height: 100%;
+        position: relative;
       }
 
       .right {
@@ -73,7 +75,8 @@
         height: 100%;
       }
 
-      girafe-map {
+      geogirafe-map {
+        position: absolute;
         display: block;
         width: 100%;
         height: 100%;
@@ -102,29 +105,54 @@
       h2 {
         border-bottom: solid 1px #aaa;
         padding-bottom: 0.5rem;
+        margin-bottom: 0;
+        width: 100%;
+      }
+      .descr {
         width: 100%;
+        text-align: left;
+        margin-bottom: 1rem;
       }
     </style>
+
     <script type="module" src="./src/api/api.ts"></script>
+    <link rel="stylesheet" href="./src/styles/api.css" />
+
     <script>
       document.addEventListener('DOMContentLoaded', () => {
         const apiOrigin = `${window.location.origin}${window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'))}`;
         const elem = document.getElementById('include-code');
 
         elem.textContent = elem.textContent.replace('src="/geogirafe-api.js"', `src="${apiOrigin}/geogirafe-api.js"`);
+        elem.textContent = elem.textContent.replace(
+          'href="/geogirafe-api.css"',
+          `src="${apiOrigin}/geogirafe-api.css"`
+        );
 
         const sections = document.querySelectorAll('section');
-        sections.forEach((section) => {
+        for (const section of sections) {
           const leftDiv = section.querySelector('.left');
           const rightDiv = section.querySelector('.right');
           if (leftDiv && rightDiv) {
-            let content = leftDiv.innerHTML;
-            content = content.replace(/\s+/g, ' ').replace(/>\s+/g, '>').replace(/\s+</g, '<').trim();
-            const pre = document.createElement('pre');
-            pre.textContent = content;
-            rightDiv.appendChild(pre);
+            const ggMap = leftDiv.querySelector('geogirafe-map');
+            if (ggMap) {
+              ggMap.addEventListener('geogirafe-api-ready', () => {
+                let content = leftDiv.innerHTML;
+                content = content
+                  .replaceAll(/\s+/g, ' ')
+                  .replaceAll(/>\s+/g, '>')
+                  .replaceAll(/\s+</g, '<')
+                  .replaceAll('=""', '')
+                  .replaceAll(' style="display: block;"', '')
+                  .replaceAll('><', '>\n<')
+                  .trim();
+                const pre = document.createElement('pre');
+                pre.textContent = content;
+                rightDiv.appendChild(pre);
+              });
+            }
           }
-        });
+        }
       });
     </script>
   </head>
@@ -150,12 +178,13 @@
         <pre id="include-code">
 &lt;head&gt;
   &lt;script type="module" crossorigin src="/geogirafe-api.js"&gt;&lt;/script&gt;
+  &lt;link rel="stylesheet" href="/geogirafe-api.css" /&gt;
 &lt;/head&gt;</pre
         >
       </section>
 
-      <!-- Simple map -->
       <h2>Add a simple map view</h2>
+      <p class="descr">Add a simple map to the page, with its default configuration.</p>
       <section>
         <div class="row">
           <div class="left">
@@ -167,10 +196,11 @@
 
       <!-- With center -->
       <h2>Add a map with center coordinates</h2>
+      <p class="descr">Set the default center point.</p>
       <section>
         <div class="row">
           <div class="left">
-            <geogirafe-map center="2614484, 1267592" />
+            <geogirafe-map center="api.demo.center" />
           </div>
           <div class="right"></div>
         </div>
@@ -178,10 +208,11 @@
 
       <!-- Custom zoom level -->
       <h2>Add a map with a custom zoomlevel</h2>
+      <p class="descr">Set the default zoom level.</p>
       <section>
         <div class="row">
           <div class="left">
-            <geogirafe-map zoom="11" />
+            <geogirafe-map zoom="api.demo.zoom" />
           </div>
           <div class="right"></div>
         </div>
@@ -189,17 +220,19 @@
 
       <!-- Custom basemap -->
       <h2>Add a map with a custom basemap</h2>
+      <p class="descr">Set the default basemap.</p>
       <section>
         <div class="row">
           <div class="left">
-            <geogirafe-map basemap="OF_Orthofoto2023Mai" />
+            <geogirafe-map basemap="api.demo.basemap" />
           </div>
           <div class="right"></div>
         </div>
       </section>
 
-      <!-- Basemap selector  -->
-      <!-- <h2>Add a map with a basemap selector</h2>
+      <!-- Basemap selector -->
+      <h2>Add a map with a basemap selector</h2>
+      <p class="descr">Activate the basemap selector, allowing the user to select a different basemap.</p>
       <section>
         <div class="row">
           <div class="left">
@@ -207,7 +240,164 @@
           </div>
           <div class="right"></div>
         </div>
-      </section> -->
+      </section>
+
+      <!-- Crosshair -->
+      <h2>Add a crosshair somewhere on the map</h2>
+      <p class="descr">Add a cross at the defined coordinates.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map crosshair="api.demo.crosshair" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Tooltip -->
+      <h2>Add a toolip somewhere on the map</h2>
+      <p class="descr">Add a tooltip with cutom text at the defined coordinates.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map tooltip="api.demo.tooltip" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Markers -->
+      <h2>Add a marker somewhere on the map</h2>
+      <p class="descr">Add a marker at the defined coordinates.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map markers="api.demo.marker" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Multiple markers -->
+      <h2>Add multiple markers on the map</h2>
+      <p class="descr">Add multiple markers at the defined coordinates.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map markers="api.demo.markers" />
+          </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>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map layers="api.demo.layers" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Mulaiple 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>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map layers="api.demo.multiLayers" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Layers with config -->
+      <h2>Add a layer to the map, including default opacity and filter</h2>
+      <p class="descr">
+        Add a layer to the map. The layer name must be defined in the themes.json file. The layer options follow the
+        format defined in the
+        <a target="_blank" href="https://doc.geogirafe.org/docs/core-concepts/permalink#layers-configuration"
+          >documentation</a
+        >.
+      </p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map center="api.demo.layersWithConfigCenter" layers="api.demo.layersWithConfig" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Search bar -->
+      <h2>Add a map with a search bar</h2>
+      <p class="descr">Activate the searchbar, allowing the user to search for objects and layers.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map searchbar />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Selection box -->
+      <h2>Add a map and allow selection</h2>
+      <p class="descr">
+        Activate the selection window, allowing the user to select objects and display their properties.
+      </p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map layers="api.demo.layers" selectionbox />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
+
+      <!-- Set values with javascript -->
+      <h2>Set map values with javascript</h2>
+      <p class="descr">This example shows how to use javascript to set attributes after the map creation.</p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <button onclick="document.getElementById('my-map').setAttribute('center', 'api.demo.center');">
+              Recenter
+            </button>
+            <button onclick="document.getElementById('my-map').setAttribute('zoom', 'api.demo.zoom');">Zoom</button>
+            <button onclick="document.getElementById('my-map').setAttribute('basemap', 'api.demo.basemap');">
+              Set Basemap
+            </button>
+            <button onclick="document.getElementById('my-map').setAttribute('basemapselector', '');">
+              Enable basemap selector
+            </button>
+            <button onclick="document.getElementById('my-map').setAttribute('markers', 'api.demo.marker');">
+              Add Marker
+            </button>
+            <button onclick="document.getElementById('my-map').setAttribute('layers', 'api.demo.layers');">
+              Add Layer
+            </button>
+            <geogirafe-map id="my-map" />
+          </div>
+          <div class="right"></div>
+        </div>
+      </section>
     </div>
+
+    <!--
+      Still missing:
+       - searchfor: centerto search result
+       - center to bounding box
+       - 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.2407038460", "build":"2407038460", "date":"25/03/2026"}
+{"version":"1.1.0-dev.2410093595", "build":"2410093595", "date":"26/03/2026"}

package/templates/vite.config.js

@@ -96,6 +96,10 @@ export default defineConfig(({ command, mode }) => {
               return 'geogirafe-api.js';
             }
             return 'assets/[name].[hash].js';
+          },
+          assetFileNames: (assetInfo) => {
+            if (assetInfo.name == 'api.css') return 'geogirafe-api.css';
+            return 'assets/[name].[hash].[ext]';
           }
         }
       }

package/tools/configuration/girafeconfig.d.ts

@@ -223,6 +223,19 @@ declare class GirafeConfig {
             description: string;
         }[];
     };
+    api?: {
+        demo: {
+            center: string;
+            zoom: string;
+            basemap: string;
+            crosshair: string;
+            tooltip: string;
+            layers: string;
+            multiLayers: string;
+            layersWithConfig: string;
+            layersWithConfigCenter: string;
+        };
+    };
     extendedConfig?: Record<string, object>;
     static readonly DEFAULT_LOCALE = "en-US";
     /**
@@ -261,5 +274,6 @@ declare class GirafeConfig {
     private initExternalLayers;
     private initExtendedConfig;
     private initOnboarding;
+    private initApiConfig;
 }
 export default GirafeConfig;

package/tools/configuration/girafeconfig.js

@@ -28,6 +28,7 @@ class GirafeConfig {
     userdata;
     contact;
     onboarding;
+    api;
     // The extended configuration can be used by third-party components or extensions
     // to add custom attributes to the GirafeConfig.
     extendedConfig;
@@ -66,6 +67,7 @@ class GirafeConfig {
         this.contact = this.initConfigContact(config);
         this.extendedConfig = this.initExtendedConfig(config);
         this.onboarding = this.initOnboarding(config);
+        this.api = this.initApiConfig(config);
         try {
             this.search = this.initConfigSearch(config);
         }
@@ -403,5 +405,8 @@ class GirafeConfig {
     initOnboarding(config) {
         return config.onboarding ?? undefined;
     }
+    initApiConfig(config) {
+        return config.api ?? undefined;
+    }
 }
 export default GirafeConfig;

package/tools/main.d.ts

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

package/tools/share/serializers/mappositionserializer.js

@@ -12,7 +12,8 @@ export default class MapPositionSerializer {
             center: mapPosition.center,
             resolution: mapPosition.resolution,
             crosshair: mapPosition.crosshair,
-            tooltip: mapPosition.tooltip
+            tooltip: mapPosition.tooltip,
+            markers: mapPosition.markers
         };
         return JSON.stringify(pos);
     }
@@ -23,6 +24,7 @@ export default class MapPositionSerializer {
         mapPosition.resolution = pos.resolution;
         mapPosition.crosshair = pos.crosshair;
         mapPosition.tooltip = pos.tooltip;
+        mapPosition.markers = pos.markers;
         this.state.position = mapPosition;
     }
 }

package/tools/share/serializers/mappositionserializer.spec.js

@@ -26,6 +26,10 @@ describe('MapPositionSerializer.serialize', () => {
             content: 'Test tooltip',
             position: [10, 20]
         };
+        mapPosition.markers.push({
+            imageUrl: 'http://url.to.marker',
+            position: [11, 22]
+        });
         const serialized = serializer.brainSerialize(mapPosition);
         expect(serialized).toBe(JSON.stringify({
             center: [10, 20],
@@ -34,7 +38,13 @@ describe('MapPositionSerializer.serialize', () => {
             tooltip: {
                 content: 'Test tooltip',
                 position: [10, 20]
-            }
+            },
+            markers: [
+                {
+                    imageUrl: 'http://url.to.marker',
+                    position: [11, 22]
+                }
+            ]
         }));
     });
 });
@@ -47,7 +57,13 @@ describe('MapPositionSerializer.deserialize', () => {
             tooltip: {
                 content: 'Test tooltip',
                 position: [10, 20]
-            }
+            },
+            markers: [
+                {
+                    imageUrl: 'http://url.to.marker',
+                    position: [11, 22]
+                }
+            ]
         });
         serializer.brainDeserialize(json);
         const state = context.stateManager.state;
@@ -59,6 +75,12 @@ describe('MapPositionSerializer.deserialize', () => {
             content: 'Test tooltip',
             position: [10, 20]
         });
+        expect(state.position.markers).toEqual([
+            {
+                imageUrl: 'http://url.to.marker',
+                position: [11, 22]
+            }
+        ]);
     });
     it('should override previous map position in state', () => {
         const state = context.stateManager.state;

package/tools/state/mapposition.d.ts

@@ -1,4 +1,8 @@
 import { Coordinate } from 'ol/coordinate.js';
+export type MapMarker = {
+    imageUrl: string;
+    position: Coordinate;
+};
 declare class MapPosition {
     center: Coordinate;
     zoom?: number;
@@ -9,6 +13,7 @@ declare class MapPosition {
         content: string;
         position?: Coordinate;
     };
+    markers: MapMarker[];
     get isValid(): boolean;
     clone(): MapPosition;
 }

package/tools/state/mapposition.js

@@ -5,6 +5,7 @@ class MapPosition {
     scale;
     crosshair;
     tooltip;
+    markers = [];
     get isValid() {
         if (Number.isNaN(this.resolution)) {
             return false;
@@ -27,6 +28,12 @@ class MapPosition {
                 position: this.tooltip.position ? [...this.tooltip.position] : undefined
             }
             : undefined;
+        for (const marker of this.markers) {
+            position.markers.push({
+                imageUrl: marker.imageUrl,
+                position: marker.position
+            });
+        }
         return position;
     }
 }

package/tools/state/mapposition.spec.js

@@ -13,6 +13,7 @@ describe('MapPosition', () => {
         expect(mapPosition.scale).toBeUndefined();
         expect(mapPosition.crosshair).toBeUndefined();
         expect(mapPosition.tooltip).toBeUndefined();
+        expect(mapPosition.markers.length).toBe(0);
     });
     describe('isValid', () => {
         it('should return false if resolution is NaN', () => {

package/tools/themes/themeshelper.d.ts

@@ -25,7 +25,8 @@ export default class ThemesHelper extends GirafeSingleton {
     addThemesFromUrl(): boolean;
     addGroupsFromUrl(): boolean;
     addLayersFromUrl(): boolean;
-    private addLayerBaseFromUrl;
+    addLayerFromName(layername: string): boolean;
+    private addLayerBaseFromName;
     private extractLayerOptions;
     private extractLayerOptionOpacity;
     private extractLayerOptionFilter;

package/tools/themes/themeshelper.js

@@ -206,7 +206,7 @@ export default class ThemesHelper extends GirafeSingleton {
         let added = false;
         if (this.context.permalinkManager.hasGroups()) {
             for (const groupname of this.context.permalinkManager.getGroups()) {
-                added = this.addLayerBaseFromUrl(groupname, 'group') || added;
+                added = this.addLayerBaseFromName(groupname, 'group') || added;
             }
         }
         return added;
@@ -215,38 +215,40 @@ export default class ThemesHelper extends GirafeSingleton {
         let added = false;
         if (this.context.permalinkManager.hasLayers()) {
             for (const layername of this.context.permalinkManager.getLayers()) {
-                added = this.addLayerBaseFromUrl(layername, 'layer') || added;
+                added = this.addLayerBaseFromName(layername, 'layer') || added;
             }
         }
         return added;
     }
-    addLayerBaseFromUrl(layer, type) {
-        let added = false;
+    addLayerFromName(layername) {
+        return this.addLayerBaseFromName(layername, 'layer');
+    }
+    addLayerBaseFromName(layer, type) {
         const layerOptions = this.extractLayerOptions(layer, type);
-        if (layerOptions) {
-            const clonedTheme = this.getMinimalClonedThemeForLayer(layerOptions.originalLayer);
-            this.mergeLayerWithExistingLayerTree(clonedTheme, this.state.layers.layersList);
-            added = true;
-            if (layerOptions.active) {
-                const clonedLayer = this.findLayerRecursive(clonedTheme.children, layerOptions.originalLayer.name);
-                if (clonedLayer) {
-                    this.context.layerManager.toggle(clonedLayer, 'on');
-                    if (layerOptions.opacity) {
-                        clonedLayer.opacity = layerOptions.opacity;
-                    }
-                    if (layerOptions.filter) {
-                        clonedLayer.filter = layerOptions.filter;
-                    }
-                    if (layerOptions.timeRestriction) {
-                        clonedLayer.timeRestriction = layerOptions.timeRestriction;
-                    }
-                }
-            }
-        }
-        else {
+        if (!layerOptions) {
             console.warn(`Layer ${layer} cannot be found`);
+            return false;
         }
-        return added;
+        const clonedTheme = this.getMinimalClonedThemeForLayer(layerOptions.originalLayer);
+        this.mergeLayerWithExistingLayerTree(clonedTheme, this.state.layers.layersList);
+        if (!layerOptions.active) {
+            // Layer added, but inactive. No further config needed
+            return true;
+        }
+        const clonedLayer = this.findLayerRecursive(this.state.layers.layersList, layerOptions.originalLayer.name);
+        if (clonedLayer) {
+            this.context.layerManager.toggle(clonedLayer, 'on');
+            if (layerOptions.opacity) {
+                clonedLayer.opacity = layerOptions.opacity;
+            }
+            if (layerOptions.filter) {
+                clonedLayer.filter = layerOptions.filter;
+            }
+            if (layerOptions.timeRestriction) {
+                clonedLayer.timeRestriction = layerOptions.timeRestriction;
+            }
+        }
+        return true;
     }
     extractLayerOptions(urlParam, type) {
         let active = true;
@@ -349,12 +351,14 @@ export default class ThemesHelper extends GirafeSingleton {
             this.addLayerToLayerTree(newLayer, existingList, activate, layerTreeChanges, parent);
             return;
         }
-        else if (newLayer.isHighlighted) {
+        if (newLayer.isHighlighted) {
+            // The layer is already present
             this.highlightLayerInLayerTree(existingLayer, activate, layerTreeChanges);
+            return;
         }
-        // Otherwise, we have to merge the themes
-        if ((newLayer instanceof ThemeLayer || newLayer instanceof GroupLayer) &&
-            (existingLayer instanceof ThemeLayer || existingLayer instanceof GroupLayer)) {
+        // Otherwise, we have to merge the themes/groups
+        if ((newLayer instanceof ThemeLayer && existingLayer instanceof ThemeLayer) ||
+            (newLayer instanceof GroupLayer && existingLayer instanceof GroupLayer)) {
             for (const child of newLayer.children) {
                 this.mergeLayerWithExistingLayerTree(child, existingLayer.children, activate, layerTreeChanges, existingLayer);
             }

package/tools/url/permalinkmanager.d.ts

@@ -19,7 +19,8 @@ export default class PermalinkManager extends GirafeSingleton {
         }[];
     } | null;
     hasMapPosition(): boolean | "" | null;
-    hasToolTip(): boolean;
+    private hasToolTip;
+    private hasMarker;
     getMapPosition(targetProjection: Projection): MapPosition | undefined;
     hasSearch(): boolean;
     getSearchTerm(): string;

package/tools/url/permalinkmanager.js

@@ -12,6 +12,7 @@ export default class PermalinkManager extends GirafeSingleton {
         'map_zoom',
         'map_crosshair',
         'map_tooltip',
+        'map_marker',
         'search',
         'basemap',
         'themes',
@@ -79,6 +80,9 @@ export default class PermalinkManager extends GirafeSingleton {
     hasToolTip() {
         return this.params['map_tooltip'] !== null;
     }
+    hasMarker() {
+        return this.params['map_marker'] !== null;
+    }
     getMapPosition(targetProjection) {
         if (this.hasMapPosition()) {
             const position = new MapPosition();
@@ -106,6 +110,13 @@ export default class PermalinkManager extends GirafeSingleton {
                     position: center
                 };
             }
+            if (this.hasMarker()) {
+                const imageUrl = DOMPurify.sanitize(this.params['map_marker']);
+                position.markers.push({
+                    imageUrl: imageUrl,
+                    position: center
+                });
+            }
             if (position.isValid) {
                 return position;
             }

package/tools/url/permalinkmanager.spec.js

@@ -13,6 +13,7 @@ const emptyUrlParameters = {
     map_zoom: null,
     map_crosshair: null,
     map_tooltip: null,
+    map_marker: null,
     search: null,
     basemap: null,
     themes: null,