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

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.2407028282", "build":"2407028282", "date":"25/03/2026"}
+{"version":"1.1.0-dev.2407606313", "build":"2407606313", "date":"25/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,