@geogirafe/lib-geoportal 1.2.0-dev.2813242211 → 1.2.0-dev.2829121016

package/api/apicontext.d.ts

@@ -27,6 +27,8 @@ import UrlManager from '../tools/url/urlmanager.js';
 import UserDataManager from '../tools/userdata/userdatamanager.js';
 import WfsManager from '../tools/wfs/wfsmanager.js';
 import WmsManager from '../tools/wms/wmsmanager.js';
+import WmtsManager from '../tools/wmts/wmtsmanager.js';
+import SelectionManager from '../tools/selection/selectionmanager.js';
 import IGirafeContext from '../tools/context/icontext.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
@@ -62,6 +64,8 @@ export default class GirafeApiContext implements IGirafeContext {
     readonly orderingManager: OrderingManager;
     readonly userLayerManager: UserLayerManager;
     readonly wmsManager: WmsManager;
+    readonly wmtsManager: WmtsManager;
+    readonly selectionManager: SelectionManager;
     readonly ogcApiFeaturesManager: OgcApiFeaturesManager;
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;

package/api/apicontext.js

@@ -28,6 +28,8 @@ import UrlManager from '../tools/url/urlmanager.js';
 import UserDataManager from '../tools/userdata/userdatamanager.js';
 import WfsManager from '../tools/wfs/wfsmanager.js';
 import WmsManager from '../tools/wms/wmsmanager.js';
+import WmtsManager from '../tools/wmts/wmtsmanager.js';
+import SelectionManager from '../tools/selection/selectionmanager.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
 import ThemeFavoritesManager from '../tools/themes/themefavoritesmanager.js';
@@ -63,6 +65,8 @@ export default class GirafeApiContext {
     orderingManager;
     userLayerManager;
     wmsManager;
+    wmtsManager;
+    selectionManager;
     ogcApiFeaturesManager;
     localFileManager;
     onBoardingManager;
@@ -98,6 +102,8 @@ export default class GirafeApiContext {
         this.customThemesManager = new CustomThemesManager(this);
         this.themesManager = new ThemesManager(this);
         this.wmsManager = new WmsManager(this);
+        this.wmtsManager = new WmtsManager(this);
+        this.selectionManager = new SelectionManager(this);
         this.localFileManager = new LocalFileManager(this);
         this.ogcApiFeaturesManager = new OgcApiFeaturesManager(this);
         this.onBoardingManager = new OnBoardingManager(this);
@@ -141,7 +147,9 @@ export default class GirafeApiContext {
         this.customThemesManager.initializeSingleton();
         this.themesManager.initializeSingleton();
         this.wmsManager.initializeSingleton();
+        this.wmtsManager.initializeSingleton();
         this.localFileManager.initializeSingleton();
+        this.selectionManager.initializeSingleton();
         this.ogcApiFeaturesManager.initializeSingleton();
         this.onBoardingManager.initializeSingleton();
         this.themeFavoritesManager.initializeSingleton();

package/api/apigeogirafeapp.js

@@ -2,7 +2,8 @@ import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import proj4 from 'proj4';
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
-import MapComponent from '../components/map/component.js';
+import Map2dComponent from '../components/map-2d/component.js';
+import Map3dComponent from '../components/map-3d/component.js';
 import { register } from 'ol/proj/proj4.js';
 import GirafeApiContext from './apicontext.js';
 import BasemapComponent from '../components/basemap/component.js';
@@ -34,10 +35,10 @@ export default class GeoGirafeApi 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);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>
-:host{position:relative}girafe-map{width:100%;height:100%;position:relative}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}
+:host{position:relative}#maps{width:100%;height:100%;position:relative;overflow:hidden}girafe-map-2d{width:100%;height:100%;display:block;position:relative}girafe-map-3d{border-left:3px solid #444;height:100%;display:none;position:absolute;top:0;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></girafe-map>
+<div id="maps"><girafe-map-2d></girafe-map-2d><girafe-map-3d></girafe-map-3d></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isInitialized = false;
@@ -103,8 +104,9 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return new GirafeApiContext();
     }
     defineApiComponents() {
-        if (!customElements.get('girafe-map')) {
-            customElements.define('girafe-map', MapComponent);
+        if (!customElements.get('girafe-map-2d')) {
+            customElements.define('girafe-map-2d', Map2dComponent);
+            customElements.define('girafe-map-3d', Map3dComponent);
         }
     }
     manageAttributes() {

package/api/style.css

@@ -2,10 +2,27 @@
   position: relative;
 }
 
-girafe-map {
+#maps {
   position: relative;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+
+girafe-map-2d {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+girafe-map-3d {
+  display: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  overflow: hidden;
+  border-left: solid 3px #444;
 }
 
 girafe-basemap {

package/assets/i18n/de.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensität",
     "color_option_natural": "Natürlich",
     "color_option_uniform": "Einheitliche Farbe",
+    "Complete the theme": "Das Thema vervollständigen",
     "Connecting to the print server, please wait.": "Verbindung zum Druckserver wird hergestellt, bitte warten.",
     "contact-panel": "Kontaktformular",
     "Control opacity": "Deckkraft steuern",

package/assets/i18n/en.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensity",
     "color_option_natural": "Natural",
     "color_option_uniform": "Unique color",
+    "Complete the theme": "Complete the theme",
     "Connecting to the print server, please wait.": "Connecting to the print server, please wait.",
     "contact-panel": "Contact us",
     "contains": "contains",

package/assets/i18n/fr.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensité",
     "color_option_natural": "Naturelle",
     "color_option_uniform": "Couleur unique",
+    "Complete the theme": "Compléter le thème",
     "Connecting to the print server, please wait.": "Connexion au serveur d'impression, veuillez patienter.",
     "contact-panel": "Nous contacter",
     "Control opacity": "Contrôler l'opacité",

package/assets/i18n/it.json

@@ -52,6 +52,7 @@
     "color_option_intensity": "Intensità",
     "color_option_natural": "Naturale",
     "color_option_uniform": "Colore unico",
+    "Complete the theme": "Completare il tema",
     "Connecting to the print server, please wait.": "Connessione al server di stampa, attendere prego.",
     "contact-panel": "Contattaci",
     "Control opacity": "Controlla opacità",

package/assets/icons/theme-checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M553.2 88.012a23.9 23.9 0 0 0-11.8 2.488l-124.9 61.6L244 93.4c-13.7-4.7-28.7-3.8-41.9 2.3L77.8 154.3C69.4 158.2 64 166.7 64 176v352c0 8.2 4.2 15.9 11.1 20.3s15.6 4.9 23.1 1.4l87.314-41.085a26391 26391 0 0 0-36.004-35.976L112 490.3v-55.36c-8.583-8.635-17.184-17.181-25.738-25.904l-.67-.683-.639-.715C46.7 364.883 63.898 298.923 112 276.36v-85.06l96-45.201v145.748c6.27 5.447 11.381 10.818 15.57 15.345l32.43 32.43V148.301l128 43.5v34.976c17.223-17.184 34.406-34.387 51.719-51.527l.75-.742.787-.705c15.335-13.721 33.667-20.314 51.914-20.908 9.15-.299 18.257.98 26.97 3.56L528 150.6v10.34c23.753 11.01 42.627 32.744 47.318 61.912.273 1.384.48 2.758.682 4.13V112c0-8.3-4.3-16-11.3-20.4-3.5-2.2-7.476-3.4-11.5-3.588M576 250.746c-2.544 17.889-10.825 34.037-23.193 46.914l-.31.324-.321.319c-8.063 8.041-16.117 16.13-24.176 24.183v126.315L432 494v-75.496c-15.956 15.97-32.01 31.895-48 47.853V492.1l-19.346-6.454c-12.67 12.624-25.285 25.275-37.992 37.875L396.2 546.7c13.7 4.6 28.502 3.7 41.602-2.5l124.398-58.5C570.6 481.7 576 473.3 576 464z" style="display:inline;fill:gray"/><path d="M522.628 268.675c-77.356 77.15-154.308 154.724-231.92 231.606-18.749 16.296-48.36 10.581-62.826-8.485-37.197-37.402-74.815-74.403-111.745-112.059-20.803-23.25-5.73-64.519 25.111-69.02 21.933-5.55 38.705 10.957 52.233 25.562l70.124 70.125c67.235-67.086 134.06-134.602 201.552-201.417 23.25-20.803 64.519-5.73 69.021 25.111 2.986 13.83-2.138 28.778-11.55 38.577" style="color:#000;display:inline;fill:#000;stroke-width:83.6876;-inkscape-stroke:none;paint-order:stroke fill markers"/></svg>

package/components/drawing/component.d.ts

@@ -2,7 +2,7 @@ import { Color } from 'vanilla-picker';
 import DrawingFeature, { ArrowPosition, ArrowStyle, DrawingShape, MeasureInformation } from '../../tools/drawing/drawingFeature.js';
 import DrawingState from '../../tools/drawing/drawingState.js';
 import OlDrawing from '../../tools/drawing/olDrawing.js';
-import CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
+import type CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
@@ -42,7 +42,9 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     activeDrawingLayer?: LayerDrawing;
     defaultLayerName: string;
     olDrawing: OlDrawing;
-    cesiumDrawing: CesiumDrawing;
+    cesiumDrawing?: CesiumDrawing;
+    /** Promise of the running lazy creation of the CesiumDrawing, to prevent creating it twice. */
+    private cesiumDrawingCreation?;
     fixedLengthEnabled: boolean;
     drawingText: string;
     batchCreateMode: boolean;
@@ -58,6 +60,11 @@ export default class DrawingComponent extends GirafeHTMLElement implements IGira
     protected fixedDimensionValueChangedHandler(e: CustomEvent): void;
     protected drawingTextChangedHandler(e: Event): void;
     protected connectedCallback(): void;
+    /**
+     * Lazily loads the drawing tools for the 3D Map.
+     * They are only needed once the globe has been loaded, and loading them pulls in Cesium.
+     */
+    private createCesiumDrawing;
     togglePanel(visible: boolean): void;
     get selectedFeatures(): DrawingFeature[];
     deselectAllFeatures(): void;

package/components/drawing/component.js

@@ -9,13 +9,13 @@ import { html as uHtml } from 'uhtml';
 import { v4 as uuidv4 } from 'uuid';
 import DrawingFeature, { DrawingShape } from '../../tools/drawing/drawingFeature.js';
 import OlDrawing from '../../tools/drawing/olDrawing.js';
-import CesiumDrawing from '../../tools/drawing/cesiumDrawing.js';
 import { GeoJSON, GPX, KML } from 'ol/format.js';
 import { Polygon } from 'ol/geom.js';
 import Feature from 'ol/Feature.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import { download } from '../../tools/export/download.js';
-import MapComponent from '../map/component.js';
+import Map2dComponent from '../map-2d/component.js';
+import Map3dComponent from '../map-3d/component.js';
 import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import checkedIcon from '../../assets/icons/checked-full.svg?raw';
 import noCheckedIcon from '../../assets/icons/checked-no.svg?raw';
@@ -113,6 +113,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     defaultLayerName = 'My Drawing';
     olDrawing;
     cesiumDrawing;
+    /** Promise of the running lazy creation of the CesiumDrawing, to prevent creating it twice. */
+    cesiumDrawingCreation;
     fixedLengthEnabled = false;
     // Text used by the "Text" drawing tool for the shapes it creates.
     drawingText = '';
@@ -171,12 +173,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     registerEvents() {
         this.olDrawing.registerInteractions();
         if (this.state.globe.loaded)
-            this.cesiumDrawing.registerInteractions();
+            this.cesiumDrawing?.registerInteractions();
         this.subscribe(/layers\.layersList\..*\.removalRequested/, (oldValue, value, parents) => this.onRemovalRequested(oldValue, value, parents));
     }
     unregisterEvents() {
         this.olDrawing.unregisterInteractions();
-        this.cesiumDrawing.unregisterInteractions();
+        this.cesiumDrawing?.unregisterInteractions();
     }
     addColorPicker(id, set, get) {
         const parent = this.getById(id);
@@ -236,7 +238,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     drawingTextChangedHandler(e) {
         this.drawingText = e.target.value;
         this.olDrawing.setDrawingText(this.drawingText);
-        this.cesiumDrawing.setDrawingText(this.drawingText);
+        this.cesiumDrawing?.setDrawingText(this.drawingText);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -244,14 +246,13 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             throw new Error(`ExtendedState '${DrawingStateLocation}' has to be defined in main typescript file.`);
         }
         this.drawingState = this.state.extendedState[DrawingStateLocation];
-        const map = this.context.componentManager.getComponents(MapComponent)[0];
+        const map = this.context.componentManager.getComponents(Map2dComponent)[0];
         this.olDrawing = new OlDrawing(map, DrawingStateLocation, this.context, (featureId) => {
             const drawingFeature = this.drawingState.features.find((drawingFeature) => drawingFeature.id === featureId);
             if (drawingFeature) {
                 this.deleteFeature(drawingFeature);
             }
         });
-        this.cesiumDrawing = new CesiumDrawing(map, DrawingStateLocation, this.context);
         this.render();
         this.subscribe(`extendedState.${DrawingStateLocation}.features`, (olds, news) => this.onFeaturesChanged(olds, news));
         // Keep the shape list and the options in sync when the selection is changed in the map
@@ -261,16 +262,32 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             }
         });
         this.subscribe('projection', (olds, news) => this.onProjectionChanged(olds, news));
-        this.subscribe('globe.loaded', () => {
+        this.subscribe('globe.loaded', async () => {
+            if (this.state.globe.loaded) {
+                await this.createCesiumDrawing();
+            }
             if (this.state.globe.loaded && this.isPanelVisible) {
-                this.cesiumDrawing.registerInteractions();
+                this.cesiumDrawing?.registerInteractions();
             }
             else {
-                this.cesiumDrawing.unregisterInteractions();
+                this.cesiumDrawing?.unregisterInteractions();
             }
         });
         this.subscribe('projection', (_, newProjection) => this.warnWhenInWebMercator(newProjection));
     }
+    /**
+     * Lazily loads the drawing tools for the 3D Map.
+     * They are only needed once the globe has been loaded, and loading them pulls in Cesium.
+     */
+    async createCesiumDrawing() {
+        this.cesiumDrawingCreation ??= (async () => {
+            const map3d = this.context.componentManager.getComponents(Map3dComponent)[0];
+            const { default: CesiumDrawing } = await import('../../tools/drawing/cesiumDrawing');
+            this.cesiumDrawing = new CesiumDrawing(map3d, DrawingStateLocation, this.context);
+            this.cesiumDrawing.setDrawingText(this.drawingText);
+        })();
+        return this.cesiumDrawingCreation;
+    }
     togglePanel(visible) {
         if (this.isPanelVisible == visible)
             return;

package/components/drawing-toolbar/component.js

@@ -8,7 +8,7 @@ import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import { DrawingShape } from '../../tools/drawing/drawingFeature.js';
-import MapComponent from '../map/component.js';
+import Map2dComponent from '../map-2d/component.js';
 import OlDrawing from '../../tools/drawing/olDrawing.js';
 import DrawingState from '../../tools/drawing/drawingState.js';
 import { UsedInTemplateOnly } from '../../decorators.js';
@@ -45,7 +45,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return this.context.mapManager.getMap();
     }
     get mapComponent() {
-        return this.context.componentManager.getComponents(MapComponent)[0];
+        return this.context.componentManager.getComponents(Map2dComponent)[0];
     }
     constructor() {
         super('advanced-filter-drawing-toolbar');

package/components/extlayers/component.d.ts

@@ -22,7 +22,6 @@ declare class ExternalLayersComponent extends GirafeHTMLElement implements IGira
     get predefinedWmsWmtsSources(): PredefinedSource[];
     get hasPredefinedWmsWmtsSources(): boolean;
     selectedTab: 'wms_wmts' | 'file';
-    private wmtsManager;
     private themeName?;
     private externalLayers;
     filteredLayers: ExternalLayer[];

package/components/extlayers/component.js

@@ -4,7 +4,6 @@ import { html as uHtml } from 'uhtml';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import ServerOgc from '../../models/serverogc.js';
 import { WmsClientDefault } from '../../tools/wms/wmsclient.js';
-import WmtsManager from '../map/tools/wmtsmanager.js';
 import LayerWmsExternal from '../../models/layers/layerwmsexternal.js';
 import LayerWmtsExternal from '../../models/layers/layerwmtsexternal.js';
 import ThemeLayerExternal from '../../models/layers/themelayerexternal.js';
@@ -35,7 +34,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return this.predefinedWmsWmtsSources.length > 0;
     }
     selectedTab = 'wms_wmts';
-    wmtsManager;
     themeName;
     externalLayers = [];
     filteredLayers = [];
@@ -122,7 +120,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     async scanLayersWMTS(url) {
         this.themeName = this.parseName(url);
-        const capabilities = await this.wmtsManager.getWmtsCapabilities(url);
+        const capabilities = await this.context.wmtsManager.getWmtsCapabilities(url);
         this.loading = false;
         if (capabilities?.ServiceIdentification?.Title) {
             this.themeName = capabilities.ServiceIdentification.Title;
@@ -225,9 +223,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     connectedCallback() {
         super.connectedCallback();
-        const olMap = this.context.mapManager.getMap();
-        // TODO REG : User context singleton for the WMTS-Manager
-        this.wmtsManager = new WmtsManager(olMap, this.context.stateManager);
         const config = this.context.configManager.Config;
         this.predefinedSources = config.externalLayers?.predefinedSources || [];
         this.render();

package/components/main.d.ts

@@ -29,7 +29,9 @@ export { default as InfoboxComponent } from './infobox/component.js';
 export { default as InfoWindowComponent } from './infowindow/component.js';
 export { default as LayoutComponent } from './layout/component.js';
 export { default as LRPanelComponent } from './lr-panel/component.js';
-export { default as MapComponent } from './map/component.js';
+export { default as Map2dComponent } from './map-2d/component.js';
+export { default as DeprecatedMapComponent } from './map-2d/deprecatedmapcomponent.js';
+export { default as Map3dComponent } from './map-3d/component.js';
 export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';

package/components/main.js

@@ -28,7 +28,9 @@ export { default as InfoboxComponent } from './infobox/component.js';
 export { default as InfoWindowComponent } from './infowindow/component.js';
 export { default as LayoutComponent } from './layout/component.js';
 export { default as LRPanelComponent } from './lr-panel/component.js';
-export { default as MapComponent } from './map/component.js';
+export { default as Map2dComponent } from './map-2d/component.js';
+export { default as DeprecatedMapComponent } from './map-2d/deprecatedmapcomponent.js';
+export { default as Map3dComponent } from './map-3d/component.js';
 export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';

package/components/{map → map-2d}/component.d.ts

@@ -8,10 +8,8 @@ import { DragBoxEvent } from 'ol/interaction/DragBox.js';
 import { Geometry } from 'ol/geom.js';
 import { Extent } from 'ol/extent.js';
 import SwipeManager from './tools/swipemanager.js';
-import WmsManager3d from './tools/wmsmanager3d.js';
 import OsmManager from './tools/osmmanager.js';
 import VectorTilesManager from './tools/vectortilesmanager.js';
-import WmtsManager from './tools/wmtsmanager.js';
 import ViewManager from './tools/viewmanager.js';
 import CogManager from './tools/cogmanager.js';
 import DrawingManager from './tools/drawingmanager.js';
@@ -21,30 +19,17 @@ import Layer from '../../models/layers/layer.js';
 import BaseLayer from '../../models/layers/baselayer.js';
 import { FocusFeature } from './tools/focusfeature.js';
 import XyzManager from './tools/xyzmanager.js';
-import SelectionParam from '../../models/selectionparam.js';
-import { CameraConfig } from '../../tools/state/globe.js';
 import { Callback } from '../../tools/state/statemanager.js';
 import { StyleFunction } from 'ol/style/Style.js';
-declare global {
-    interface Window {
-        Cesium: unknown;
-    }
-}
-export default class MapComponent extends GirafeHTMLElement {
+export default class Map2dComponent extends GirafeHTMLElement {
     protected templateUrl: string | null;
     protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     olMap: Map;
     mapTarget: HTMLDivElement;
-    map3d: any;
-    map3dTarget: HTMLDivElement;
-    map3dShadowsTimestamp: number;
-    loading: boolean;
     swiper: HTMLInputElement;
     closeSwiperButton: HTMLButtonElement;
     swipeManager: SwipeManager;
-    wmtsManager: WmtsManager;
-    wmsManager3d: WmsManager3d | null;
     osmManager: OsmManager;
     cogManager: CogManager;
     xyzManager: XyzManager;
@@ -79,7 +64,8 @@ export default class MapComponent extends GirafeHTMLElement {
     dragbox: DragBox;
     focusFeature: FocusFeature;
     mapTargetResizeObserver: ResizeObserver;
-    constructor();
+    private get wmtsManager();
+    constructor(name?: string);
     /**
      * The Map needs to be displayed in Fullscreen Mode.
      */
@@ -109,7 +95,6 @@ export default class MapComponent extends GirafeHTMLElement {
     onDragSelection(_e: DragBoxEvent): void;
     select(extent: number[]): void;
     selectNone(): void;
-    onSelectFeatures(selectionParams: SelectionParam[]): Promise<void>;
     protected connectedCallback(): void;
     onCustomGirafeEvent(details: {
         action: string;
@@ -124,14 +109,14 @@ export default class MapComponent extends GirafeHTMLElement {
     private setSelectLayerStyle;
     private setHighlightLayerStyle;
     private setCrosshairStyle;
-    create3dMap(): Promise<void>;
-    addAllActiveLayers3dMap(layer: BaseLayer): void;
-    onGlobeToggled(): Promise<void>;
-    onShadowsToggled(shadows: boolean): void;
-    onShadowsTimestampChanged(shadowsTimestamp: number): void;
+    /**
+     * Resizes the 2D Map depending on the current globe display mode.
+     * In side-by-side mode the 2D Map only takes the left part of the available space,
+     * in full 3D mode it is hidden. The 3D Map takes care of its own sizing.
+     */
+    onGlobeDisplayChanged(display: string): void;
     onFeaturesSelected(features: Feature[]): void;
     onFeatureHighlighted(features: Feature[]): void;
-    onCameraChanged(camera: CameraConfig | null): void;
     zoomToExtent(extent: Extent): void;
     onChangeProjection(_oldSrid: string, newSrid: string): void;
     onChangeDarkMode(): void;