@geogirafe/lib-geoportal 1.3.0-dev.2922702126 → 1.3.0-dev.2926144279

package/api/apigeogirafeapp.js

@@ -4,6 +4,7 @@ import proj4 from 'proj4';
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
 import Map2dComponent from '../components/map-2d/component.js';
 import Map3dComponent from '../components/map-3d/component.js';
+import GoogleStreetViewComponent from '../components/streetview/google.js';
 import MapGridComponent from '../components/map-grid/component.js';
 import { register } from 'ol/proj/proj4.js';
 import GirafeApiContext from './apicontext.js';
@@ -39,7 +40,7 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
 :host{position:relative}girafe-map-grid,girafe-map-2d,girafe-map-3d{width:100%;height:100%;display:block;position:relative;overflow:hidden}girafe-basemap{display:block;position:absolute;bottom:.5rem;left:.5rem}girafe-search{width:50%;height:2.25rem;display:block;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 4px #0000004d}girafe-selection-window{z-index:100;width:400px;height:240px;position:absolute;bottom:1rem;right:1rem}
 </style>
 <style>${this.customStyle}</style>
-<girafe-map-grid><girafe-map-2d></girafe-map-2d><girafe-map-3d></girafe-map-3d></girafe-map-grid>
+<girafe-map-grid><girafe-map-2d></girafe-map-2d><girafe-map-3d></girafe-map-3d><girafe-streetview-google></girafe-streetview-google></girafe-map-grid>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isInitialized = false;
@@ -108,6 +109,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (!customElements.get('girafe-map-2d')) {
             customElements.define('girafe-map-2d', Map2dComponent);
             customElements.define('girafe-map-3d', Map3dComponent);
+            customElements.define('girafe-streetview-google', GoogleStreetViewComponent);
             customElements.define('girafe-map-grid', MapGridComponent);
         }
     }

package/assets/i18n/de.json

@@ -52,6 +52,7 @@
     "Classes": "Klassen",
     "Classification": "Klassifikation",
     "Clear results and close Panel": "Ergebnisse löschen und Panel schliessen",
+    "Click on the map to display the StreetView at this location": "Klicken Sie auf die Karte, um die StreetView an dieser Stelle anzuzeigen",
     "Close message": "Nachricht schliessen",
     "color_option_classification": "Klassifizierung",
     "color_option_intensity": "Intensität",
@@ -312,6 +313,7 @@
     "Loading cesium...": "Cesium wird geladen...",
     "Loading LOD": "LOD wird geladen",
     "Loading server configuration...": "Serverkonfiguration wird geladen...",
+    "Loading StreetView...": "StreetView wird geladen...",
     "local": "Lokal",
     "local file": "Lokale Datei",
     "Local Files": "Lokale Dateien",
@@ -351,6 +353,7 @@
     "No graph to export in PNG!": "Kein Diagramm zum Exportieren als PNG!",
     "No layer available": "Kein Layer verfügbar",
     "No match found": "Keine Ergebnisse gefunden",
+    "No StreetView footage was found near this location": "In der Nähe dieser Stelle wurden keine StreetView-Aufnahmen gefunden",
     "Nothing here yet!": "Hier ist noch nichts!",
     "Offline data": "Offline-Daten",
     "Offline mode": "Offline-Modus",
@@ -532,6 +535,7 @@
     "Source Type": "Typ der Quelle",
     "Square": "Quadrat",
     "stop_video": "Video stoppen",
+    "StreetView": "StreetView",
     "Stroke color": "Strichfarbe",
     "Suggestions": "Vorschläge",
     "SVG": "SVG",

package/assets/i18n/en.json

@@ -52,6 +52,7 @@
     "Classes": "Classes",
     "Classification": "Classification",
     "Clear results and close Panel": "Clear results and close Panel",
+    "Click on the map to display the StreetView at this location": "Click on the map to display the StreetView at this location",
     "Close message": "Close message",
     "color_option_classification": "Classification",
     "color_option_intensity": "Intensity",
@@ -314,6 +315,7 @@
     "Loading cesium...": "Loading cesium...",
     "Loading LOD": "Loading level of detail",
     "Loading server configuration...": "Loading server configuration...",
+    "Loading StreetView...": "Loading StreetView...",
     "local": "Local",
     "local file": "Local File",
     "Local Files": "Local Files",
@@ -353,6 +355,7 @@
     "No graph to export in PNG!": "No graph to export in PNG!",
     "No layer available": "No layer available",
     "No match found": "No match found",
+    "No StreetView footage was found near this location": "No StreetView footage was found near this location",
     "Nothing here yet!": "Nothing here yet!",
     "Offline data": "Offline data",
     "Offline mode": "Offline mode",
@@ -535,6 +538,7 @@
     "Source Type": "Source Type",
     "Square": "Square",
     "stop_video": "Stop video",
+    "StreetView": "StreetView",
     "Stroke color": "Stroke color",
     "Suggestions": "Suggestions",
     "SVG": "SVG",

package/assets/i18n/fr.json

@@ -52,6 +52,7 @@
     "Classes": "Classes",
     "Classification": "Classification",
     "Clear results and close Panel": "Désélectionner et fermer le panneau",
+    "Click on the map to display the StreetView at this location": "Cliquez sur la carte pour afficher la StreetView à cet endroit",
     "Close message": "Fermer le message",
     "color_option_classification": "Classification",
     "color_option_intensity": "Intensité",
@@ -312,6 +313,7 @@
     "Loading cesium...": "Chargement de cesium...",
     "Loading LOD": "Chargement des niveaux de détail",
     "Loading server configuration...": "Chargement de la configuration du serveur...",
+    "Loading StreetView...": "Chargement de StreetView...",
     "local": "Locale",
     "local file": "Fichier local",
     "Local Files": "Fichiers locaux",
@@ -351,6 +353,7 @@
     "No graph to export in PNG!": "Aucun graphique à exporter en PNG !",
     "No layer available": "Aucune couche disponible",
     "No match found": "Aucun résultat correspondant",
+    "No StreetView footage was found near this location": "Aucune image StreetView n'a été trouvée à proximité de cet endroit",
     "Nothing here yet!": "Rien ici pour le moment !",
     "Offline data": "Données hors-ligne",
     "Offline mode": "Mode hors-ligne",
@@ -532,6 +535,7 @@
     "Source Type": "Type de la source",
     "Square": "Carré",
     "stop_video": "Arrêter la vidéo",
+    "StreetView": "StreetView",
     "Stroke color": "Couleur du trait",
     "Suggestions": "Suggestions",
     "SVG": "SVG",

package/assets/i18n/it.json

@@ -52,6 +52,7 @@
     "Classes": "Classi",
     "Classification": "Classificazione",
     "Clear results and close Panel": "Cancella selezione e chiudi pannello",
+    "Click on the map to display the StreetView at this location": "Clicca sulla mappa per visualizzare la StreetView in questo punto",
     "Close message": "Chiudi messaggio",
     "color_option_classification": "Classificazione",
     "color_option_intensity": "Intensità",
@@ -312,6 +313,7 @@
     "Loading cesium...": "Caricamento cesium...",
     "Loading LOD": "Caricamento dei livelli di dettaglio",
     "Loading server configuration...": "Caricamento configurazione server...",
+    "Loading StreetView...": "Caricamento di StreetView...",
     "local": "Locale",
     "local file": "File locale",
     "Local Files": "File locali",
@@ -351,6 +353,7 @@
     "No graph to export in PNG!": "Nessun grafico da esportare in PNG!",
     "No layer available": "Nessun layer disponibile",
     "No match found": "Nessun risultato corrispondente",
+    "No StreetView footage was found near this location": "Nessuna immagine StreetView è stata trovata nelle vicinanze di questo punto",
     "Nothing here yet!": "Ancora nessun contenuto!",
     "Offline data": "Dati offline",
     "Offline mode": "Modalità offline",
@@ -532,6 +535,7 @@
     "Source Type": "Tipo di layer",
     "Square": "Quadrato",
     "stop_video": "Interrompere il video",
+    "StreetView": "StreetView",
     "Stroke color": "Colore della linea",
     "Suggestions": "Suggerimenti",
     "SVG": "SVG",

package/assets/icons/layout-1+2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" stroke="#000" stroke-width="3"><path d="M3.5 3.5h32v32h-32zM3.5 19.5h32M19.5 19.5v16"/></g></svg>

package/assets/icons/layout-2+1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><g fill="none" stroke="#000" stroke-width="3"><path d="M3.5 3.5h32v32h-32zM19.5 3.5v16M3.5 19.5h32"/></g></svg>

package/assets/icons/streetview-marker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="#1a73e8" fill-opacity=".35" d="M24 24 10 4a24 24 0 0 1 28 0Z"/><circle cx="24" cy="24" r="6" fill="#1a73e8" stroke="#fff" stroke-width="2"/></svg>

package/components/layout/component.d.ts

@@ -9,15 +9,20 @@ declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel
     panelTitle: string;
     panelTogglePath: string;
     /** The Components the user can choose between for each Cell of the Grid. */
-    availableComponents: readonly [{
+    get availableComponents(): ({
         readonly id: "map-2d";
         readonly tagName: "girafe-map-2d";
         readonly label: "2D Map";
-    }, {
+    } | {
         readonly id: "map-3d";
         readonly tagName: "girafe-map-3d";
         readonly label: "3D Map";
-    }];
+    } | {
+        readonly id: "streetview-google";
+        readonly tagName: "girafe-streetview-google";
+        readonly label: "Google Street View";
+        readonly provider: "google";
+    })[];
     constructor();
     private get layout();
     /** The Layouts the user can choose between, as configured in the application. */

package/components/layout/component.js

@@ -1,12 +1,14 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-import { AVAILABLE_CELL_COMPONENTS, distributeCells, getDefaultSizes, getGridSize, isCellComponent } from '../../tools/state/layout.js';
+import { AVAILABLE_CELL_COMPONENTS, distributeCells, getDefaultSizes, getLayoutCells, isCellComponent, isCellComponentAvailable } from '../../tools/state/layout.js';
 const LAYOUT_ICONS = {
     '1x1': 'icons/layout-1x1.svg',
     '2x1': 'icons/layout-2x1.svg',
     '1x2': 'icons/layout-1x2.svg',
-    '2x2': 'icons/layout-2x2.svg'
+    '2x2': 'icons/layout-2x2.svg',
+    '2+1': 'icons/layout-2+1.svg',
+    '1+2': 'icons/layout-1+2.svg'
 };
 class LayoutComponent extends GirafeHTMLElement {
     templateUrl = null;
@@ -25,7 +27,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     panelTitle = 'layout-panel';
     panelTogglePath = 'interface.layoutPanelVisible';
     /** The Components the user can choose between for each Cell of the Grid. */
-    availableComponents = AVAILABLE_CELL_COMPONENTS;
+    get availableComponents() {
+        const streetviewConfig = this.context.configManager.Config.streetview;
+        return AVAILABLE_CELL_COMPONENTS.filter((component) => isCellComponentAvailable(component.id, streetviewConfig));
+    }
     constructor() {
         super('layout');
         this.onShadowsToggle = this.onShadowsToggle.bind(this);
@@ -43,12 +48,13 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     /** The Cells of the current Layout, one line of the schema per row of the Grid. */
     get cellRows() {
-        const { columns, rows } = getGridSize(this.layout.type);
-        const cells = this.layout.cells;
-        return Array.from({ length: rows }, (_, row) => Array.from({ length: columns }, (_, column) => {
-            const index = row * columns + column;
-            return { index: index, content: cells[index] ?? null };
-        }));
+        const contents = this.layout.cells;
+        const rows = [];
+        for (const [index, cell] of getLayoutCells(this.layout.type).entries()) {
+            rows[cell.row] ??= [];
+            rows[cell.row].push({ index: index, content: contents[index] ?? null });
+        }
+        return rows;
     }
     registerEvents() {
         this.subscribe('layout.type', () => this.onLayoutChanged());

package/components/main.d.ts

@@ -55,6 +55,7 @@ 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 StreetViewComponent } from './streetview/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

@@ -53,6 +53,7 @@ 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 StreetViewComponent } from './streetview/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/map-grid/component.d.ts

@@ -1,4 +1,5 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { LayoutCell } from '../../tools/state/layout.js';
 /** A splitter, placed on the boundary between two columns or two rows of the Grid. */
 type Splitter = {
     /** Whether the splitter is dragged left/right (vertical) or up/down (horizontal). */
@@ -7,6 +8,15 @@ type Splitter = {
     index: number;
     /** Position of the splitter, in percent of the Grid. */
     position: number;
+    /**
+     * Index of the first and of the last row (vertical) or column (horizontal) the splitter goes along:
+     * a splitter only goes along the Cells that share its boundary.
+     */
+    from: number;
+    to: number;
+    /** Start and end of the splitter along its boundary, in percent of the Grid. */
+    start: number;
+    end: number;
 };
 /**
  * The Grid in which the Map Components are displayed.
@@ -19,8 +29,8 @@ declare class MapGridComponent extends GirafeHTMLElement {
     protected templateUrl: string | null;
     protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
-    /** Index of each Cell of the current Layout, used to render the Cells and their slots. */
-    cellIndexes: number[];
+    /** The Cells of the current Layout, used to render them and their slots. */
+    cells: LayoutCell[];
     /** The splitters between the Cells of the current Layout. */
     splitters: Splitter[];
     /** The splitter that is currently dragged, if any. */
@@ -37,18 +47,22 @@ declare class MapGridComponent extends GirafeHTMLElement {
     private applyLayout;
     /**
      * Creates one splitter for each boundary between two columns and between two rows.
-     * The splitters go through the whole Grid, so that the columns and the rows keep
-     * the same sizes in every Cell of the Grid.
+     * The columns and the rows keep the same sizes in every Cell of the Grid: a vertical splitter
+     * goes along all the rows that have a Cell ending on its boundary, and a horizontal splitter
+     * goes along all the columns.
      */
     private createSplitters;
+    getCellArea(cell: LayoutCell): string;
     /**
      * Moves each Component into the Cell it is configured for, by setting the name of the slot
      * it must be displayed in. Components that are not placed in any Cell get no slot,
      * which means that they are not displayed at all.
      */
     private applyCells;
-    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
     private applySizes;
+    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
+    private applyGridSizes;
+    private sumOf;
     private applySplitterPosition;
     getSplitterId(splitter: Splitter): string;
     onSplitterPointerDown(event: PointerEvent, splitter: Splitter): void;

package/components/map-grid/component.js

@@ -1,7 +1,7 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-import { AVAILABLE_CELL_COMPONENTS, getGridSize, MAX_CELL_SIZE, MIN_CELL_SIZE } from '../../tools/state/layout.js';
+import { AVAILABLE_CELL_COMPONENTS, getGridSize, getLayoutCells, MAX_CELL_SIZE, MIN_CELL_SIZE } from '../../tools/state/layout.js';
 /**
  * The Grid in which the Map Components are displayed.
  *
@@ -16,14 +16,14 @@ class MapGridComponent extends GirafeHTMLElement {
         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);cursor:pointer;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>
-#grid{background-color:var(--bkg-color);width:100%;height:100%;display:grid;position:relative;overflow:hidden}.cell{min-width:0;min-height:0;position:relative;overflow:hidden}::slotted(*){width:100%;height:100%;display:block}.splitter{z-index:100;background:var(--bkg-color);border:var(--app-standard-border);touch-action:none;border-radius:1rem;position:absolute}.splitter-vertical{cursor:col-resize;width:6px;top:2rem;bottom:2rem;transform:translate(-50%)}.splitter-horizontal{cursor:row-resize;height:6px;left:2rem;right:2rem;transform:translateY(-50%)}.splitter:before,.splitter:after{content:"";background:var(--app-color-grey);position:absolute}.splitter-vertical:before,.splitter-vertical:after{width:1px;height:2rem;left:50%;transform:translate(-50%)}.splitter-vertical:before{height:calc(2rem + 1px);top:calc(-2rem - 1px)}.splitter-vertical:after{height:calc(2rem + 1px);bottom:calc(-2rem - 1px)}.splitter-horizontal:before,.splitter-horizontal:after{width:2rem;height:1px;top:50%;transform:translateY(-50%)}.splitter-horizontal:before{width:calc(2rem + 1px);left:calc(-2rem - 1px)}.splitter-horizontal:after{width:calc(2rem + 1px);right:calc(-2rem - 1px)}
+#grid{background-color:var(--bkg-color);width:100%;height:100%;display:grid;position:relative;overflow:hidden}.cell{min-width:0;min-height:0;position:relative;overflow:hidden}::slotted(*){width:100%;height:100%;display:block}.splitter{z-index:100;background:var(--bkg-color);border:var(--app-standard-border);touch-action:none;border-radius:1rem;position:absolute}.splitter-vertical{top:calc(var(--start) + 2rem);bottom:calc(var(--end) + 2rem);cursor:col-resize;width:6px;transform:translate(-50%)}.splitter-horizontal{left:calc(var(--start) + 2rem);right:calc(var(--end) + 2rem);cursor:row-resize;height:6px;transform:translateY(-50%)}.splitter:before,.splitter:after{content:"";background:var(--app-color-grey);position:absolute}.splitter-vertical:before,.splitter-vertical:after{width:1px;height:2rem;left:50%;transform:translate(-50%)}.splitter-vertical:before{height:calc(2rem + 1px);top:calc(-2rem - 1px)}.splitter-vertical:after{height:calc(2rem + 1px);bottom:calc(-2rem - 1px)}.splitter-horizontal:before,.splitter-horizontal:after{width:2rem;height:1px;top:50%;transform:translateY(-50%)}.splitter-horizontal:before{width:calc(2rem + 1px);left:calc(-2rem - 1px)}.splitter-horizontal:after{width:calc(2rem + 1px);right:calc(-2rem - 1px)}
 </style>
 <style>${this.customStyle}</style>
-<div id="grid">${this.cellIndexes.map((index) => uHtml `<div class="cell"><slot name="${'cell-' + index}"></slot></div>`)} ${this.splitters.map((splitter) => uHtml `<div id="${this.getSplitterId(splitter)}" class="${'splitter splitter-' + splitter.orientation}" role="separator" onpointerdown="${(e) => this.onSplitterPointerDown(e, splitter)}" onpointermove="${(e) => this.onSplitterPointerMove(e, splitter)}" onpointerup="${(e) => this.onSplitterPointerUp(e, splitter)}"></div>`)}</div>
+<div id="grid">${this.cells.map((cell, index) => uHtml `<div class="cell" style="${this.getCellArea(cell)}"><slot name="${'cell-' + index}"></slot></div>`)} ${this.splitters.map((splitter) => uHtml `<div id="${this.getSplitterId(splitter)}" class="${'splitter splitter-' + splitter.orientation}" role="separator" onpointerdown="${(e) => this.onSplitterPointerDown(e, splitter)}" onpointermove="${(e) => this.onSplitterPointerMove(e, splitter)}" onpointerup="${(e) => this.onSplitterPointerUp(e, splitter)}"></div>`)}</div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
-    /** Index of each Cell of the current Layout, used to render the Cells and their slots. */
-    cellIndexes = [];
+    /** The Cells of the current Layout, used to render them and their slots. */
+    cells = [];
     /** The splitters between the Cells of the current Layout. */
     splitters = [];
     /** The splitter that is currently dragged, if any. */
@@ -54,28 +54,53 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      * then places the Components and applies the sizes.
      */
     applyLayout() {
-        const { columns, rows } = getGridSize(this.layout.type);
-        this.cellIndexes = Array.from({ length: columns * rows }, (_, index) => index);
-        this.splitters = this.createSplitters(columns, rows);
+        const type = this.layout.type;
+        this.cells = getLayoutCells(type);
+        this.splitters = this.createSplitters(type);
         this.refreshRender();
         this.applyCells();
         this.applySizes();
     }
     /**
      * Creates one splitter for each boundary between two columns and between two rows.
-     * The splitters go through the whole Grid, so that the columns and the rows keep
-     * the same sizes in every Cell of the Grid.
+     * The columns and the rows keep the same sizes in every Cell of the Grid: a vertical splitter
+     * goes along all the rows that have a Cell ending on its boundary, and a horizontal splitter
+     * goes along all the columns.
      */
-    createSplitters(columns, rows) {
+    createSplitters(type) {
+        const { columns, rows } = getGridSize(type);
+        const cells = getLayoutCells(type);
         const splitters = [];
         for (let index = 0; index < columns - 1; index++) {
-            splitters.push({ orientation: 'vertical', index: index, position: 0 });
+            const rowsAtBoundary = cells
+                .filter((cell) => cell.column + cell.columnSpan === index + 1)
+                .map((cell) => cell.row);
+            splitters.push({
+                orientation: 'vertical',
+                index: index,
+                position: 0,
+                from: Math.min(...rowsAtBoundary),
+                to: Math.max(...rowsAtBoundary),
+                start: 0,
+                end: 0
+            });
         }
         for (let index = 0; index < rows - 1; index++) {
-            splitters.push({ orientation: 'horizontal', index: index, position: 0 });
+            splitters.push({
+                orientation: 'horizontal',
+                index: index,
+                position: 0,
+                from: 0,
+                to: columns - 1,
+                start: 0,
+                end: 0
+            });
         }
         return splitters;
     }
+    getCellArea(cell) {
+        return `grid-area: ${cell.row + 1} / ${cell.column + 1} / span 1 / span ${cell.columnSpan}`;
+    }
     /**
      * Moves each Component into the Cell it is configured for, by setting the name of the slot
      * it must be displayed in. Components that are not placed in any Cell get no slot,
@@ -97,21 +122,30 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             }
         }
     }
-    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
     applySizes() {
-        const grid = this.grid;
-        if (!grid) {
+        if (!this.grid) {
             return;
         }
         const { columns, rows } = this.layout.sizes;
-        grid.style.gridTemplateColumns = columns.map((size) => `${size}%`).join(' ');
-        grid.style.gridTemplateRows = rows.map((size) => `${size}%`).join(' ');
+        this.applyGridSizes(columns, rows);
+    }
+    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
+    applyGridSizes(columns, rows) {
+        this.grid.style.gridTemplateColumns = columns.map((size) => `${size}%`).join(' ');
+        this.grid.style.gridTemplateRows = rows.map((size) => `${size}%`).join(' ');
         for (const splitter of this.splitters) {
-            const sizes = splitter.orientation === 'vertical' ? columns : rows;
-            splitter.position = sizes.slice(0, splitter.index + 1).reduce((sum, size) => sum + size, 0);
+            const isVertical = splitter.orientation === 'vertical';
+            const sizesAcross = isVertical ? columns : rows;
+            const sizesAlong = isVertical ? rows : columns;
+            splitter.position = this.sumOf(sizesAcross.slice(0, splitter.index + 1));
+            splitter.start = this.sumOf(sizesAlong.slice(0, splitter.from));
+            splitter.end = this.sumOf(sizesAlong.slice(0, splitter.to + 1));
             this.applySplitterPosition(splitter);
         }
     }
+    sumOf(sizes) {
+        return sizes.reduce((sum, size) => sum + size, 0);
+    }
     applySplitterPosition(splitter) {
         const element = this.getById(this.getSplitterId(splitter));
         if (!element) {
@@ -123,6 +157,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         const isVertical = splitter.orientation === 'vertical';
         element.style.left = isVertical ? `${splitter.position}%` : '';
         element.style.top = isVertical ? '' : `${splitter.position}%`;
+        element.style.setProperty('--start', `${splitter.start}%`);
+        element.style.setProperty('--end', `${100 - splitter.end}%`);
     }
     getSplitterId(splitter) {
         return `splitter-${splitter.orientation}-${splitter.index}`;
@@ -150,15 +186,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (!sizes) {
             return;
         }
-        splitter.position = sizes.slice(0, splitter.index + 1).reduce((sum, size) => sum + size, 0);
-        this.applySplitterPosition(splitter);
-        const cssSizes = sizes.map((size) => `${size}%`).join(' ');
-        if (isVertical) {
-            this.grid.style.gridTemplateColumns = cssSizes;
-        }
-        else {
-            this.grid.style.gridTemplateRows = cssSizes;
-        }
+        const { columns, rows } = this.layout.sizes;
+        this.applyGridSizes(isVertical ? sizes : columns, isVertical ? rows : sizes);
     }
     onSplitterPointerUp(event, splitter) {
         if (this.draggedSplitter !== splitter) {

package/components/map-grid/style.css

@@ -23,8 +23,10 @@
 }
 
 /* The splitters look like the gutters used to resize the panels (see #gutter of the lr-panel),
-   but they go through the whole Grid, with a 2rem gap at both ends,
-   and are centered on the boundary they can move. */
+   but they go along the boundary they can move, with a 2rem gap at both ends,
+   and are centered on it. The Component sets --start and --end: the insets of the two ends
+   of the splitter from the edges of the Grid, as a splitter only goes along the Cells
+   that share its boundary. */
 .splitter {
   position: absolute;
   z-index: 100;
@@ -35,8 +37,8 @@
 }
 
 .splitter-vertical {
-  top: 2rem;
-  bottom: 2rem;
+  top: calc(var(--start) + 2rem);
+  bottom: calc(var(--end) + 2rem);
   width: 6px;
   /* Centers the splitter on the boundary, whatever its borders add to its width. */
   transform: translateX(-50%);
@@ -44,15 +46,15 @@
 }
 
 .splitter-horizontal {
-  left: 2rem;
-  right: 2rem;
+  left: calc(var(--start) + 2rem);
+  right: calc(var(--end) + 2rem);
   height: 6px;
   transform: translateY(-50%);
   cursor: row-resize;
 }
 
 /* The 2rem at both ends that the splitter itself does not cover are filled with a thin line,
-   so that the boundary between the cells stays visible over the whole Grid. */
+   so that the boundary between the cells stays visible over its whole length. */
 .splitter::before,
 .splitter::after {
   content: '';
@@ -69,7 +71,7 @@
 }
 
 /* The lines are placed against the padding box of the splitter, which is inset by its border:
-   they are made 1px longer, so that they reach the edge of the Grid. */
+   they are made 1px longer, so that they reach the end of the boundary. */
 .splitter-vertical::before {
   top: calc(-2rem - 1px);
   height: calc(2rem + 1px);

package/components/share/tools/geogirafesharemanager.js

@@ -1,3 +1,4 @@
+import { SHORTLINK_PARAMETER } from '../../../tools/share/iurlshortener.js';
 import { generateQrCode } from '../../../tools/utils/qrcode.js';
 class GeoGirafeShareManager {
     serviceUrl;
@@ -24,8 +25,10 @@ class GeoGirafeShareManager {
             const response_data = (await response.json());
             if (response_data) {
                 const baseUrl = forcedBaseUrl ?? this.urlManager.getBaseUrlPath();
-                const hash = response_data.short_url.split('/').pop();
-                const shortUrl = `${baseUrl}#gg-${hash}`;
+                const shortId = response_data.short_url.split('/').pop() ?? '';
+                const url = new URL(baseUrl);
+                url.searchParams.set(SHORTLINK_PARAMETER, shortId);
+                const shortUrl = url.toString();
                 const qrcode = await generateQrCode(shortUrl);
                 return {
                     success: true,

package/components/streetview/component.d.ts

@@ -0,0 +1,59 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { StreetViewProvider } from '../../tools/state/streetview.js';
+import type { StreetViewProviderAdapter } from './tools/provider.js';
+/**
+ * A StreetView, displaying the footage of a provider (Google Street View, ...) side by side with the 2D Map.
+ *
+ * The Component stays lightweight: the provider and its external library are only loaded when the
+ * StreetView is displayed for the first time. A click on the map displays the closest footage, and a
+ * marker on the map shows the position and the direction of sight of the displayed footage.
+ * The map is accessed through the MapManager: there is no dependency to the map-2d Component.
+ */
+export default abstract class StreetViewComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    loading: boolean;
+    hasFootage: boolean;
+    protected readonly provider: StreetViewProvider;
+    private adapter;
+    /** Promise of the currently running adapter creation, to prevent creating it twice. */
+    private adapterCreation;
+    /** The view of the footage displayed by the adapter, to tell the views coming from a shared state apart. */
+    private displayedView;
+    private readonly markerIcon;
+    private readonly markerGeometry;
+    private readonly marker;
+    private readonly markerSource;
+    private readonly markerLayer;
+    protected constructor(provider: StreetViewProvider);
+    private get olMap();
+    private get cellId();
+    private get isDisplayed();
+    private get searchRadius();
+    /** Creates the adapter of the provider, loading its module on demand. */
+    protected abstract createAdapter(): Promise<StreetViewProviderAdapter>;
+    /** The StreetView is displayed in a Cell of the Grid, like the Maps. */
+    protected get isFullscreenComponent(): boolean;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    render(): void;
+    private registerEvents;
+    /**
+     * Loads the provider and shows its viewer when the StreetView is displayed in a Cell of the Grid,
+     * and hides it when it is not displayed anymore. The clicks on the map are only followed while displayed.
+     */
+    private onDisplayToggled;
+    private createAdapterOnce;
+    private onMapClick;
+    private showClosestFootage;
+    private onFootageChanged;
+    private onViewChanged;
+    /**
+     * Displays the footage of the view in the state when it was not displayed by this Component itself,
+     * which is the case when a shared state is restored.
+     */
+    private showStateView;
+    private isDisplayedView;
+    private updateMarker;
+}