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

package/api/apigeogirafeapp.d.ts

@@ -27,6 +27,9 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     private manageTooltipAttribute;
     private manageMarkersAttribute;
     private markerStringToMapMarker;
+    private manageMarkersFileAttribute;
+    private readMarkersFromFile;
+    private lineToMarker;
     private initialize;
     private injectConfigMetaTags;
 }

package/api/apigeogirafeapp.js

@@ -11,6 +11,21 @@ import MapCustomContextMenuComponent from '../components/context-menu/custom-con
 import SearchComponent from '../components/search/component.js';
 import SelectionWindowComponent from '../components/selectionwindow/component.js';
 import { splitTrimAndConvertToNumber } from '../tools/utils/utils.js';
+const getImageSize = (url) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({
+                width: img.naturalWidth,
+                height: img.naturalHeight
+            });
+        };
+        img.onerror = () => {
+            reject(new Error(`Failed to load image: ${url}`));
+        };
+        img.src = url;
+    });
+};
 export default class GeoGirafeApi extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -47,7 +62,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         });
     }
     static get observedAttributes() {
-        return ['center', 'zoom', 'basemap', 'basemapselector', 'crosshair', 'tooltip', 'markers', 'layers'];
+        return ['center', 'zoom', 'basemap', 'basemapselector', 'crosshair', 'tooltip', 'markers', 'markersfile', 'layers'];
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (this.isInitialized) {
@@ -74,6 +89,9 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             else if (name === 'markers') {
                 this.manageMarkersAttribute();
             }
+            else if (name === 'markersfile') {
+                this.manageMarkersFileAttribute();
+            }
             else if (name === 'layers') {
                 this.manageLayersAttribute();
             }
@@ -96,6 +114,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         this.manageCrosshairAttribute();
         this.manageTooltipAttribute();
         this.manageMarkersAttribute();
+        this.manageMarkersFileAttribute();
         this.manageLayersAttribute();
         this.manageSelectionboxAttribute();
         this.manageUserInteraction();
@@ -294,6 +313,82 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
             return undefined;
         }
     }
+    manageMarkersFileAttribute() {
+        const markersFile = this.getAttributeFromConfig('markersfile');
+        if (markersFile) {
+            void this.readMarkersFromFile(markersFile).then((markers) => {
+                this.context.stateManager.state.position.markers.push(...markers);
+            });
+        }
+    }
+    async readMarkersFromFile(fileUrl) {
+        const response = await fetch(fileUrl);
+        if (!response.ok) {
+            console.warn(`Cannot read markers file '${fileUrl}': ${response.status} ${response.statusText}`);
+            return [];
+        }
+        const fileContent = await response.text();
+        const lines = fileContent
+            .split(/\r?\n/)
+            .map((line) => line.trim())
+            .filter((line) => line.length > 0);
+        if (lines.length < 2) {
+            return [];
+        }
+        const headers = lines[0].split('\t').map((header) => header.trim());
+        const pointIndex = headers.indexOf('point');
+        const iconIndex = headers.indexOf('icon');
+        const iconSizeIndex = headers.indexOf('iconSize');
+        const iconOffsetIndex = headers.indexOf('iconOffset');
+        if (pointIndex === -1 || iconIndex === -1) {
+            console.warn(`Invalid markers file '${fileUrl}': missing required 'point' or 'icon' column`);
+            return [];
+        }
+        const markers = [];
+        const legacy = fileUrl.includes('legacy');
+        for (const line of lines.slice(1)) {
+            await this.lineToMarker(line, pointIndex, iconIndex, iconSizeIndex, iconOffsetIndex, legacy).then((marker) => {
+                if (marker) {
+                    markers.push(marker);
+                }
+            });
+        }
+        return markers;
+    }
+    async lineToMarker(line, pointIndex, iconIndex, iconSizeIndex, iconOffsetIndex, legacy) {
+        const columns = line.split('\t');
+        const coords = splitTrimAndConvertToNumber(columns[pointIndex]);
+        const imageUrl = columns[iconIndex]?.trim();
+        if (coords.length < 2 || !imageUrl || Number.isNaN(coords[0]) || Number.isNaN(coords[1])) {
+            console.warn(`Invalid marker line ': ${line}`);
+            return undefined;
+        }
+        // In the old WebGIS the coordinates are in the wrong order. This is to ensure compatibility with older data.
+        if (coords[0] < coords[1] && this.context.stateManager.state.projection === 'EPSG:2056') {
+            coords.reverse();
+        }
+        const size = iconSizeIndex >= 0 && columns[iconSizeIndex]?.trim()
+            ? splitTrimAndConvertToNumber(columns[iconSizeIndex])
+            : undefined;
+        let offset = iconOffsetIndex >= 0 && columns[iconOffsetIndex]?.trim()
+            ? splitTrimAndConvertToNumber(columns[iconOffsetIndex])
+            : undefined;
+        // In the old WebGIS the Offset referred to the Size of the original Image, while now it refers to the Size of the
+        // resized Image. This is to ensure compatibility with older data.
+        if (offset && size && legacy) {
+            await getImageSize(imageUrl).then((imageSize) => {
+                const scaleX = size[0] / imageSize.width;
+                const scaleY = size[1] / imageSize.height;
+                offset = [offset[0] * scaleX, offset[1] * scaleY];
+            });
+        }
+        return {
+            position: [coords[0], coords[1]],
+            imageUrl,
+            size,
+            offset
+        };
+    }
     async initialize() {
         await this.context.initialize();
         // Register Coordinate Reference Systems (CRS) definitions in PROJ4

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2545448597",
+  "version": "1.1.0-dev.2557861681",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/api.html

@@ -113,6 +113,10 @@
         text-align: left;
         margin-bottom: 1rem;
       }
+      ul {
+        width: 100%;
+        margin: 0;
+      }
     </style>
 
     <script type="module" src="src/main.api.ts"></script>
@@ -292,9 +296,12 @@
 
       <!-- 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 class="descr">
+        Add multiple markers at the defined coordinates. <br />
+        You can specify size and offset.<br />
+        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">
@@ -305,6 +312,35 @@
         </div>
       </section>
 
+      <!-- Multiple markers with size and/or offset -->
+      <h2>Add multiple markers on the map by providing a File/URL</h2>
+      <p class="descr">
+        You can provide a URL to a TXT file containing markers.<br />
+        Each line represents a marker with TAB-separated values.<br />
+        The file must contain the column names as header.
+      </p>
+      <p class="descr">Allowed column names:</p>
+      <ul>
+        <li><strong>point</strong>: coordinates where the amrker should be added.</li>
+        <li><strong>icon</strong>: url to the marker image</li>
+        <li><strong>iconSize</strong> (optional): size if the marker should be resized</li>
+        <li><strong>iconOffset</strong> (optional): offset if the marker should be shifted</li>
+      </ul>
+      <p class="descr">
+        Other columns will be ignored.<br />
+        Compatibility with the format used in the old GeoMapFish API will be managed if the URL to fo file contains the
+        keyword <code>legacy</code>.<br />
+        Coordinates can be given in both way (North,East) or (East,North) only if the SRID <code>CH:2056</code> is used.
+      </p>
+      <section>
+        <div class="row">
+          <div class="left">
+            <geogirafe-map markersfile="api.demo.markersFile" />
+          </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>
@@ -409,10 +445,6 @@
        - 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.2545448597", "build":"2545448597", "date":"22/05/2026"}
+{"version":"1.1.0-dev.2557861681", "build":"2557861681", "date":"28/05/2026"}

package/templates/public/api/data-cartoriviera.txt

@@ -0,0 +1,8 @@
+id	point	title	description	icon	iconSize	iconOffset
+1	1146337,2554168	Information	Office de l'information<br />Tél: 032 000 00 00<br>Email: <a href="mailto:info@example.com">info@example.com</a><br />Internet: <a href="http://fr.wikipedia.org/wiki/La_Chaux-de-Fonds" target=new>Cliquer ici</a>	api/marker-plus.png	21,25	-51,-90
+2	1146205,2554168	Ma première station	Diesel pas cher	api/marker2-plus.png	21,25	-51,-90
+3	1145605,2554168	Mon parking	C'est celui-là le meilleur.	api/marker2-plus.png	21,25	-51,-90
+4	1145542,2554168	Mon parking	Ce parking est<br/>le meillleur.	api/marker2-plus.png	21,25	-51,-90
+5	1145977,2554168	Ma deuxième station	Sans-plomb pas cher.	api/marker-plus.png	21,25	-51,-90
+6	1145631,2554175	Test marker 1.	api/marker-plus.png	21,25	-51,-90
+7	1145472,2554507	Test marker 2.	api/marker2-plus.png	21,25	-51,-90

package/templates/public/api/data-mapbs.txt

@@ -0,0 +1,6 @@
+id	point	title	description	icon	iconSize	iconOffset
+1	2611778,1266865	Popups konfigurieren	<br>Popups können via der Text-Datei beliebig mit Inhalt gefüllt werden!<br/>Die anderen zwei Beispiel-Popups zeigen weitere Beispiele.<br><img src="/static/api/apihelp/img/geoportal-bs.jpg" width="300px">	api/marker-blue.png	21,25	-10.5,-25
+2	2611542,1267266	Klänge der Basler Fasnacht	<br/><br/>Audio-Dateien in ein Popup einbinden:<br/><br/><audio controls><source src="/static/api/apihelp/BS_N19_Fasnacht_v1.mp3" type="audio/mp3">Your browser does not support the audio element.</audio> 	api/marker-green.png	21,25	-10.5,-25
+3	2613089,1267566	FILM AB! Für den GEO-Beruf	<br>IFrames in ein Popup einbinden: <br/><br/><iframe width="312" height="175" src="https://www.youtube.com/embed/-Mw277Rgcyc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>	api/parking.png	21,25	-10.5,-25
+4	2611738,1267123	Test for Offset/Size	Test for Offset/Size	api/marker-huge.png	24,38	-162,-512
+5	2611738,1267123	Test for Offset/Size	Test for Offset/Size	api/marker-huge.png	24,38	-12,-38