@geogirafe/lib-geoportal 1.2.0-dev.2729313771 → 1.2.0-dev.2750042516

package/assets/i18n/de.json

@@ -488,6 +488,7 @@
     "Send message": "Nachricht senden",
     "Settings": "Einstellungen",
     "Shadows": "Schatten",
+    "Share map": "Karte teilen",
     "Share this map": "Diese Karte teilen",
     "share-panel": "Karte teilen oder einbetten",
     "Show metadata": "Metadaten anzeigen",

package/assets/i18n/en.json

@@ -490,6 +490,7 @@
     "Send message": "Send message",
     "Settings": "Settings",
     "Shadows": "Shadows",
+    "Share map": "Share map",
     "Share this map": "Share this map",
     "share-panel": "Share or embed map",
     "Show metadata": "Show metadata",

package/assets/i18n/fr.json

@@ -488,6 +488,7 @@
     "Send message": "Envoyer un message",
     "Settings": "Paramètres",
     "Shadows": "Ombres",
+    "Share map": "Partager la carte",
     "Share this map": "Partager cette carte",
     "share-panel": "Partager ou intégrer la carte",
     "Show metadata": "Afficher les métadonnées",

package/assets/i18n/it.json

@@ -488,6 +488,7 @@
     "Send message": "Invia messaggio",
     "Settings": "Impostazioni",
     "Shadows": "Ombre",
+    "Share map": "Condividi la mappa",
     "Share this map": "Condividi questa mappa",
     "share-panel": "Condividi o incorpora la mappa",
     "Show metadata": "Mostra metadati",

package/assets/icons/share-native.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#d9d9d9" d="M0 0h24v24H0z"/></mask><g mask="url(#a)"><path fill="#1c1b1f" d="M18 22a2.9 2.9 0 0 1-2.125-.875A2.9 2.9 0 0 1 15 19q0-.175.025-.363.025-.187.075-.337l-7.05-4.1q-.425.375-.95.588T6 15a2.9 2.9 0 0 1-2.125-.875A2.9 2.9 0 0 1 3 12q0-1.25.875-2.125A2.9 2.9 0 0 1 6 9q.575 0 1.1.213.525.212.95.587l7.05-4.1a2 2 0 0 1-.075-.338A3 3 0 0 1 15 5q0-1.25.875-2.125A2.9 2.9 0 0 1 18 2q1.25 0 2.125.875T21 5t-.875 2.125A2.9 2.9 0 0 1 18 8q-.575 0-1.1-.213a3.3 3.3 0 0 1-.95-.587L8.9 11.3q.05.15.075.337a2.7 2.7 0 0 1 0 .726 2 2 0 0 1-.075.337l7.05 4.1q.425-.375.95-.588T18 16q1.25 0 2.125.875T21 19t-.875 2.125A2.9 2.9 0 0 1 18 22m0-16q.424 0 .712-.287A.97.97 0 0 0 19 5a.97.97 0 0 0-.288-.713A.97.97 0 0 0 18 4a.97.97 0 0 0-.712.287A.97.97 0 0 0 17 5q0 .424.288.713Q17.575 6 18 6M6 13q.424 0 .713-.287A.97.97 0 0 0 7 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 6 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 5 12q0 .424.287.713Q5.576 13 6 13m12 7q.424 0 .712-.288A.97.97 0 0 0 19 19a.97.97 0 0 0-.288-.712A.97.97 0 0 0 18 18a.97.97 0 0 0-.712.288A.97.97 0 0 0 17 19q0 .424.288.712.287.288.712.288"/></g></svg>

package/components/drawing/component.js

@@ -319,17 +319,19 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
     }
     onProjectionChanged(oldProj, newProj) {
-        if (oldProj != null && oldProj != newProj) {
-            const geoJson = new GeoJSON();
-            const features = [...this.drawingState.features];
-            features.forEach((f) => {
-                // TODO Handle the case of disks
-                f.geojson = geoJson.writeFeatureObject(geoJson.readFeature(f.geojson, { dataProjection: oldProj, featureProjection: newProj }));
-            });
-            // Refresh all the listeners
-            this.drawingState.features = [];
-            this.drawingState.features = features;
+        if (oldProj === null || oldProj === newProj) {
+            return;
         }
+        const features = [...this.drawingState.features];
+        features.forEach((f) => {
+            const transformedGeoJson = DrawingFeature.transformGeoJson(f.geojson, oldProj, newProj);
+            if (transformedGeoJson) {
+                f.geojson = transformedGeoJson;
+            }
+        });
+        // Refresh all the listeners
+        this.drawingState.features = [];
+        this.drawingState.features = features;
     }
     onToggleBatchMode() {
         this.batchCreateMode = !this.batchCreateMode;

package/components/main.d.ts

@@ -48,6 +48,7 @@ export { default as SelectionPanelMobile, getLinkFriendlyString } from './select
 export { default as SelectionToolComponent } from './selectiontool/component.js';
 export { default as SelectionWindowComponent } from './selectionwindow/component.js';
 export { default as ShareComponent } from './share/component.js';
+export { default as ShareMobileComponent } from './share-mobile/component.js';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component.js';
 export { default as ThemeComponent } from './themes/component.js';
 export { default as MobileGroupElementComponent } from './themes-mobile/group/component.js';

package/components/main.js

@@ -47,6 +47,7 @@ export { default as SelectionPanelMobile, getLinkFriendlyString } from './select
 export { default as SelectionToolComponent } from './selectiontool/component.js';
 export { default as SelectionWindowComponent } from './selectionwindow/component.js';
 export { default as ShareComponent } from './share/component.js';
+export { default as ShareMobileComponent } from './share-mobile/component.js';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component.js';
 export { default as ThemeComponent } from './themes/component.js';
 export { default as MobileGroupElementComponent } from './themes-mobile/group/component.js';

package/components/menu-buttons-mobile/MenuMobile3dButton.js

@@ -6,7 +6,7 @@ export default class MenuMobile3dButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileDrawingButton.js

@@ -6,7 +6,7 @@ export default class MenuMobileDrawingButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileOfflineButton.js

@@ -6,7 +6,7 @@ export default class MenuMobileOfflineButton extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
-.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>

package/components/menu-buttons-mobile/MenuMobileShareButton.d.ts

@@ -0,0 +1,11 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+export default class MenuMobileShareButton extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    icon: string;
+    label: string;
+    constructor();
+    onPointerUp(): void;
+    protected connectedCallback(): void;
+}

package/components/menu-buttons-mobile/MenuMobileShareButton.js

@@ -0,0 +1,32 @@
+import { html as uHtml } from 'uhtml';
+// SPDX-License-Identifier: Apache-2.0
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+export default class MenuMobileShareButton extends GirafeHTMLElement {
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        return uHtml `<style>
+.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
+</style>
+<style>${this.customStyle}</style>
+<div onpointerup="${() => this.onPointerUp()}" class="menu-item"><div class="menu-item-image-container"><img alt="switch-icon" src="${this.icon}"></div><div class="menu-item-title-container"><div class="menu-item-title" i18n="${this.label}"></div></div></div>
+${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
+    };
+    icon = 'icons/share.svg';
+    label = 'Share map';
+    constructor() {
+        super('mobile-share-button');
+    }
+    onPointerUp() {
+        // If not delaying, the releasing of the click is also fired
+        // on the offline panel shown
+        setTimeout(() => {
+            this.state.interface.sharePanelVisible = true;
+            this.state.interface.swipeupPanelContent = 'share';
+        }, 50);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+}

package/components/menu-buttons-mobile/style.css

@@ -34,3 +34,6 @@
   font-weight: 600;
   color: #3f68a7;
 }
+.menu-item-title {
+  text-align: center;
+}

package/components/menu-mobile/component.js

@@ -10,7 +10,7 @@ export default class MenuMobile extends GirafeHTMLElement {
 </style><style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-.menu-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.menu-item-container{box-sizing:border-box;user-select:none;margin-bottom:max(env(safe-area-inset-bottom), 20px);grid-template-columns:repeat(2,1fr);gap:20px;padding:0 25px;display:grid}.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
+.menu-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.menu-item-container{box-sizing:border-box;user-select:none;margin-bottom:max(env(safe-area-inset-bottom), 20px);grid-template-columns:repeat(2,1fr);gap:20px;padding:0 25px;display:grid}.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}.menu-item-title{text-align:center}
 </style>
 <style>${this.customStyle}</style>
 <div style="${this.state.interface.swipeupPanelContent === 'menu' ? '' : 'display: none;'}"><div class="menu-title" i18n="Tools"></div><div class="menu-item-container"><slot name="mobile-menu-content"></slot></div></div>

package/components/menu-mobile/style.css

@@ -53,3 +53,7 @@
   font-weight: 600;
   color: #3f68a7;
 }
+
+.menu-item-title {
+  text-align: center;
+}

package/components/selectiontool/component.js

@@ -65,8 +65,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
         else if (featureLike.getGeometry()?.getType() == 'Circle') {
             const circle = featureLike.getGeometry();
-            const radiusDataForCircle = getRadiusDataForCircle(circle, this.defaultStyle, new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: this.drawing.defaultStrokeWidth }));
-            styles.push(radiusDataForCircle.style, getLabelStyle(getHalfPoint(radiusDataForCircle.radiusLine), getLengthAsMetricText(radiusDataForCircle.radius), this.labelStyle), getLabelStyle(new Point(circle.getCenter()), getAreaAsMetricText(getAreaOfCircle(circle, this.state.projection)), this.labelStyle));
+            const radiusDataForCircle = getRadiusDataForCircle(circle, this.state.projection, this.defaultStyle, new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: this.drawing.defaultStrokeWidth }));
+            styles.push(radiusDataForCircle.style, getLabelStyle(getHalfPoint(radiusDataForCircle.radiusLine), getLengthAsMetricText(radiusDataForCircle.radiusMeter), this.labelStyle), getLabelStyle(new Point(circle.getCenter()), getAreaAsMetricText(getAreaOfCircle(circle, this.state.projection)), this.labelStyle));
         }
         return styles.filter((style) => !!style);
     };

package/components/share/component.js

@@ -1,9 +1,9 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
-import TwitterLogo from './images/twitter.svg';
-import FacebookLogo from './images/facebook.svg';
-import LinkedInLogo from './images/linkedin.svg';
-import MailLogo from './images/mail.svg';
+import TwitterLogo from '../../assets/icons/twitter.svg';
+import FacebookLogo from '../../assets/icons/facebook.svg';
+import LinkedInLogo from '../../assets/icons/linkedin.svg';
+import MailLogo from '../../assets/icons/share-mail.svg';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import SimpleMaskManager from '../../tools/layers/simplemaskmanager.js';
 class ShareComponent extends GirafeHTMLElement {

package/components/share-mobile/component.d.ts

@@ -0,0 +1,28 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { IUrlShortener } from '../../tools/share/iurlshortener.js';
+declare class ShareMobileComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    shareLink?: string;
+    qrCode?: string;
+    success: boolean;
+    twitterLogo: string;
+    facebookLogo: string;
+    linkedInLogo: string;
+    mailLogo: string;
+    shareNativeLogo: string;
+    awaitingShareLink: boolean;
+    get urlShortener(): IUrlShortener | undefined;
+    constructor();
+    render(): void;
+    protected connectedCallback(): void;
+    registerEvents(): void;
+    private generateShareLink;
+    shareFacebook(): void;
+    shareTwitter(): void;
+    shareLinkedIn(): void;
+    shareMail(): void;
+    shareNative(): Promise<void>;
+}
+export default ShareMobileComponent;

package/components/share-mobile/component.js

@@ -0,0 +1,121 @@
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import FacebookLogo from '../../assets/icons/facebook.svg';
+import TwitterLogo from '../../assets/icons/twitter.svg';
+import LinkedInLogo from '../../assets/icons/linkedin.svg';
+import MailLogo from '../../assets/icons/share-mail.svg';
+import ShareNativeLogo from '../../assets/icons/share-native.svg';
+async function shareUsingNavigator(url, title) {
+    const shareData = {
+        title: title ?? document.title,
+        text: 'Schau dir diese Seite an:',
+        url: url
+    };
+    if (!navigator.share) {
+        await fallbackShare(shareData.url ?? window.location.href);
+        return;
+    }
+    try {
+        await navigator.share(shareData);
+        console.log('Inhalt wurde geteilt.');
+    }
+    catch (error) {
+        if (error instanceof DOMException && error.name === 'AbortError') {
+            // Benutzer hat den Share-Dialog geschlossen.
+            return;
+        }
+        console.error('Teilen fehlgeschlagen:', error);
+    }
+}
+async function fallbackShare(url) {
+    try {
+        await navigator.clipboard.writeText(url);
+        alert('Der Link wurde in die Zwischenablage kopiert.');
+    }
+    catch {
+        // Einfachster Fallback für ältere Browser.
+        window.prompt('Link kopieren:', url);
+    }
+}
+class ShareMobileComponent extends GirafeHTMLElement {
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        return uHtml `<style>
+.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
+</style><style>
+#container{width:calc(100% - 50px);margin:25px}#title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.qrcode-container{flex-direction:column;align-items:center;display:flex}.qrcode{width:calc(100% - 50px - 2rem);display:block}.qrcode-placeholder{opacity:.7;content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);width:calc(100% - 50px - 2rem);height:calc(100% - 50px - 2rem);display:block}.actions-container{flex-direction:row;flex-grow:1;justify-content:center;column-gap:.5rem;width:stretch;height:3.25rem;margin-top:1rem;display:flex;& button{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:4px;flex-direction:column;padding:.25rem;display:flex;& img{width:2.5rem;height:2.5rem}}}
+</style>
+<style>${this.customStyle}</style>
+<div id="container" style="${this.state.interface.swipeupPanelContent === 'share' ? '' : 'display: none;'}"><div id="title" i18n="Share this map">Share this map</div><div id="share-map" class="${this.urlShortener ? 'group' : 'hidden'}"><div class="${this.awaitingShareLink ? 'disabled qrcode-container' : 'enabled qrcode-container'}"><img alt="share-qrcode" class="${(this.qrCode ? 'qrcode' : 'qrcode-placeholder')}" src="${this.qrCode}"><div class="${(this.success ? 'hidden' : 'qrcode error')}"><img alt="error-icon" src="icons/error.svg"> <span i18n="Error, can not fetch the shortener service. Please try again later.">Error, can not fetch the shortener service. Please try again later.</span></div><div class="${this.awaitingShareLink ? 'disabled actions-container' : 'enabled actions-container'}"><button onclick="${() => this.shareFacebook()}"><img alt="share-facebook" src="${this.facebookLogo}"></button> <button onclick="${() => this.shareTwitter()}"><img alt="share-twitter" src="${this.twitterLogo}"></button> <button onclick="${() => this.shareLinkedIn()}"><img alt="share-linkedin" src="${this.linkedInLogo}"></button> <button onclick="${() => this.shareMail()}"><img alt="share-mail" src="${this.mailLogo}"></button> <button onclick="${() => this.shareNative()}"><img alt="share-native" src="${this.shareNativeLogo}"></button></div></div></div></div>
+${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
+    };
+    shareLink;
+    qrCode;
+    success = true;
+    twitterLogo = TwitterLogo;
+    facebookLogo = FacebookLogo;
+    linkedInLogo = LinkedInLogo;
+    mailLogo = MailLogo;
+    shareNativeLogo = ShareNativeLogo;
+    awaitingShareLink = false;
+    get urlShortener() {
+        return this.context.shareManager.UrlShortener;
+    }
+    constructor() {
+        super('share-mobile');
+    }
+    render() {
+        super.render();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+        super.girafeTranslate();
+        this.registerEvents();
+        // Generate the share link when the component is rendered (but don't copy to clipboard)
+        this.generateShareLink().then(() => this.refreshRender());
+    }
+    registerEvents() {
+        this.subscribe('interface.swipeupPanelContent', () => {
+            this.render();
+        });
+        this.subscribe('position', () => {
+            super.render();
+        });
+    }
+    async generateShareLink() {
+        if (!this.urlShortener) {
+            return;
+        }
+        this.awaitingShareLink = true;
+        this.refreshRender();
+        const baseUrl = this.context.urlManager.getBaseUrlPath();
+        const hash = this.context.shareManager.getStateToShare();
+        // Get short URL
+        const longurl = `${baseUrl}#${hash}`;
+        const response = await this.urlShortener.shortenUrl(longurl);
+        this.shareLink = response.shorturl;
+        this.success = response.success;
+        this.qrCode = response.qrcode;
+        this.awaitingShareLink = false;
+    }
+    shareFacebook() {
+        window.open('https://www.facebook.com/sharer/sharer.php?u=' + this.shareLink, '_blank');
+    }
+    shareTwitter() {
+        window.open('https://twitter.com/intent/tweet?url=' + this.shareLink, '_blank');
+    }
+    shareLinkedIn() {
+        window.open('https://www.linkedin.com/shareArticle?url=' + encodeURIComponent(this.shareLink), '_blank');
+    }
+    shareMail() {
+        const subject = encodeURIComponent('Check out this link');
+        const body = encodeURIComponent('I thought you might be interested in this link: ' + this.shareLink);
+        window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
+    }
+    async shareNative() {
+        await shareUsingNavigator(this.shareLink, 'Geogirafe');
+    }
+}
+export default ShareMobileComponent;

package/components/share-mobile/style.css

@@ -0,0 +1,56 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+#container {
+    width: calc(100% - 50px);
+    margin: 25px;
+}
+
+#title {
+    color: #3f68a7;
+    text-transform: uppercase;
+    text-align: center;
+    margin: 0.5em 0;
+    font-size: 1.8em;
+    font-weight: 600;
+}
+
+.qrcode-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.qrcode {
+    display: block;
+    width: calc(100% - 50px - 2rem);
+}
+.qrcode-placeholder {
+    display: block;
+    width: calc(100% - 50px - 2rem);
+    height: calc(100% - 50px - 2rem);
+    opacity: 0.7;
+    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
+}
+
+.actions-container {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: center;
+    width: stretch;
+    column-gap: 0.5rem;
+    margin-top: 1rem;
+    height: 3.25rem;
+
+    button {
+        background-color: white;
+        border-radius: 4px;
+        filter: drop-shadow(0px 4px 7px #0004382c);
+        display: flex;
+        flex-direction: column;
+        padding: 0.25rem;
+        img {
+            width: 2.5rem;
+            height: 2.5rem;
+        }
+    }
+}

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2729313771",
+  "version": "1.2.0-dev.2750042516",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/mobile.html

@@ -106,9 +106,11 @@
           <girafe-menu-mobile-offline-button slot="mobile-menu-content"></girafe-menu-mobile-offline-button>
           <girafe-menu-mobile-drawing-button slot="mobile-menu-content"></girafe-menu-mobile-drawing-button>
           <girafe-oauth-mobile slot="mobile-menu-content"></girafe-oauth-mobile>
+          <girafe-menu-mobile-share-button slot="mobile-menu-content"></girafe-menu-mobile-share-button>
         </girafe-menu-mobile>
 
         <girafe-offline slot="main"></girafe-offline>
+        <girafe-share-mobile slot="main"></girafe-share-mobile>
       </girafe-swipe-up-panel>
     </girafe-app>
   </body>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2729313771", "build":"2729313771", "date":"04/08/2026"}
+{"version":"1.2.0-dev.2750042516", "build":"2750042516", "date":"11/08/2026"}

package/tools/app/geogirafeapp-mobile.js

@@ -24,6 +24,8 @@ import MobileGroupElementComponent from '../../components/themes-mobile/group/co
 import MobileLayerElementComponent from '../../components/themes-mobile/layer/component.js';
 import MobileSelectedLayerElementComponent from '../../components/themes-mobile/layer-selected/component.js';
 import GetDirectionsArtifact from '../../components/getdirections/component.js';
+import MenuMobileShareButton from '../../components/menu-buttons-mobile/MenuMobileShareButton.js';
+import ShareMobileComponent from '../../components/share-mobile/component.js';
 export default class GeoGirafeAppMobile extends GeoGirafeApp {
     initializeInterface() {
         if (window.cordova) {
@@ -57,6 +59,7 @@ export default class GeoGirafeAppMobile extends GeoGirafeApp {
         customElements.define('girafe-drawing-mobile', DrawingComponentMobile);
         customElements.define('girafe-drawing-container-mobile', DrawingContainerMobile);
         customElements.define('girafe-menu-mobile-3d-button', MenuMobile3dButton);
+        customElements.define('girafe-menu-mobile-share-button', MenuMobileShareButton);
         customElements.define('girafe-menu-mobile-offline-button', MenuMobileOfflineButton);
         customElements.define('girafe-menu-mobile-drawing-button', MenuMobileDrawingButton);
         customElements.define('girafe-oauth-mobile', MobileOauthComponent);
@@ -65,5 +68,6 @@ export default class GeoGirafeAppMobile extends GeoGirafeApp {
         customElements.define('girafe-layer', MobileLayerElementComponent);
         customElements.define('girafe-layer-selected', MobileSelectedLayerElementComponent);
         customElements.define('girafe-get-directions', GetDirectionsArtifact);
+        customElements.define('girafe-share-mobile', ShareMobileComponent);
     }
 }

package/tools/drawing/drawingFeature.d.ts

@@ -1,6 +1,7 @@
 import { Style } from 'ol/style.js';
 import { Circle as CircleGeom, Geometry } from 'ol/geom.js';
 import Feature from 'ol/Feature.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
 import IGirafeContext from '../context/icontext.js';
 import DrawingState from './drawingState.js';
 export declare enum DrawingShape {
@@ -37,6 +38,9 @@ export type SerializedFeature = {
     t: DrawingShape;
 };
 export default class DrawingFeature {
+    static readonly geoJSONFormat: GeoJSON<Feature<Geometry, {
+        [x: string]: any;
+    }>>;
     private readonly _tool;
     private _name;
     private _nameColor;
@@ -106,6 +110,11 @@ export default class DrawingFeature {
      * with a limited number of edges to improve support across formats and services.
      */
     static olFeatureFromGeoJson(geoJson: any, circleToPolygonNbEdges?: number): Feature<Geometry>;
+    /**
+     * Transform a geojson (valid object, or disk with its properties) to a new projection.
+     * @returns The transformed geojson object or null.
+     */
+    static transformGeoJson(geoJson: object, oldProj: string, newProj: string): object | null;
     /**
      * Finds a name composed of the shape type and a number.
      * The number starts from how many shapes of the same type are already in the state +1.

package/tools/drawing/drawingFeature.js

@@ -7,6 +7,7 @@ import Feature from 'ol/Feature.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../utils/olutils.js';
 import { fromCircle } from 'ol/geom/Polygon.js';
+import LineString from 'ol/geom/LineString.js';
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -19,6 +20,7 @@ export var DrawingShape;
     DrawingShape[DrawingShape["FreehandPolygon"] = 7] = "FreehandPolygon";
 })(DrawingShape || (DrawingShape = {}));
 export default class DrawingFeature {
+    static geoJSONFormat = new GeoJSON();
     _tool;
     _name;
     _nameColor;
@@ -263,17 +265,18 @@ export default class DrawingFeature {
             const radius = disk.getRadius();
             const pointer = disk.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
             return {
+                id: olFeature.getId(),
                 type: 'Feature',
                 geometry: {
                     type: 'Disk',
                     center: center,
                     radius: radius,
-                    azimuth: disk.getProperties()['azimuth'] ?? 0,
+                    azimuth: disk.get('azimuth') ?? 0,
                     pointer: pointer
                 }
             };
         }
-        return JSON.parse(new GeoJSON().writeFeature(olFeature));
+        return JSON.parse(DrawingFeature.geoJSONFormat.writeFeature(olFeature));
     }
     /**
      * Create an ol feature instance from a geojson object, optionally simplifying circle geometries to polygons
@@ -294,17 +297,54 @@ export default class DrawingFeature {
                 azimuth: geometry.azimuth,
                 pointer: geometry.pointer
             });
-            return new Feature(olGeometry);
+            const feature = new Feature(olGeometry);
+            if (geoJson.id) {
+                feature.setId(geoJson.id);
+            }
+            return feature;
         }
         else {
             // Standard case: parse with GeoJSON format reader
-            const feature = new Feature(new GeoJSON().readFeatures(geoJson)[0].getGeometry());
+            const feature = new Feature(DrawingFeature.geoJSONFormat.readFeatures(geoJson)[0].getGeometry());
             if (Array.isArray(feature)) {
                 throw new TypeError('GeoJSON feature is an array, expected single feature');
             }
             return feature;
         }
     }
+    /**
+     * Transform a geojson (valid object, or disk with its properties) to a new projection.
+     * @returns The transformed geojson object or null.
+     */
+    static transformGeoJson(geoJson, oldProj, newProj) {
+        if (oldProj === null || oldProj === newProj) {
+            return geoJson;
+        }
+        try {
+            if (geoJson.geometry?.type === 'Disk') {
+                // Case of disks that are not a valid geojson object, handle them manually.
+                const olFeature = DrawingFeature.olFeatureFromGeoJson(geoJson);
+                const geom = olFeature.getGeometry();
+                geom?.transform(oldProj, newProj);
+                if (geom) {
+                    const center = geom.getCenter();
+                    const line = new LineString([center, [center[0], center[1] + geom.getRadius()]]);
+                    line.rotate(toRadians((geom.get('azimuth') ?? 0) * -1), center);
+                    geom.set('pointer', line.getLastCoordinate());
+                }
+                return DrawingFeature.geojsonFromOlFeature(olFeature, DrawingShape.Disk);
+            }
+            // Case of valid geojson objects.
+            return DrawingFeature.geoJSONFormat.writeFeatureObject(DrawingFeature.geoJSONFormat.readFeature(geoJson, {
+                dataProjection: oldProj,
+                featureProjection: newProj
+            }));
+        }
+        catch (e) {
+            console.error('Error transforming this draw object to the new projection.', e);
+        }
+        return null;
+    }
     /**
      * Finds a name composed of the shape type and a number.
      * The number starts from how many shapes of the same type are already in the state +1.

package/tools/drawing/olDrawing.js

@@ -528,8 +528,9 @@ export default class OlDrawing {
     createDiskFixedLength(coordinates, geom) {
         const coord = coordinates;
         this.fixLastLength(this.fixedLineLength, coord);
-        geom = geom ?? new CircleGeom(coord[0], getDistance(coord, this.state.projection));
-        geom.setCenterAndRadius(coord[0], getDistance(coord, this.state.projection));
+        const radius = new LineString(coord).getLength();
+        geom ??= new CircleGeom(coord[0], radius);
+        geom.setCenterAndRadius(coord[0], radius);
         geom.setProperties({
             azimuth: (90 - Math.atan2(coord[1][1] - coord[0][1], coord[1][0] - coord[0][0]) * (180 / Math.PI) + 360) % 360,
             pointer: coord[1]
@@ -793,9 +794,9 @@ export default class OlDrawing {
         }
         else if (dFeature.type == DrawingShape.Disk) {
             if (dFeature.measureInformation !== 'none') {
-                const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
+                const radiusDataForCircle = getRadiusDataForCircle(geometry, this.state.projection, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
                 styles.push(radiusDataForCircle.style);
-                const lengthText = dFeature.getLengthText(radiusDataForCircle.radius);
+                const lengthText = dFeature.getLengthText(radiusDataForCircle.radiusMeter);
                 const azimuthText = dFeature.getAzimuthText(geometry);
                 const textTemplate = dFeature.measureInformation === 'simple' ? lengthText : lengthText + ', ' + azimuthText;
                 addLabel(getHalfPoint(radiusDataForCircle.radiusLine), textTemplate);

package/tools/state/graphicalInterface.d.ts

@@ -26,5 +26,5 @@ export default class GraphicalInterface {
     darkFrontendMode: boolean;
     swipeupPanelMode: SwipeupPanelMode;
     contactPanelVisible: boolean;
-    swipeupPanelContent: 'selector' | 'features' | 'menu' | 'drawing' | 'offline' | null;
+    swipeupPanelContent: 'selector' | 'features' | 'menu' | 'drawing' | 'offline' | 'share' | null;
 }

package/tools/utils/olutils.d.ts

@@ -43,9 +43,9 @@ export declare const reprojectGeometry: (geometry: Geometry, sourceProjection: P
 export declare const ensurePolygonIsProperlyClosed: (polygon: Polygon) => Coordinate[];
 export declare const getHalfPoint: (coordinates: Coordinate[]) => Point;
 export declare const getLabelStyle: (position: Point, text: string, labelStyle: Style) => Style | undefined;
-export declare const getRadiusDataForCircle: (circle: Circle, defaultStyle: Style, stroke: Stroke) => {
+export declare const getRadiusDataForCircle: (circle: Circle, projection: ProjectionLike, defaultStyle: Style, stroke: Stroke) => {
+    radiusMeter: number;
     style: Style;
-    radius: number;
     radiusLine: Coordinate[];
 };
 export declare const getLengthAsMetricText: (length?: number) => string;

package/tools/utils/olutils.js

@@ -147,9 +147,10 @@ export const getLabelStyle = (position, text, labelStyle) => {
     }
     return undefined;
 };
-export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
+export const getRadiusDataForCircle = (circle, projection, defaultStyle, stroke) => {
     const radius = circle.getRadius();
     const center = circle.getCenter();
+    const radiusMeter = getDistance([center, [center[0], center[1] + radius]], projection);
     const pointer = circle.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
     const radiusLine = [center, pointer];
     const radiusLineStyle = defaultStyle.clone();
@@ -157,8 +158,8 @@ export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
     radiusLineStyle.getText().setText('');
     radiusLineStyle.setGeometry(new LineString(radiusLine));
     return {
+        radiusMeter,
         style: radiusLineStyle,
-        radius: radius,
         radiusLine: radiusLine
     };
 };