@geogirafe/lib-geoportal 1.2.0-dev.2800201562 → 1.2.0-dev.2816732111

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

@@ -8,13 +8,9 @@ import { DragBox } from 'ol/interaction.js';
 import { ScaleLine } from 'ol/control.js';
 import { GeometryCollection, Point } from 'ol/geom.js';
 import { getCenter, getHeight, getWidth } from 'ol/extent.js';
-import { Cesium3DTileset } from 'cesium';
-import proj4 from 'proj4';
 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';
@@ -40,11 +36,10 @@ import { parseCoordinates } from '../../tools/geometrytools.js';
 import CircleGeom from 'ol/geom/Circle.js';
 import WfsFilter from '../../tools/wfs/wfsfilter.js';
 import WfsFilterCondition from '../../tools/wfs/wfsfiltercondition.js';
-import { applyFeaturesToSelection, applyOpacityToLayers } from '../../tools/utils/utils.js';
-import { SelectionMode } from '../../models/selection.js';
+import { applyOpacityToLayers } from '../../tools/utils/utils.js';
 import { platformModifierKeyOnly } from 'ol/events/condition.js';
 import { HighlightMode } from '../../tools/configuration/girafeconfig.js';
-export default class MapComponent extends GirafeHTMLElement {
+export default class Map2dComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
     template = () => {
@@ -53,25 +48,17 @@ export default class MapComponent extends GirafeHTMLElement {
 </style><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,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:11.6rem!important}.ol-fullscreen{top:7rem!important}.ol-location{top:9.3rem!important}.img-location,.img-disable-location,.img-fullscreen{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.btn-fullscreen,.btn-exit-fullscreen,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location,.ol-fullscreen{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
+#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:11.6rem!important}.ol-fullscreen{top:7rem!important}.ol-location{top:9.3rem!important}.img-location,.img-disable-location,.img-fullscreen{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.btn-fullscreen,.btn-exit-fullscreen,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location,.ol-fullscreen{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
 <style>${this.customStyle}</style>
-<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-fullscreen ol-unselectable ol-control'}"><button id="fullscreen-enter-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-on" class="btn-fullscreen"><img class="img-fullscreen" alt="fullscreen-icon" src="icons/fullscreen.svg"></button> <button id="fullscreen-exit-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-off" class="btn-exit-fullscreen hidden"><img class="img-fullscreen" alt="fullscreen-exit-icon" src="icons/fullscreen-exit.svg"></button></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
+<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-fullscreen ol-unselectable ol-control'}"><button id="fullscreen-enter-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-on" class="btn-fullscreen"><img class="img-fullscreen" alt="fullscreen-icon" src="icons/fullscreen.svg"></button> <button id="fullscreen-exit-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-off" class="btn-exit-fullscreen hidden"><img class="img-fullscreen" alt="fullscreen-exit-icon" src="icons/fullscreen-exit.svg"></button></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     olMap;
     mapTarget;
-    // TODO REG : Howto use the right type here without importing the whole library (it needs to be imported only on demand) ?
-    // This works but needs the library: type OLCesiumType = typeof OLCesium;
-    map3d;
-    map3dTarget;
-    map3dShadowsTimestamp;
-    loading = false;
     swiper;
     closeSwiperButton;
     swipeManager;
-    wmtsManager;
-    wmsManager3d = null;
     osmManager;
     cogManager;
     xyzManager;
@@ -125,8 +112,11 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     dragbox;
     focusFeature;
     mapTargetResizeObserver;
-    constructor() {
-        super('map');
+    get wmtsManager() {
+        return this.context.wmtsManager;
+    }
+    constructor(name = 'map-2d') {
+        super(name);
     }
     /**
      * The Map needs to be displayed in Fullscreen Mode.
@@ -158,7 +148,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.subscribe('projection', (oldProjection, newProjection) => this.onChangeProjection(oldProjection, newProjection));
         this.subscribe('interface.darkMapMode', () => this.onChangeDarkMode());
         this.subscribe('interface.fullscreenMode', (_oldValue, newValue) => this.updateFullscreenButton(newValue));
-        this.subscribe('selection.selectionParameters', (_, newParams) => this.onSelectFeatures(newParams));
         this.subscribe('selection.selectedFeatures', (_oldFeatures, newFeatures) => this.onFeaturesSelected(newFeatures));
         this.subscribe('selection.selectedFeaturesType', (_oldFeaturesType, newFeaturesType) => this.onFeaturesTypeChanged(newFeaturesType));
         this.subscribe('selection.highlightedFeatures', (_oldFeatures, newFeatures) => this.onFeatureHighlighted(newFeatures));
@@ -169,16 +158,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 this.addMarker(marker);
             }
         });
-        this.subscribe('globe.display', async () => {
-            await this.onGlobeToggled();
-            this.onCameraChanged(this.state.globe.camera);
-        });
-        this.subscribe('globe.shadows', (_oldShadows, newShadows) => this.onShadowsToggled(newShadows));
-        this.subscribe('globe.shadowsTimestamp', (_oldTimestamp, newTimestamp) => this.onShadowsTimestampChanged(newTimestamp));
-        this.subscribe('globe.camera', async (_oldCamera, newCamera) => {
-            await this.onGlobeToggled();
-            this.onCameraChanged(newCamera);
-        });
+        this.subscribe('globe.display', (_oldDisplay, newDisplay) => this.onGlobeDisplayChanged(newDisplay));
         this.subscribe(/layers\.layersList\..*\.activeState/, async (_oldActive, _newActive, layer) => {
             await this.onLayerToggled(layer);
             if (layer.active) {
@@ -195,7 +175,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 // The map component may not be fully ready when other part of the application will be initialized
                 // And some operations that need a fuly loaded map need to be first done when the application is ready
                 // For example, Permalink needs resolution,
-                this.onCameraChanged(this.state.globe.camera);
                 // If the app is opened from a permalink, prioritize this data over settings in the shared state
                 if (this.context.permalinkManager.hasFeatureSelectionQuery()) {
                     this.applyFeatureSelectionFromPermalink();
@@ -297,7 +276,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.defaultSrid = this.context.configManager.getDefaultConfigValue('map.srid');
         // Initialize the map element
         this.mapTarget = this.shadow.getElementById('ol-map');
-        this.map3dTarget = this.shadow.getElementById('cs-map');
         this.olMap.setTarget(this.mapTarget);
         // Initialize managers
         this.osmManager = new OsmManager(this.olMap);
@@ -306,7 +284,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.drawingManager = new DrawingManager(this.olMap);
         this.viewManager = new ViewManager(this.olMap, this.context.configManager, this.context.stateManager);
         this.vectorTilesManager = new VectorTilesManager(this.olMap);
-        this.wmtsManager = new WmtsManager(this.olMap, this.context.stateManager);
         this.swiper = this.shadow.getElementById('swiper');
         this.closeSwiperButton = this.shadow.getElementById('close-swiper');
         this.swipeManager = new SwipeManager(this.olMap, this.swiper, this.closeSwiperButton, this.wmtsManager, this.context.wmsManager, this.context.localFileManager);
@@ -492,58 +469,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.select(extent);
     }
     select(extent) {
-        // Reset current selection if SelectionMode is Replace
-        if (this.state.selection.selectionMode === SelectionMode.Replace) {
-            this.selectNone();
-        }
-        else if (this.state.selection.selectionMode === SelectionMode.Add) {
-            this.state.selection.selectionParameters = [];
-        }
-        // Layers selectable today are WMS, WMTS (with wms layer) and Local files
-        // Use batch for changes to prevent multiple selection of objects
-        this.context.stateManager.batchChanges(() => {
-            this.context.wmsManager.selectFeatures(extent);
-            this.wmtsManager.selectFeatures(extent);
-            this.context.localFileManager.selectFeatures(extent);
-        });
+        this.context.selectionManager.select(extent);
     }
     selectNone() {
-        this.state.selection.selectedFeatures = [];
-        this.state.selection.selectionParameters = [];
-        this.state.selection.highlightedFeatures = [];
-    }
-    async onSelectFeatures(selectionParams) {
-        if (selectionParams.length === 0) {
-            return;
-        }
-        this.state.loading = true;
-        try {
-            // WMS GetFeatureInfo
-            const wmsPromises = selectionParams.map((param) => {
-                const wmsGetFeatureInfoSelectionParam = param.clone((l) => l.queryable && l.wmsQueryableOnly);
-                const client = this.context.wmsManager.getClient(wmsGetFeatureInfoSelectionParam.ogcServer);
-                return client.getFeatureInfo(wmsGetFeatureInfoSelectionParam);
-            });
-            // WFS GetFeature
-            const wfsPromises = selectionParams.map((param) => {
-                const wfsGetFeatureInfoSelectionParam = param.clone((l) => l.wfsQueryable);
-                const client = this.context.wfsManager.getClient(wfsGetFeatureInfoSelectionParam.ogcServer);
-                const features = client.getFeature(wfsGetFeatureInfoSelectionParam);
-                return features;
-            });
-            const wmsGmlFeatures = (await Promise.all(wmsPromises)).flat();
-            const wfsGmlFeatures = (await Promise.all(wfsPromises)).flat();
-            const gmlFeatures = [...wmsGmlFeatures, ...wfsGmlFeatures];
-            if (gmlFeatures.length === 0 && this.state.selection.selectedFeatures.length === 0) {
-                this.state.interface.selectionComponentVisible = false;
-            }
-            else {
-                applyFeaturesToSelection(gmlFeatures, this.state);
-            }
-        }
-        finally {
-            this.state.loading = false;
-        }
+        this.context.selectionManager.selectNone();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -552,7 +481,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.render();
         this.listenOpenLayersEvents();
         this.registerEvents();
-        this.onGlobeToggled();
+        this.onGlobeDisplayChanged(this.state.globe.display);
     }
     onCustomGirafeEvent(details) {
         if (details.action === GeoEvents.zoomToExtent) {
@@ -620,159 +549,24 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             })
         }));
     }
-    async create3dMap() {
-        if (!this.map3d && this.config.map3d) {
-            this.loading = true;
-            super.render();
-            // First : Lazy loading of Cesium and olcs
-            const Cesium = await import('cesium');
-            window.Cesium = Cesium;
-            const olcs = await import('olcs');
-            // Initialize the 3D Map
-            this.map3d = new olcs.default({
-                map: this.olMap,
-                target: this.map3dTarget,
-                time: () => {
-                    const date = new Date(this.map3dShadowsTimestamp);
-                    return Number.isNaN(date.getTime()) ? Cesium.JulianDate.now() : Cesium.JulianDate.fromDate(date);
-                }
-            });
-            const scene = this.map3d.getCesiumScene();
-            const config = this.config.map3d;
-            scene.screenSpaceCameraController.maximumZoomDistance = config.maximumZoomDistance ?? 30000;
-            // Add terrain
-            if (config.terrainUrl) {
-                scene.terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(config.terrainUrl);
-            }
-            // Add terrain imagery
-            let coverage = Cesium.Rectangle.MAX_VALUE;
-            if (config.terrainImagery) {
-                if (config.terrainImagery.coverageArea) {
-                    coverage = Cesium.Rectangle.fromDegrees(...config.terrainImagery.coverageArea);
-                }
-                scene.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
-                    url: config.terrainImagery.url,
-                    minimumLevel: config.terrainImagery.minLoD ?? 0,
-                    maximumLevel: config.terrainImagery.maxLoD,
-                    tilingScheme: config.terrainImagery.srid === 3857
-                        ? new Cesium.WebMercatorTilingScheme()
-                        : new Cesium.GeographicTilingScheme(),
-                    rectangle: coverage
-                }));
-            }
-            // Add 3D-Tiles layers
-            const tilesetOptions = {
-                // If the error of the model is higher than this, we increase the resolution
-                maximumScreenSpaceError: 0.5,
-                // Enable different level of details based on the distance from the camera
-                dynamicScreenSpaceError: true,
-                // Model error at the max distance from the camera (higher = distant models are of lower quality)
-                dynamicScreenSpaceErrorFactor: config.tilesetsMaxError ?? 7
-            };
-            config.tilesetsUrls.forEach((tilesetUrl) => {
-                Cesium3DTileset.fromUrl(tilesetUrl, tilesetOptions).then((t) => scene.primitives.add(t));
-            });
-            // REG: ambientOcclusion was temporary deactivated because of performance impact and horizontal lines artefacts
-            // const ambientOcclusion = scene.postProcessStages.ambientOcclusion;
-            // ambientOcclusion.enabled = true;
-            // ambientOcclusion.uniforms.bias = 0.5;
-            // ambientOcclusion.uniforms.stepSize = 1;
-            // ambientOcclusion.uniforms.blurStepSize = 1;
-            // REG: Adding the following line solves the problem, but it remains a log less performatn with ambiant occlusion.
-            // So I don't know what we want to do with it.
-            // See https://github.com/CesiumGS/cesium/issues/13039#issuecomment-3583233494
-            // viewer.camera.frustum.near = 1.0;
-            this.loading = false;
-            this.state.globe.loaded = true;
-            super.render();
-            const cesiumScreenToLocalCoord = (position) => {
-                const cart = Cesium.Cartographic.fromCartesian(pickOnGlobe(position));
-                const longLat = [Cesium.Math.toDegrees(cart.longitude), Cesium.Math.toDegrees(cart.latitude)];
-                return proj4('EPSG:4326', this.config.map.srid, longLat);
-            };
-            const pickOnGlobe = (position) => {
-                const ray = scene.camera.getPickRay(position);
-                return ray == undefined ? undefined : scene.globe.pick(ray, scene);
-            };
-            this.registerInteractionListener('globe.select', true);
-            const eventHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-            eventHandler.setInputAction((event) => {
-                // If the click is on the map and selection is allowed
-                if (Cesium.defined(event.position) && this.canExecute('globe.select')) {
-                    const topLeftScreen = event.position.clone();
-                    topLeftScreen.x -= this.pixelTolerance;
-                    topLeftScreen.y -= this.pixelTolerance;
-                    const bottomRightScreen = event.position.clone();
-                    bottomRightScreen.x += this.pixelTolerance;
-                    bottomRightScreen.y += this.pixelTolerance;
-                    const topLeft = cesiumScreenToLocalCoord(topLeftScreen);
-                    const bottomRight = cesiumScreenToLocalCoord(bottomRightScreen);
-                    this.select([topLeft[0], topLeft[1], bottomRight[0], bottomRight[1]]);
-                }
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-            this.wmsManager3d = new WmsManager3d(scene, this.context);
-            this.state.layers.layersList.forEach((l) => this.addAllActiveLayers3dMap(l));
-            const camera = scene.camera;
-            camera.changed.addEventListener(() => {
-                console.debug('Cesium camera moved');
-                this.state.globe.camera = {
-                    heading: camera.heading,
-                    pitch: camera.pitch,
-                    roll: camera.roll
-                };
-            }, 1);
-        }
-    }
-    addAllActiveLayers3dMap(layer) {
-        if (layer instanceof LayerWms) {
-            if (layer.active) {
-                this.wmsManager3d?.addLayer(layer);
-            }
-        }
-        else if (layer instanceof GroupLayer) {
-            layer.children.forEach((l) => this.addAllActiveLayers3dMap(l));
-        }
-    }
-    async onGlobeToggled() {
-        if (this.state.globe.display === '3D') {
-            // Full screen globe has been enabled
-            this.mapTarget.style.display = 'none';
-            this.map3dTarget.style.display = 'block';
-            this.map3dTarget.style.left = '0';
-            this.map3dTarget.style.width = '100%';
-            await this.create3dMap();
-            this.map3d.setEnabled(true);
+    /**
+     * 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) {
+        if (display === '3D') {
+            this.style.display = 'none';
         }
-        else if (this.state.globe.display === '2D/3D') {
-            // Side by side has been enabled
-            this.mapTarget.style.display = 'inline-block';
-            this.mapTarget.style.width = '45%';
-            this.map3dTarget.style.display = 'inline-block';
-            this.map3dTarget.style.left = '45%';
-            this.map3dTarget.style.width = '55%';
-            await this.create3dMap();
-            this.map3d.setEnabled(true);
+        else if (display === '2D/3D') {
+            this.style.display = 'block';
+            this.style.width = '45%';
+            this.olMap.updateSize();
         }
         else {
-            // 3d map is not visible
-            if (this.map3d) {
-                this.map3d.setEnabled(false);
-            }
-            this.mapTarget.style.display = 'block';
-            this.mapTarget.style.width = '100%';
-            this.map3dTarget.style.display = 'none';
-            this.unregisterInteractionListeners('globe.select');
-        }
-    }
-    onShadowsToggled(shadows) {
-        if (this.map3d) {
-            const scene = this.map3d.getCesiumScene();
-            scene.shadowMap.enabled = scene.globe.enableLighting = shadows;
-        }
-    }
-    onShadowsTimestampChanged(shadowsTimestamp) {
-        if (this.map3d) {
-            this.map3dShadowsTimestamp = shadowsTimestamp;
+            this.style.display = 'block';
+            this.style.width = '100%';
+            this.olMap.updateSize();
         }
     }
     onFeaturesSelected(features) {
@@ -793,19 +587,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         // Recreate the style in case user preferences have changed in the meantime
         this.setHighlightLayerStyle();
     }
-    onCameraChanged(camera) {
-        if (this.map3d && camera) {
-            const scene = this.map3d.getCesiumScene();
-            scene.camera.setView({
-                destination: scene.camera.position, // Keep current position
-                orientation: {
-                    heading: camera.heading,
-                    pitch: camera.pitch,
-                    roll: camera.roll
-                }
-            });
-        }
-    }
     zoomToExtent(extent) {
         this.olMap.getView().fit(extent);
     }
@@ -835,8 +616,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         for (const l of layerInfos) {
             if (l instanceof LayerWms) {
                 this.context.wmsManager.getClient(l).addLayer(l);
-                if (this.wmsManager3d != null)
-                    this.wmsManager3d.addLayer(l);
             }
             else if (l instanceof LayerWmts) {
                 await this.wmtsManager.addLayer(l);
@@ -859,9 +638,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         for (const l of layerInfos) {
             if (l instanceof LayerWms) {
                 this.context.wmsManager.getClient(l).removeLayer(l);
-                if (this.wmsManager3d != null) {
-                    this.wmsManager3d.removeLayer(l);
-                }
             }
             else if (l instanceof LayerWmts) {
                 this.wmtsManager.removeLayer(l);
@@ -888,8 +664,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     onChangeLayerOpacity(layerInfos) {
         if (layerInfos instanceof LayerWms) {
             this.context.wmsManager.getClient(layerInfos).changeOpacity(layerInfos);
-            if (this.wmsManager3d != null)
-                this.wmsManager3d.changeOpacity(layerInfos);
         }
         else if (layerInfos instanceof LayerWmts) {
             if (this.wmtsManager.layerExists(layerInfos)) {
@@ -917,8 +691,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      */
     onChangeFilter(layerInfos) {
         this.context.wmsManager.getClient(layerInfos).changeFilter(layerInfos);
-        if (this.wmsManager3d != null)
-            this.wmsManager3d.changeFilter(layerInfos);
     }
     /**
      * Change time configuration on layer (only LayerWMS are affected)
@@ -947,8 +719,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     removeAllBasemapLayers() {
         this.wmtsManager.removeAllBasemapLayers();
         this.context.wmsManager.removeAllBasemapLayers();
-        if (this.wmsManager3d != null)
-            this.wmsManager3d.removeAllBasemapLayers();
         this.osmManager.removeAllBasemapLayers();
         this.cogManager.removeAllBasemapLayers();
         this.xyzManager.removeAllBasemapLayers();
@@ -974,8 +744,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             }
             else if (layer instanceof LayerWms) {
                 this.context.wmsManager.getClient(layer).addBasemapLayer(layer);
-                if (this.wmsManager3d != null)
-                    this.wmsManager3d.addBasemapLayer(layer);
             }
             else {
                 throw new TypeError('Unknown basemap type');

package/components/map-2d/deprecatedmapcomponent.d.ts

@@ -0,0 +1,15 @@
+import Map2dComponent from './component.js';
+/**
+ * The `<girafe-map>` Element of the previous versions, kept as a deprecated alias of
+ * `<girafe-map-2d>` to give the applications using GeoGirafe time to migrate.
+ *
+ * It keeps the component name `map`, so that the custom styles and the feedback configuration
+ * that were written for `<girafe-map>` keep working. It only displays the 2D Map: an application
+ * that needs the 3D Map has to add a `<girafe-map-3d>` Element next to it.
+ *
+ * @deprecated Use `<girafe-map-2d>` (and `<girafe-map-3d>` for the 3D Map) instead.
+ */
+export default class DeprecatedMapComponent extends Map2dComponent {
+    constructor();
+    protected connectedCallback(): void;
+}

package/components/map-2d/deprecatedmapcomponent.js

@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: Apache-2.0
+import Map2dComponent from './component.js';
+/**
+ * The `<girafe-map>` Element of the previous versions, kept as a deprecated alias of
+ * `<girafe-map-2d>` to give the applications using GeoGirafe time to migrate.
+ *
+ * It keeps the component name `map`, so that the custom styles and the feedback configuration
+ * that were written for `<girafe-map>` keep working. It only displays the 2D Map: an application
+ * that needs the 3D Map has to add a `<girafe-map-3d>` Element next to it.
+ *
+ * @deprecated Use `<girafe-map-2d>` (and `<girafe-map-3d>` for the 3D Map) instead.
+ */
+export default class DeprecatedMapComponent extends Map2dComponent {
+    constructor() {
+        super('map');
+    }
+    connectedCallback() {
+        console.warn('<girafe-map> is deprecated and will be removed in a future version. ' +
+            'Please replace it with <girafe-map-2d>. ' +
+            'If your application uses the 3D Map, add a <girafe-map-3d> Element next to it, ' +
+            'otherwise the 3D Map will not be displayed anymore.');
+        super.connectedCallback();
+    }
+}

package/components/{map → map-2d}/style.css

@@ -15,36 +15,6 @@
   display: none;
 }
 
-.center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 10px;
-  text-align: center;
-}
-
-.loading span {
-  color: var(--text-color);
-  display: block;
-  margin-top: 1rem;
-  font-weight: 600;
-}
-
-.loading span.quote {
-  font-style: italic;
-  font-weight: 300;
-}
-
-#cs-map {
-  background-color: var(--bkg-color);
-  position: absolute;
-  height: 100%;
-  overflow: hidden;
-  display: none;
-  border-left: solid 3px #444;
-}
-
 .ol-control {
   right: 2rem !important;
   left: unset !important;

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

@@ -1,5 +1,5 @@
 import { Map } from 'ol';
-import WmtsManager from './wmtsmanager.js';
+import WmtsManager from '../../../tools/wmts/wmtsmanager.js';
 import WmsManager from '../../../tools/wms/wmsmanager.js';
 import { Layer as OLayer } from 'ol/layer.js';
 import { Listener } from 'ol/events.js';

package/components/map-3d/component.d.ts

@@ -0,0 +1,50 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { Callback } from '../../tools/state/statemanager.js';
+import type Globe from './tools/globe.js';
+/**
+ * The 3D Map.
+ *
+ * The Component itself stays lightweight: Cesium and OLCesium are only imported when the 3D Map
+ * is displayed for the first time. Everything that needs those libraries lives in ./tools/globe.
+ * The synchronization with the 2D Map is done by OLCesium, through the OpenLayers map of the
+ * MapManager. There is therefore no direct dependency to the map-2d Component.
+ */
+export default class Map3dComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    globe: Globe | null;
+    map3dTarget: HTMLDivElement;
+    loading: boolean;
+    pixelTolerance: number;
+    /** Promise of the currently running globe creation, to prevent creating it twice. */
+    private globeCreation;
+    /** The OLCesium instance, once the globe has been created. */
+    get map3d(): any;
+    private get config();
+    constructor();
+    /**
+     *
+     * @param path Overridden to make those methods public for this component
+     * @param callback
+     */
+    subscribe(path: string, callback: Callback): Callback;
+    subscribe(path: RegExp, callback: Callback): Callback;
+    /**
+     * The Map needs to be displayed in Fullscreen Mode.
+     */
+    protected get isFullscreenComponent(): boolean;
+    protected connectedCallback(): void;
+    render(): void;
+    private registerEvents;
+    /**
+     * Lazily loads Cesium/OLCesium and creates the globe. Does nothing if no 3D configuration
+     * is available or if the globe has already been created.
+     */
+    private createGlobe;
+    /**
+     * Shows or hides the 3D Map and sizes it depending on the current display mode.
+     * The 2D Map takes care of its own sizing.
+     */
+    onGlobeToggled(): Promise<void>;
+}