@eeacms/volto-arcgis-block 0.1.433 → 0.1.435

package/CHANGELOG.md

@@ -4,8 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.435](https://github.com/eea/volto-arcgis-block/compare/0.1.434...0.1.435) - 10 March 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): Fix Upload widget TOC menu stored services correct loading in 2D and 3D [Unai Bolivar - [`8b9e5fa`](https://github.com/eea/volto-arcgis-block/commit/8b9e5fad5a7d361e8fa4c8f48ae771422ae1c262)]
+- (bug): fix upload widget error report, loading spinner, and TOC menu cleanup in 3D [Unai Bolivar - [`dc2ab0d`](https://github.com/eea/volto-arcgis-block/commit/dc2ab0d5ecafdb1cdc9c417bd8533c7ff0f28446)]
+### [0.1.434](https://github.com/eea/volto-arcgis-block/compare/0.1.433...0.1.434) - 10 March 2026
+
+#### :hammer_and_wrench: Others
+
+- (feat): Uploaded WMTS for external services fails if server tiling scheme displays popup error 'Incorrect tiling scheme for scene view. The service can still be used in 2D map view.' [Unai Bolivar - [`c513433`](https://github.com/eea/volto-arcgis-block/commit/c513433905182949721c13fcc056e67d7d780942)]
+- (bug): 3D and 2D buttons now in place and functioning [Unai Bolivar - [`e93b038`](https://github.com/eea/volto-arcgis-block/commit/e93b0386b6b10f6aff04f4533a2bb425047ae95c)]
+- (feat): New 3D button location and styles [Unai Bolivar - [`c367036`](https://github.com/eea/volto-arcgis-block/commit/c3670363e4440bdabf25cb5b193a39b25077087a)]
+- (bug): Fix WMTS layer load on reselect in 3D Scene view mode [Unai Bolivar - [`0036b17`](https://github.com/eea/volto-arcgis-block/commit/0036b170da08e5c3c3e6bd7609d95873f88d497d)]
+- (feat): Bookmarks widget loads in 3D globe view mode [Unai Bolivar - [`847ed10`](https://github.com/eea/volto-arcgis-block/commit/847ed10d05668678dd356e91ffbf6aa439ba4169)]
 ### [0.1.433](https://github.com/eea/volto-arcgis-block/compare/0.1.432...0.1.433) - 9 March 2026
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #1112 from eea/develop [Unai Bolivar - [`c4d87a3`](https://github.com/eea/volto-arcgis-block/commit/c4d87a3e923451e94d0fcddd35b791cae4b1c292)]
 ### [0.1.432](https://github.com/eea/volto-arcgis-block/compare/0.1.431...0.1.432) - 4 March 2026
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.433",
+  "version": "0.1.435",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -237,6 +237,9 @@ class BookmarkWidget extends React.Component {
       },
       container: document.querySelector('.bookmark-panel'),
       bookmarks: this.sessionBookmarks.map((bm) => {
+        if (bm && bm.viewpoint) {
+          return bm;
+        }
         if (bm.extent) {
           const { extent, ...rest } = bm;
           let geometry;
@@ -1075,8 +1078,15 @@ class BookmarkWidget extends React.Component {
           }
           if (name !== undefined) out.name = name;
           let g = null;
-          if (b && b.viewpoint && b.viewpoint.targetGeometry) {
-            g = b.viewpoint.targetGeometry;
+          let viewpointData;
+          if (b && b.viewpoint) {
+            viewpointData = b.viewpoint.toJSON
+              ? b.viewpoint.toJSON()
+              : b.viewpoint;
+            out.viewpoint = viewpointData;
+            if (b.viewpoint.targetGeometry) {
+              g = b.viewpoint.targetGeometry;
+            }
           } else if (b && b.extent) {
             g = b.extent;
           }
@@ -1246,6 +1256,9 @@ class BookmarkWidget extends React.Component {
         this.loadBookmarksToWidget();
         if (this.Bookmarks && this.Bookmarks.bookmarks) {
           const mapped = this.sessionBookmarks.map((bm) => {
+            if (bm && bm.viewpoint) {
+              return bm;
+            }
             if (bm && bm.extent) {
               const { extent, ...rest } = bm;
               let geometry;
@@ -1341,7 +1354,7 @@ class BookmarkWidget extends React.Component {
                 }}
                 type="submit"
               >
-                <span class="esri-bookmarks__add-bookmark-icon esri-icon-plus"></span>
+                <span className="esri-bookmarks__add-bookmark-icon esri-icon-plus"></span>
                 Upload a bookmark
               </button>
             </div>

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -37,11 +37,17 @@ class LoadingSpinner extends React.Component {
     });
     const handle3 = this.props.view.on('layerview-create-error', (event) => {
       if (!this._isMounted) return;
-      if (event.layer.loadError !== null && this.state.loading === true) {
+      if (this.state.loading === true) {
         this.setState({ loading: false }, this.showLoading);
       }
     });
-    this.arcgisEventHandles.push(handle1, handle2, handle3);
+    const handle4 = this.props.view.watch('updating', (isUpdating) => {
+      if (!this._isMounted) return;
+      if (!isUpdating && this.state.loading === true) {
+        this.setState({ loading: false }, this.showLoading);
+      }
+    });
+    this.arcgisEventHandles.push(handle1, handle2, handle3, handle4);
   }
 
   showLoading() {

package/src/components/MapViewer/MapViewer.jsx

@@ -382,8 +382,14 @@ class MapViewer extends React.Component {
     this.viewTransitionTaskId = 0;
     this.isViewSwitchInProgress = false;
     this.syncViewTask = null;
+    this.viewModeButtonTimeout = null;
+    this.isViewModeButtonLoaded = false;
     this.viewUiOperationState = null;
     this.shouldClearSessionOnUnmount = true;
+    this.uploadErrorTimeoutTask = null;
+    this.scheduleViewModeButtonLoad = this.scheduleViewModeButtonLoad.bind(
+      this,
+    );
     this.processPendingWidgetActivation = this.processPendingWidgetActivation.bind(
       this,
     );
@@ -426,6 +432,32 @@ class MapViewer extends React.Component {
     return viewMode === '3d' ? '3d' : '2d';
   }
 
+  scheduleViewModeButtonLoad() {
+    if (this.viewModeButtonTimeout) {
+      clearTimeout(this.viewModeButtonTimeout);
+      this.viewModeButtonTimeout = null;
+    }
+
+    if (this.state.viewMode !== '2d') {
+      if (!this.isViewModeButtonLoaded) {
+        this.isViewModeButtonLoaded = true;
+        this.scheduleViewSyncTask();
+      }
+      return;
+    }
+
+    this.isViewModeButtonLoaded = false;
+
+    this.viewModeButtonTimeout = setTimeout(() => {
+      if (!this.isComponentMounted) {
+        return;
+      }
+      this.isViewModeButtonLoaded = true;
+      this.scheduleViewSyncTask();
+      this.viewModeButtonTimeout = null;
+    }, 1000);
+  }
+
   getViewConstraintExtent(useZoomInBounds) {
     const geometryConfig = useZoomInBounds
       ? this.mapCfg.geometryZoomIn
@@ -598,10 +630,19 @@ class MapViewer extends React.Component {
       { selector: '.hotspot-container', position: 'top-right' },
       { selector: '.bookmark-container', position: 'top-right' },
       { selector: '.upload-container', position: 'top-right' },
+      { selector: '.viewmode-container', position: 'top-right' },
       { selector: '.error-report-container', position: 'top-right' },
     ];
 
     uiContainerConfig.forEach(({ selector, position }) => {
+      if (
+        selector === '.viewmode-container' &&
+        this.state.viewMode === '2d' &&
+        !this.isViewModeButtonLoaded
+      ) {
+        return;
+      }
+
       const containerNodeList = document.querySelectorAll(selector);
       if (!containerNodeList || containerNodeList.length === 0) return;
       containerNodeList.forEach((containerNode) => {
@@ -1265,8 +1306,16 @@ class MapViewer extends React.Component {
 
   uploadFileErrorHandler = (errorType = 'uploadError') => {
     this.setState({ uploadError: true, uploadErrorType: errorType });
-    setTimeout(() => {
+    if (this.uploadErrorTimeoutTask) {
+      clearTimeout(this.uploadErrorTimeoutTask);
+      this.uploadErrorTimeoutTask = null;
+    }
+    this.uploadErrorTimeoutTask = setTimeout(() => {
+      if (!this.isComponentMounted) {
+        return;
+      }
       this.setState({ uploadError: false, uploadErrorType: 'uploadError' });
+      this.uploadErrorTimeoutTask = null;
     }, 3000);
   };
 
@@ -1395,6 +1444,7 @@ class MapViewer extends React.Component {
       zoom: mapStatus.zoom,
       viewpoint: null,
     });
+    this.scheduleViewModeButtonLoad();
     // After launching the MapViewerConfig action
     // we will have stored the json response here:
     // this.props.mapviewer_config
@@ -1455,6 +1505,7 @@ class MapViewer extends React.Component {
     }
 
     if (prevState.viewMode !== this.state.viewMode) {
+      this.scheduleViewModeButtonLoad();
       this.scheduleViewSyncTask();
     }
 
@@ -1471,6 +1522,16 @@ class MapViewer extends React.Component {
       this.syncViewTask = null;
     }
 
+    if (this.viewModeButtonTimeout) {
+      clearTimeout(this.viewModeButtonTimeout);
+      this.viewModeButtonTimeout = null;
+    }
+
+    if (this.uploadErrorTimeoutTask) {
+      clearTimeout(this.uploadErrorTimeoutTask);
+      this.uploadErrorTimeoutTask = null;
+    }
+
     window.removeEventListener('beforeunload', this.handlePageUnload);
     window.removeEventListener('pagehide', this.handlePageUnload);
     document.removeEventListener(
@@ -1771,28 +1832,21 @@ class MapViewer extends React.Component {
   renderViewModeSwitcher() {
     if (!this.view) return null;
 
+    const nextViewMode = this.state.viewMode === '3d' ? '2d' : '3d';
+    const viewModeLabel = this.state.viewMode === '3d' ? '2D' : '3D';
+    const viewModeAriaLabel =
+      this.state.viewMode === '3d' ? 'Switch to 2D view' : 'Switch to 3D view';
+
     return (
       <div className="viewmode-container esri-component esri-widget">
         <div className="viewmode-button-group">
           <button
-            className={classNames('viewmode-button', {
-              'active-widget': this.state.viewMode === '2d',
-            })}
-            onClick={() => this.switchViewMode('2d')}
+            className="viewmode-button viewmode-toggle-button"
+            onClick={() => this.switchViewMode(nextViewMode)}
             type="button"
-            aria-label="Switch to 2D view"
+            aria-label={viewModeAriaLabel}
           >
-            2D
-          </button>
-          <button
-            className={classNames('viewmode-button', {
-              'active-widget': this.state.viewMode === '3d',
-            })}
-            onClick={() => this.switchViewMode('3d')}
-            type="button"
-            aria-label="Switch to 3D view"
-          >
-            3D
+            {viewModeLabel}
           </button>
         </div>
       </div>
@@ -1876,20 +1930,18 @@ export const CheckUserID = ({ reference }) => {
       {reference.view && (
         <>
           {/* BookmarkWidget with user_id */}
-          {reference.view.type === '2d' && (
-            <BookmarkWidget
-              key={reference.getWidgetRenderKey('bookmark')}
-              view={reference.view}
-              map={reference.map}
-              layers={reference.state.layers}
-              mapViewer={reference}
-              userID={user_id}
-              hotspotData={reference.state.hotspotData}
-              bookmarkHandler={reference.bookmarkHandler}
-              bookmarkData={reference.state.bookmarkData}
-              isLoggedIn={isLoggedIn}
-            />
-          )}
+          <BookmarkWidget
+            key={reference.getWidgetRenderKey('bookmark')}
+            view={reference.view}
+            map={reference.map}
+            layers={reference.state.layers}
+            mapViewer={reference}
+            userID={user_id}
+            hotspotData={reference.state.hotspotData}
+            bookmarkHandler={reference.bookmarkHandler}
+            bookmarkData={reference.state.bookmarkData}
+            isLoggedIn={isLoggedIn}
+          />
 
           {/* MenuWidget with user_id */}
           <MenuWidget

package/src/components/MapViewer/MenuWidget.jsx

@@ -2613,36 +2613,44 @@ class MenuWidget extends React.Component {
     if (!layer || layer.type !== 'wmts') {
       return true;
     }
+    const serviceData = layer.ViewService || layer.url || '';
+    if (!serviceData) {
+      return !isSceneViewActive;
+    }
     const activeLayerData = layer.activeLayer || {};
-    const layerId = activeLayerData.id;
-    if (!layerId) {
+    let layerId = activeLayerData.id;
+
+    this.xml = null;
+    await this.getCapabilities(serviceData, 'WMTS');
+    if (!this.xml) {
       return !isSceneViewActive;
     }
+    const wmtsLayersData = this.parseWMTSLayers(this.xml);
+    const selectedWmtsLayerData = this.resolveWmtsLayerData(
+      wmtsLayersData,
+      layerId ? { [layerId]: true } : {},
+    );
+    if (!selectedWmtsLayerData || !selectedWmtsLayerData.id) {
+      return !isSceneViewActive;
+    }
+    layerId = selectedWmtsLayerData.id;
+    const reconciledActiveLayerData = {
+      id: selectedWmtsLayerData.id,
+      title: selectedWmtsLayerData.title || selectedWmtsLayerData.id,
+    };
 
     if (isSceneViewActive) {
       if (spatialReference) {
         layer.spatialReference = spatialReference;
       }
-      if (activeLayerData.tileMatrixSetId) {
-        const { tileMatrixSetId, ...sceneActiveLayerData } = activeLayerData;
-        layer.activeLayer = sceneActiveLayerData;
-      }
+      layer.activeLayer = reconciledActiveLayerData;
       return true;
     }
 
-    const serviceData = layer.ViewService || layer.url || '';
-    if (!serviceData) {
-      return !isSceneViewActive;
-    }
     const cacheData = serviceData + '::' + layerId;
     let settingsData = this.wmtsSettingsData[cacheData];
 
     if (!settingsData) {
-      this.xml = null;
-      await this.getCapabilities(serviceData, 'WMTS');
-      if (!this.xml) {
-        return !isSceneViewActive;
-      }
       const tileMatrixSetId = this.resolveWmtsSettingsData(
         this.xml,
         layerId,
@@ -2658,15 +2666,98 @@ class MenuWidget extends React.Component {
 
     if (settingsData && settingsData.tileMatrixSetId) {
       layer.activeLayer = {
-        ...activeLayerData,
+        ...reconciledActiveLayerData,
         tileMatrixSetId: settingsData.tileMatrixSetId,
       };
       return true;
     }
 
+    layer.activeLayer = reconciledActiveLayerData;
+
     return !isSceneViewActive;
   }
 
+  resolveWmtsActiveLayerData(layerData) {
+    if (!layerData || typeof layerData !== 'object') {
+      return null;
+    }
+    const activeLayerData = layerData.activeLayer;
+    if (!activeLayerData || typeof activeLayerData !== 'object') {
+      return null;
+    }
+    const activeLayerId =
+      typeof activeLayerData.id === 'string' ? activeLayerData.id.trim() : '';
+    if (!activeLayerId) {
+      return null;
+    }
+    const activeLayerTitle =
+      typeof activeLayerData.title === 'string' && activeLayerData.title.trim()
+        ? activeLayerData.title.trim()
+        : activeLayerId;
+    return {
+      id: activeLayerId,
+      title: activeLayerTitle,
+    };
+  }
+
+  refreshWmtsLayerData(layerId) {
+    if (!layerId || !this.layers || !this.layers[layerId] || !WMTSLayer) {
+      return false;
+    }
+    const currentLayerData = this.layers[layerId];
+    if (currentLayerData.type !== 'wmts') {
+      return false;
+    }
+    const activeLayerData = this.resolveWmtsActiveLayerData(currentLayerData);
+    if (!activeLayerData) {
+      return false;
+    }
+
+    const nextLayerData = new WMTSLayer({
+      id: currentLayerData.id || layerId,
+      url: currentLayerData.url,
+      title: currentLayerData.title || '',
+      _wmtsTitle: currentLayerData._wmtsTitle,
+      serviceMode: currentLayerData.serviceMode || 'KVP',
+      spatialReference:
+        this.view?.spatialReference || currentLayerData.spatialReference,
+      activeLayer: activeLayerData,
+      ViewService: currentLayerData.ViewService || currentLayerData.url,
+      customLayerParameters: currentLayerData.customLayerParameters || {
+        SHOWLOGO: false,
+      },
+    });
+
+    const customKeys = [
+      'isTimeSeries',
+      'fields',
+      'DatasetId',
+      'DatasetTitle',
+      'ProductId',
+      'StaticImageLegend',
+      'LayerTitle',
+      'DatasetDownloadInformation',
+      'datasetDownloadInformation',
+      'ServiceDataUrl',
+      'LayerId',
+      'featureInfoUrl',
+    ];
+
+    customKeys.forEach((key) => {
+      if (currentLayerData[key] !== undefined) {
+        nextLayerData[key] = currentLayerData[key];
+      }
+    });
+
+    if (typeof currentLayerData.opacity === 'number') {
+      nextLayerData.opacity = currentLayerData.opacity;
+    }
+    nextLayerData.visible = Boolean(currentLayerData.visible);
+
+    this.layers[layerId] = nextLayerData;
+    return true;
+  }
+
   resolveRequestConfig(xml) {
     let doc = xml;
     try {
@@ -2785,7 +2876,26 @@ class MenuWidget extends React.Component {
     );
   }
 
+  isSceneTilingError(error) {
+    const errorName = String((error && error.name) || '').toLowerCase();
+    const message = String((error && error.message) || '').toLowerCase();
+    return (
+      errorName.includes('layerview:no-compatible-tiling-scheme') ||
+      message.includes('no-compatible-tiling-scheme') ||
+      message.includes(
+        'none of the tiling schemes supported by the service are compatible with the scene',
+      ) ||
+      message.includes('wmts layer is not compatible with current sceneview')
+    );
+  }
+
   resolveUploadErrorType(error) {
+    if (this.isNoGeometryError(error)) {
+      return 'noGeometryError';
+    }
+    if (this.isSceneTilingError(error)) {
+      return 'sceneViewTilingError';
+    }
     const detailsFromRoot =
       error && error.details && Array.isArray(error.details)
         ? error.details
@@ -3419,11 +3529,7 @@ class MenuWidget extends React.Component {
         resourceLayers[0].fullExtent = bboxData;
       }
     } catch (error) {
-      if (this.isNoGeometryError(error)) {
-        this.props.uploadFileErrorHandler('noGeometryError');
-      } else {
-        this.props.uploadFileErrorHandler();
-      }
+      this.props.uploadFileErrorHandler(this.resolveUploadErrorType(error));
       return;
     }
 
@@ -3477,6 +3583,35 @@ class MenuWidget extends React.Component {
           resourceLayer.ViewService = (viewService || '').trim();
         }
 
+        const isSceneUploadValidation =
+          this.view &&
+          this.view.type === '3d' &&
+          (serviceType === 'WMS' || serviceType === 'WMTS');
+
+        if (isSceneUploadValidation) {
+          try {
+            this.map.add(resourceLayer);
+            await this.view.whenLayerView(resourceLayer);
+          } catch (error) {
+            try {
+              if (this.map.findLayerById(resourceLayer.id)) {
+                this.map.remove(resourceLayer);
+              }
+            } catch (e) {}
+            if (this.isSceneTilingError(error)) {
+              this.props.uploadFileErrorHandler('sceneViewTilingError');
+              continue;
+            }
+            throw error;
+          }
+
+          try {
+            if (this.map.findLayerById(resourceLayer.id)) {
+              this.map.remove(resourceLayer);
+            }
+          } catch (e) {}
+        }
+
         const layerSignatureData = `${(
           resourceLayer.ViewService || ''
         ).trim()}::${resourceLayer.LayerId}`;
@@ -3512,11 +3647,7 @@ class MenuWidget extends React.Component {
 
         this.props.onServiceChange();
       } catch (error) {
-        if (this.isNoGeometryError(error)) {
-          this.props.uploadFileErrorHandler('noGeometryError');
-        } else {
-          this.props.uploadFileErrorHandler();
-        }
+        this.props.uploadFileErrorHandler(this.resolveUploadErrorType(error));
         return;
       }
     }
@@ -3795,6 +3926,14 @@ class MenuWidget extends React.Component {
         const checkedLayers =
           JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
         const isChecked = checkedLayers.includes(layer.LayerId);
+        const serviceType =
+          layer.type === 'wmts'
+            ? 'WMTS'
+            : layer.type === 'wms'
+            ? 'WMS'
+            : layer.type === 'geojson'
+            ? 'WFS'
+            : 'WMS';
 
         // Create a simplified object for storage
         return {
@@ -3816,9 +3955,18 @@ class MenuWidget extends React.Component {
           })),
           ViewService: layer.ViewService,
           LayerId: layer.LayerId,
+          serviceType: serviceType,
+          activeLayer:
+            serviceType === 'WMTS' && layer.activeLayer
+              ? {
+                  id: layer.activeLayer.id,
+                  title: layer.activeLayer.title,
+                  tileMatrixSetId: layer.activeLayer.tileMatrixSetId,
+                }
+              : null,
           visibility: layer.visible !== false,
           opacity: layer.opacity || 1,
-          checked: isChecked || layer.checked || false,
+          checked: isChecked,
         };
       });
 
@@ -3839,26 +3987,65 @@ class MenuWidget extends React.Component {
         if (savedServices && Array.isArray(savedServices)) {
           // Process saved services to recreate actual layer objects
           const recreatedLayers = await Promise.all(
-            savedServices.map(async (serviceData) => {
+            savedServices.map(async (serviceData, serviceIndex) => {
               try {
-                // Create a new WMSLayer with the saved properties
-                const newLayer = new WMSLayer(serviceData);
+                const resolveServiceType =
+                  serviceData.serviceType ||
+                  (typeof serviceData.ViewService === 'string' &&
+                  serviceData.ViewService.toLowerCase().includes('wmts')
+                    ? 'WMTS'
+                    : 'WMS');
+                const resolvedLayerId =
+                  serviceData.LayerId ||
+                  serviceData.id ||
+                  `user_service_${serviceIndex}`;
+                const newLayer =
+                  resolveServiceType === 'WMTS'
+                    ? new WMTSLayer({
+                        id: resolvedLayerId,
+                        url: serviceData.url || serviceData.ViewService,
+                        title: serviceData.title || '',
+                        spatialReference: this.view?.spatialReference,
+                        serviceMode: 'KVP',
+                        activeLayer: serviceData.activeLayer || undefined,
+                        ViewService:
+                          serviceData.ViewService || serviceData.url || '',
+                      })
+                    : new WMSLayer({
+                        id: resolvedLayerId,
+                        url: serviceData.url || serviceData.ViewService,
+                        featureInfoFormat:
+                          serviceData.featureInfoFormat || 'text/html',
+                        featureInfoUrl:
+                          serviceData.featureInfoUrl ||
+                          serviceData.url ||
+                          serviceData.ViewService,
+                        title: serviceData.title || '',
+                        legendEnabled: serviceData.legendEnabled,
+                        sublayers: serviceData.sublayers,
+                        ViewService:
+                          serviceData.ViewService || serviceData.url || '',
+                      });
 
                 // Set visibility property based on saved value
                 newLayer.visible = serviceData.visibility !== false;
+                newLayer.LayerId = resolvedLayerId;
+                if (serviceData.description) {
+                  newLayer.description = serviceData.description;
+                }
 
                 // Remember the original checked state and visibility
                 newLayer.checked = serviceData.checked;
 
                 // Initialize visibleLayers for this layer
                 if (!this.visibleLayers) this.visibleLayers = {};
-                this.visibleLayers[serviceData.LayerId] =
+                this.visibleLayers[resolvedLayerId] =
                   serviceData.visibility !== false
                     ? ['fas', 'eye']
                     : ['fas', 'eye-slash'];
 
                 // Add to this.layers
-                this.layers[serviceData.LayerId] = newLayer;
+                this.layers[resolvedLayerId] = newLayer;
                 return newLayer;
               } catch (error) {
                 return null;
@@ -3893,9 +4080,11 @@ class MenuWidget extends React.Component {
 
                     // Then check the checkbox and call toggleLayer with a flag to preserve visibility
                     node.checked = true;
+                    node.dataset.preserveCheckedLayerState = 'true';
 
                     // Custom addition to toggleLayer to bypass visibility override
                     this.toggleLayerWithoutVisibilityReset(node);
+                    delete node.dataset.preserveCheckedLayerState;
                   }
                 }
               });
@@ -4162,6 +4351,8 @@ class MenuWidget extends React.Component {
       this.state.wmsUserServiceLayers.find(
         (layer) => layer.LayerId === elem.id,
       ) || null;
+    const preserveCheckedLayerState =
+      elem.dataset && elem.dataset.preserveCheckedLayerState === 'true';
     if (elem.checked && !userService) {
       this.findCheckedDatasetNoServiceToVisualize(elem);
     }
@@ -4173,6 +4364,7 @@ class MenuWidget extends React.Component {
       this.layers[elem.id]?.type === 'wmts' ||
       layerViewService.toLowerCase().includes('wmts');
     if (elem.checked && evaluateWmtsLayer) {
+      this.refreshWmtsLayerData(elem.id);
       const canApplyWmtsSettings = await this.applyWmtsSettingsData(
         this.layers[elem.id],
         this.view?.spatialReference,
@@ -4181,7 +4373,9 @@ class MenuWidget extends React.Component {
       if (!canApplyWmtsSettings) {
         elem.checked = false;
         this.layers[elem.id].visible = false;
-        this.deleteCheckedLayer(elem.id);
+        if (!preserveCheckedLayerState) {
+          this.deleteCheckedLayer(elem.id);
+        }
         delete this.activeLayersJSON[elem.id];
         if (this.visibleLayers) {
           delete this.visibleLayers[elem.id];
@@ -4200,7 +4394,9 @@ class MenuWidget extends React.Component {
         try {
           await this.layers[elem.id].load();
         } catch (error) {
-          this.processUnsupportedWmtsLayer(elem);
+          this.processUnsupportedWmtsLayer(elem, {
+            preserveCheckedLayerState,
+          });
           return;
         }
       }
@@ -4297,7 +4493,9 @@ class MenuWidget extends React.Component {
         try {
           await this.view.whenLayerView(this.layers[elem.id]);
         } catch (error) {
-          this.processUnsupportedWmtsLayer(elem);
+          this.processUnsupportedWmtsLayer(elem, {
+            preserveCheckedLayerState,
+          });
           return;
         }
       }
@@ -4395,8 +4593,15 @@ class MenuWidget extends React.Component {
       let mapLayer = this.map.findLayerById(elem.id);
       if (mapLayer) {
         if (!userService) {
-          if (mapLayer.type && mapLayer.type !== 'base-tile') mapLayer.clear();
-          mapLayer.destroy();
+          if (
+            mapLayer.type &&
+            mapLayer.type !== 'base-tile' &&
+            mapLayer.type !== 'wmts'
+          )
+            mapLayer.clear();
+          if (mapLayer.type !== 'wmts') {
+            mapLayer.destroy();
+          }
           this.map.remove(this.layers[elem.id]);
         } else {
           this.map.remove(mapLayer);
@@ -4429,13 +4634,16 @@ class MenuWidget extends React.Component {
     this.url = null;
   }
 
-  processUnsupportedWmtsLayer(elem) {
+  processUnsupportedWmtsLayer(elem, options = {}) {
+    const { preserveCheckedLayerState = false } = options;
     if (!elem || !this.layers || !this.layers[elem.id]) {
       return;
     }
     elem.checked = false;
     this.layers[elem.id].visible = false;
-    this.deleteCheckedLayer(elem.id);
+    if (!preserveCheckedLayerState) {
+      this.deleteCheckedLayer(elem.id);
+    }
     const mapLayer = this.map ? this.map.findLayerById(elem.id) : null;
     if (mapLayer) {
       try {
@@ -4454,6 +4662,7 @@ class MenuWidget extends React.Component {
     if (!this.props.download && this.props.hotspotData) {
       this.activeLayersToHotspotData(elem.id);
     }
+    this.props.uploadFileErrorHandler('sceneViewTilingError');
     this.renderHotspot();
     this.url = null;
   }
@@ -6795,7 +7004,9 @@ class MenuWidget extends React.Component {
             const node = document.getElementById(layer.LayerId);
             if (node) {
               node.checked = true;
+              node.dataset.preserveCheckedLayerState = 'true';
               this.toggleLayer(node);
+              delete node.dataset.preserveCheckedLayerState;
             }
           }
         });
@@ -7222,6 +7433,9 @@ class MenuWidget extends React.Component {
       for (var i = layers.length - 1; i >= 0; i--) {
         let layer = layers[i];
         let node = document.getElementById(layer);
+        const restoreLayerState = this.state.wmsUserServiceLayers.some(
+          (serviceLayer) => serviceLayer.LayerId === layer,
+        );
 
         if (node) {
           if (!node.checked) {
@@ -7229,7 +7443,13 @@ class MenuWidget extends React.Component {
             // click event fires toggleLayer()
             //node.dispatchEvent(event);
             node.checked = true;
+            if (restoreLayerState) {
+              node.dataset.preserveCheckedLayerState = 'true';
+            }
             this.toggleLayer(node);
+            if (restoreLayerState) {
+              delete node.dataset.preserveCheckedLayerState;
+            }
           }
 
           // set scroll position

package/src/components/MapViewer/UploadWidget.jsx

@@ -526,15 +526,15 @@ class UploadWidget extends React.Component {
 
   handleSelectLayers = async () => {
     const { serviceUrl, selectedServiceType } = this.state;
+    const trimmedServiceUrl = (serviceUrl || '').trim();
     if (
       selectedServiceType === 'WFS' &&
-      serviceUrl &&
-      serviceUrl.trim() !== '' &&
-      this.isValidUrl(serviceUrl) &&
-      this.isServiceTypeMatchingUrl(serviceUrl, selectedServiceType)
+      trimmedServiceUrl !== '' &&
+      this.isValidUrl(trimmedServiceUrl) &&
+      this.isServiceTypeMatchingUrl(trimmedServiceUrl, selectedServiceType)
     ) {
       const normalizedUrl = this.getNormalizedUrlForType(
-        serviceUrl,
+        trimmedServiceUrl,
         selectedServiceType,
       );
       await this.getCapabilities(normalizedUrl, selectedServiceType);
@@ -549,17 +549,17 @@ class UploadWidget extends React.Component {
 
   handleUploadService = async () => {
     const serviceUrl = this.state.serviceUrl;
+    const trimmedServiceUrl = (serviceUrl || '').trim();
     const selectedServiceType = this.state.selectedServiceType;
     const selectedFeatures = this.state.selectedFeatures;
     if (
       selectedServiceType &&
-      serviceUrl &&
-      serviceUrl.trim() !== '' &&
-      this.isValidUrl(serviceUrl) &&
-      this.isServiceTypeMatchingUrl(serviceUrl, selectedServiceType)
+      trimmedServiceUrl !== '' &&
+      this.isValidUrl(trimmedServiceUrl) &&
+      this.isServiceTypeMatchingUrl(trimmedServiceUrl, selectedServiceType)
     ) {
       const normalizedUrl = this.getNormalizedUrlForType(
-        serviceUrl,
+        trimmedServiceUrl,
         selectedServiceType,
       );
       const proxiedUrl = this.buildProxiedUrl(normalizedUrl);
@@ -1006,6 +1006,17 @@ class UploadWidget extends React.Component {
                       </div>
                     </>
                   )}
+                  {this.state.infoPopupType === 'sceneViewTilingError' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Incorrect tiling scheme for scene view. The service can
+                        still be used in 2D map view.
+                      </div>
+                    </>
+                  )}
                 </div>
               </div>
             </div>

package/src/components/MapViewer/css/ArcgisMap.css

@@ -103,9 +103,17 @@
 
 .viewmode-container {
   display: flex;
+  order: 9;
   padding: 0;
 }
 
+.viewmode-floating-container {
+  position: absolute;
+  z-index: 2;
+  right: 10px;
+  bottom: 20px;
+}
+
 .viewmode-button-group {
   display: flex;
 }
@@ -124,6 +132,31 @@
   border-left: 1px solid #dadada;
 }
 
+.viewmode-toggle-button {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none !important;
+  background-color: rgba(160, 177, 40, 0.8);
+  box-shadow: 0px 0px 4px 0px #dadada;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1.1rem;
+  outline: none;
+}
+
+.viewmode-toggle-button:hover,
+.viewmode-toggle-button:focus {
+  background-color: #7c8921;
+}
+
+@media only screen and (max-width: 767px) {
+  .viewmode-floating-container {
+    right: 10px;
+    bottom: 14px;
+  }
+}
+
 /* Basemap */
 .basemap-container {
   display: flex;
@@ -1812,7 +1845,7 @@ input[type='range']::-ms-track {
   position: absolute;
   display: flex;
   width: 19rem;
-  height: 60px;
+  min-height: 60px;
   /* justify-content: space-around; */
   padding: 0.6rem 0.8rem 0.8rem 0.8rem;
   background-color: white;
@@ -1831,6 +1864,9 @@ input[type='range']::-ms-track {
   /* flex: auto; */
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 div.map-container.popup-block {