@geogirafe/lib-geoportal 1.1.0-dev.2407028282 → 1.1.0-dev.2407606313

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/models/serverwfs.d.ts

@@ -12,6 +12,8 @@ declare class ServerWfs<WfsXmlTypes = XmlTypes> {
     };
     initialized: boolean;
     constructor(name: string, url: string);
+    addLayer(layer: string): void;
+    removeLayer(layer: string): void;
     addLayerAttribute(layer: string, name: string, type: string): void;
     getGeometryColumnNameToFeatureTypes(featureTypes: string[]): Record<string, string[]>;
 }

package/models/serverwfs.js

@@ -9,11 +9,17 @@ class ServerWfs {
         this.url = url;
         this.initialized = false;
     }
-    addLayerAttribute(layer, name, type) {
-        if (!(layer in this.layers)) {
-            // Layer does not exists yet
+    addLayer(layer) {
+        if (!this.layers[layer]) {
             this.layers[layer] = [];
         }
+    }
+    removeLayer(layer) {
+        delete this.layers[layer];
+        delete this.featureTypeToGeometryColumnName[layer];
+    }
+    addLayerAttribute(layer, name, type) {
+        this.addLayer(layer);
         this.layers[layer].push({
             name: name,
             type: type

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2407028282",
+  "version": "1.1.0-dev.2407606313",
   "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';