@eeacms/volto-arcgis-block 0.1.340 → 0.1.342

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.342](https://github.com/eea/volto-arcgis-block/compare/0.1.341...0.1.342) - 20 March 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #909 from eea/CLMS-280000-FIX-DELETE-USER-SERVICE [Unai Bolivar - [`90458d4`](https://github.com/eea/volto-arcgis-block/commit/90458d4ea49c35960bf578e1053aa140874eb0e8)]
+- CLMS-28000 (bug): styles fixed and errors management in place [Unai Bolivar - [`9bfdcc8`](https://github.com/eea/volto-arcgis-block/commit/9bfdcc879043a27fd394277dbc7864637f4b7596)]
+- CLMS-28000 (bug): full extent for layer is working) [Unai Bolivar - [`88cb01f`](https://github.com/eea/volto-arcgis-block/commit/88cb01fd252cff11425871f2d3f712b9c0e4a9d7)]
+- CLMS-285179 (bug): At this commit I have recovered functionality doe loding and unloading the users wms services without losing control of the app. [Unai Bolivar - [`005846e`](https://github.com/eea/volto-arcgis-block/commit/005846efff3e6045dd15d711beb393b3fd213855)]
+- CLMS-285179 (bug): work in progress but going to load stash so this is a checkpoint save [Unai Bolivar - [`157ee6a`](https://github.com/eea/volto-arcgis-block/commit/157ee6a000810f069c12ce20141732f2e0b58546)]
+- CLMS-280000 (feat): user wms service layers appear in active layers tab. need to match the options to figma and set the correct actions for them. [Unai Bolivar - [`8a0f04c`](https://github.com/eea/volto-arcgis-block/commit/8a0f04c416b0067e27f1e34c1e5cf05f7f818b48)]
+- CLMS-280000 (feat): Services update mapviewer state to re upload the same url after deleting it previously now [Unai Bolivar - [`4c69979`](https://github.com/eea/volto-arcgis-block/commit/4c69979fa636601c1b2ad83e1a2d8df65bd5ed12)]
+- CLMS-284630 (bug): Default active remove bug solved [Urkorue - [`5ab8937`](https://github.com/eea/volto-arcgis-block/commit/5ab8937d6907e81766c53004d916898bf265464d)]
+- CLMS-280000 (feat): services load and delete from the map and menu. Need to update mapviewer state to re upload the same url after deleting it [Unai Bolivar - [`cec867a`](https://github.com/eea/volto-arcgis-block/commit/cec867a1550e841706e7ee5a1a0c282a7e3109ee)]
+- CLMS-280000 (feat): Component style is correct [Unai Bolivar - [`7b2eff5`](https://github.com/eea/volto-arcgis-block/commit/7b2eff5ff2254d14689ea648a4a7cc2f74692986)]
+### [0.1.341](https://github.com/eea/volto-arcgis-block/compare/0.1.340...0.1.341) - 6 March 2025
+
 ### [0.1.340](https://github.com/eea/volto-arcgis-block/compare/0.1.339...0.1.340) - 5 March 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -60,6 +60,7 @@ class MapViewer extends React.Component {
       layerLoading: false,
       layers: {},
       uploadedFile: true,
+      wmsServiceUrl: '',
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -72,6 +73,8 @@ class MapViewer extends React.Component {
     this.bookmarkHandler = this.bookmarkHandler.bind(this);
     this.prepackageHandler = this.prepackageHandler.bind(this);
     this.uploadFileHandler = this.uploadFileHandler.bind(this);
+    this.uploadFileErrorHandler = this.uploadFileErrorHandler.bind(this);
+    this.uploadUrlServiceHandler = this.uploadUrlServiceHandler.bind(this);
     //this.getTaxonomy = this.props.getTaxonomy.bind(this);
   }
 
@@ -97,20 +100,57 @@ class MapViewer extends React.Component {
     this.setState({ bookmarkData: newBookmarkData });
   }
 
+  // Function to remove circular references
+  removeCircularReferences(obj) {
+    const seen = new WeakSet();
+    return JSON.parse(
+      JSON.stringify(obj, (key, value) => {
+        if (typeof value === 'object' && value !== null) {
+          if (seen.has(value)) {
+            return;
+          }
+          seen.add(value);
+        }
+        return value;
+      }),
+    );
+  }
+
   activeLayersHandler(newActiveLayers) {
-    this.activeLayers = newActiveLayers;
-    mapStatus.activeLayers = newActiveLayers;
-    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    try {
+      const layersWithoutCircularReferences = this.removeCircularReferences(
+        newActiveLayers,
+      );
+      this.activeLayers = layersWithoutCircularReferences;
+      mapStatus.activeLayers = layersWithoutCircularReferences;
+      sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    } catch (error) {
+      //setup some sort of error message
+    }
   }
 
   setCenterState(centerStatus) {
     mapStatus.center = centerStatus;
-    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    try {
+      sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    } catch (e) {
+      if (e.name === 'QuotaExceededError') {
+        sessionStorage.clear();
+        sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+      }
+    }
   }
 
   setZoomState(zoomStatus) {
     mapStatus.zoom = zoomStatus;
-    sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    try {
+      sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+    } catch (e) {
+      if (e.name === 'QuotaExceededError') {
+        sessionStorage.clear();
+        sessionStorage.setItem('mapStatus', JSON.stringify(mapStatus));
+      }
+    }
   }
 
   recoverState() {
@@ -129,6 +169,33 @@ class MapViewer extends React.Component {
     this.setState({ uploadedFile: message });
   }
 
+  uploadFileErrorHandler = (error) => {
+    this.setState({
+      showInfoPopup: true,
+      infoPopupType: 'uploadError',
+    });
+    setTimeout(() => {
+      this.setState({
+        showInfoPopup: false,
+        infoPopupType: '',
+      });
+    }, 3000);
+  };
+
+  uploadUrlServiceHandler = (newUrl) => {
+    if (newUrl && typeof newUrl === 'string') {
+      this.setState({ wmsServiceUrl: newUrl });
+    } else {
+      //set popup error messsage
+      this.setState({ wmsServiceUrl: '' });
+    }
+  };
+
+  serviceAddedHandler = () => {
+    // Reset wmsServiceUrl without causing a new update of the children
+    this.setState({ wmsServiceUrl: '' });
+  };
+
   loader() {
     return loadModules([
       'esri/WebMap',
@@ -275,6 +342,13 @@ class MapViewer extends React.Component {
       sessionStorage.clear();
       sessionStorage.setItem('toc_panel_scrolls', toc_panel_scrolls);
     }
+    // if (
+    //   prevState.wmsServiceUrl !== this.state.wmsServiceUrl &&
+    //   this.state.wmsServiceUrl === ''
+    // ) {
+    //   // Reset wmsServiceUrl without causing a new update of the children
+    //   this.setState({ wmsServiceUrl: '' });
+    // }
   }
 
   componentWillUnmount() {
@@ -432,6 +506,10 @@ class MapViewer extends React.Component {
           prepackageHandler={this.prepackageHandler}
           uploadedFile={this.state.uploadedFile}
           uploadFileHandler={this.uploadFileHandler}
+          uploadUrlServiceHandler={this.uploadUrlServiceHandler}
+          wmsServiceUrl={this.state.wmsServiceUrl}
+          onServiceAdded={this.serviceAddedHandler}
+          uploadFileErrorHandler={this.uploadFileErrorHandler}
           //getTaxonomy={this.getTaxonomy}
         />
       ); //call conf
@@ -459,6 +537,9 @@ class MapViewer extends React.Component {
           view={this.view}
           map={this.map}
           mapViewer={this}
+          wmsServiceUrl={this.state.wmsServiceUrl}
+          uploadUrlServiceHandler={this.uploadUrlServiceHandler}
+          uploadfileErrorHandler={this.uploadFileErrorHandler}
         />
       );
   }

package/src/components/MapViewer/MenuWidget.jsx

@@ -412,6 +412,8 @@ class MenuWidget extends React.Component {
       draggedElements: [],
       popup: false,
       filterArrow: 'chevron-down',
+      wmsUserServiceLayers: [],
+      //wmsServiceUrl: this.props.wmsServiceUrl,
     };
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
@@ -429,6 +431,7 @@ class MenuWidget extends React.Component {
     this.getLimitScale = this.getLimitScale.bind(this);
     this.handleOpenPopup = this.handleOpenPopup.bind(this);
     this.filtersApplied = false;
+    this.filtersApplied = false;
     // add zoomend listener to map to show/hide zoom in message
     this.view.watch('stationary', (isStationary) => {
       let snowAndIceInSessionStorage = sessionStorage.getItem('snowAndIce');
@@ -549,6 +552,15 @@ class MenuWidget extends React.Component {
     );
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.wmsServiceUrl !== prevState.wmsServiceUrl) {
+      return {
+        wmsServiceUrl: nextProps.wmsServiceUrl,
+      };
+    }
+    return null;
+  }
+
   stringMatch(str1, str2) {
     if (!str1 || !str2) {
       return '';
@@ -982,6 +994,12 @@ class MenuWidget extends React.Component {
         this.props.bookmarkHandler(bookmarkData);
       });
     });
+
+    // Add "My Services" component to the UI
+    const myServicesComponent = this.createMyServicesComponent();
+    const myServicesContainer = document.createElement('div');
+    ReactDOM.render(myServicesComponent, myServicesContainer);
+    this.container.current.appendChild(myServicesContainer.firstChild);
   }
 
   setSliderTag(val) {
@@ -1135,6 +1153,10 @@ class MenuWidget extends React.Component {
         }
       }
     }
+
+    // Add "My Services" component
+    components.push(this.createMyServicesComponent());
+
     return components;
   }
 
@@ -1935,6 +1957,252 @@ class MenuWidget extends React.Component {
     }
   }
 
+  async handleNewMapServiceLayer(viewService) {
+    // Check if the URL is already in state to prevent duplicates
+    if (
+      this.state.wmsUserServiceLayers.some((layer) => layer.url === viewService)
+    ) {
+      return;
+    }
+
+    // CREATE A TEMPORARY LAYER OBJECT TO EXTRACT DATA
+    let resourceLayer;
+    try {
+      resourceLayer = new WMSLayer({
+        url: viewService,
+      });
+    } catch (error) {
+      // Set a popup error message in here
+      this.props.uploadFileErrorHandler();
+      return;
+    }
+
+    const legendRequest =
+      'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
+    let layerId, layerObj;
+
+    await resourceLayer.load().then(() => {
+      // EXTRACT DATA FOR NEW LAYER REQUEST
+      let { featureInfoUrl, title } = resourceLayer;
+      layerId = title.toUpperCase().replace(/ /g, '_');
+      const constructedSublayers = resourceLayer.sublayers?.items?.map(
+        (sublayer) => {
+          const { index, name, title, legendUrl, featureInfoUrl } = sublayer;
+          return {
+            index,
+            name,
+            title,
+            popupEnabled: true,
+            queryable: true,
+            visible: true,
+            legendEnabled: true,
+            legendUrl: legendUrl
+              ? legendUrl
+              : viewService + legendRequest + name,
+            featureInfoUrl: featureInfoUrl ? featureInfoUrl : viewService,
+          };
+        },
+      );
+
+      layerObj = {
+        url: viewService,
+        featureInfoFormat: 'text/html',
+        featureInfoUrl: featureInfoUrl ? featureInfoUrl : viewService,
+        title,
+        legendEnabled: true,
+        sublayers: constructedSublayers,
+        ViewService: viewService,
+        LayerId: layerId,
+      };
+      return layerObj;
+    });
+
+    // DESTROY THE TEMPORARY LAYER OBJECT
+    resourceLayer.destroy();
+    resourceLayer = null; // Important: clear the reference to the old layer
+
+    const { LayerId } = layerObj;
+
+    // Check if the layer already exists in this.layers before adding
+    if (!this.layers[LayerId]) {
+      try {
+        // Create and add the new layer
+        this.layers[LayerId] = new WMSLayer(layerObj);
+
+        // Update state to include the new layer, which will trigger componentDidUpdate
+        this.setState((prevState) => {
+          return {
+            wmsUserServiceLayers: [
+              ...prevState.wmsUserServiceLayers,
+              this.layers[LayerId],
+            ],
+          };
+        });
+
+        this.props.onServiceAdded();
+
+        // Add the layer to the map
+        const node = document.getElementById(LayerId);
+        if (node) {
+          node.checked = true;
+          this.toggleLayer(node);
+        }
+      } catch (error) {
+        // Set a popup error message in here
+        this.props.uploadFileErrorHandler();
+        return;
+      }
+    }
+  }
+
+  createMyServicesComponent() {
+    let dropdowns = document.querySelectorAll('.map-menu-dropdown');
+    let i = dropdowns.length === 0 ? 0 : dropdowns.length - 1;
+    let componentId = `component_${i}`;
+    let dropdownId = `dropdown_${i}`;
+
+    // Create "My Services" component from the start and set its display to none
+    let myServicesStyle =
+      this.state.wmsUserServiceLayers.length > 0 ? {} : { display: 'none' };
+    return (
+      <div
+        className="map-menu-dropdown"
+        id={componentId}
+        key="a5"
+        style={myServicesStyle}
+      >
+        <div
+          id={dropdownId}
+          className="ccl-expandable__button"
+          aria-expanded="false"
+          onClick={this.toggleDropdownContent.bind(this)}
+          onKeyDown={this.toggleDropdownContent.bind(this)}
+          tabIndex="0"
+          role="button"
+        >
+          <div className="dropdown-icon">
+            <FontAwesomeIcon icon={['fas', 'caret-right']} />
+          </div>
+          {<span>{'My Service'}</span>}
+        </div>
+        <div className="map-menu-components-container" id="map-menu-services" />
+      </div>
+    );
+  }
+
+  createUserServices(serviceLayers) {
+    const fieldset = document.getElementById('map-menu-services');
+    if (!fieldset) return;
+
+    // Create an array of all layer elements
+    const layerElements = serviceLayers.map((layer, index) => {
+      const { LayerId, title, description } = layer;
+      const parentIndex = this.layers[layer.id];
+      const checkboxId = LayerId;
+
+      return (
+        <div className="map-menu-dataset-dropdown">
+          <fieldset className="ccl-fieldset">
+            <div className="ccl-expandable__button" aria-expanded="false">
+              <div className="dropdown-icon">
+                <div className="ccl-form map-dataset-checkbox">
+                  <div
+                    className="ccl-form-group map-menu-service"
+                    key={`service_layer_${LayerId}`}
+                  >
+                    <input
+                      type="checkbox"
+                      id={checkboxId}
+                      parentid={parentIndex}
+                      layerid={LayerId}
+                      name="layerCheckbox"
+                      value="name"
+                      className="ccl-checkbox ccl-required ccl-form-check-input"
+                      title={layer.title}
+                      onChange={(e) => {
+                        this.toggleLayer(e.target);
+                      }}
+                    />
+                    <label
+                      className="ccl-form-check-label"
+                      htmlFor={checkboxId}
+                    >
+                      <legend className="ccl-form-legend">
+                        {description ? (
+                          <Popup
+                            trigger={<span>{title}</span>}
+                            content={description}
+                            basic
+                            className="custom"
+                            style={{ transform: 'translateX(-4rem)' }}
+                          />
+                        ) : (
+                          <span>{title || `Layer ${index + 1}`}</span>
+                        )}
+                      </legend>
+                    </label>
+                    <span
+                      className="map-menu-icon map-menu-service-icon"
+                      onClick={() => this.deleteServiceLayer(LayerId)}
+                      onKeyDown={() => this.deleteServiceLayer(LayerId)}
+                      tabIndex="0"
+                      role="button"
+                    >
+                      <FontAwesomeIcon icon={['fas', 'trash']} />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      );
+    });
+
+    // Render all layers at once to avoid overwriting previous layers
+    ReactDOM.render(layerElements, fieldset);
+  }
+
+  deleteServiceLayer(elemId) {
+    // Remove the layer from the map
+    const node = document.getElementById(elemId);
+    if (node) {
+      node.checked = false;
+      this.toggleLayer(node);
+    }
+
+    // Delete from layers object
+    if (this.layers[elemId]) delete this.layers[elemId];
+
+    // Remove from ArcGIS map
+    let removeLayer = this.props.map.findLayerById(elemId) || null;
+    if (removeLayer) {
+      removeLayer.clear();
+      removeLayer.destroy();
+      this.props.map.remove(removeLayer);
+      removeLayer = null;
+    }
+
+    // Update state to trigger componentDidUpdate
+    this.setState((prevState) => {
+      const layerExists = prevState.wmsUserServiceLayers.some(
+        (layer) => layer.LayerId === elemId,
+      );
+
+      if (layerExists) {
+        const newWmsUserServiceLayers = prevState.wmsUserServiceLayers.filter(
+          (layer) => layer.LayerId !== elemId,
+        );
+        return {
+          wmsUserServiceLayers: newWmsUserServiceLayers,
+        };
+      }
+
+      // If layer doesn't exist, return unchanged state to avoid issues
+      return null;
+    });
+  }
+
   /**
    * Method to show/hide a layer. Update checkboxes from dataset and products
    * @param {*} elem Is the checkbox
@@ -2140,17 +2408,23 @@ class MenuWidget extends React.Component {
   }
 
   async toggleLayer(elem) {
-    if (elem.checked) {
+    const userService =
+      this.state.wmsUserServiceLayers.find(
+        (layer) => layer.LayerId === elem.id,
+      ) || null;
+    if (elem.checked && !userService) {
       this.findCheckedDatasetNoServiceToVisualize(elem);
     }
     if (this.layers[elem.id] === undefined) return;
     if (!this.visibleLayers) this.visibleLayers = {};
     if (!this.timeLayers) this.timeLayers = {};
-    let parentId = elem.getAttribute('parentid');
-    let productContainerId = document
-      .getElementById(parentId)
-      .closest('.map-menu-product-dropdown')
-      .getAttribute('productid');
+    let parentId = !userService ? elem.getAttribute('parentid') : null;
+    let productContainerId = !userService
+      ? document
+          .getElementById(parentId)
+          .closest('.map-menu-product-dropdown')
+          .getAttribute('productid')
+      : null;
 
     let group = this.getGroup(elem);
     if (elem.checked) {
@@ -2158,7 +2432,8 @@ class MenuWidget extends React.Component {
       if (
         this.props.download ||
         this.location.search.includes('product=') ||
-        this.location.search.includes('dataset=')
+        this.location.search.includes('dataset=') ||
+        !userService
       ) {
         if (
           this.extentInitiated === false &&
@@ -2171,8 +2446,9 @@ class MenuWidget extends React.Component {
         }
       }
       if (
-        (elem.id.includes('all_lcc') || elem.id.includes('all_present')) &&
-        (this.layers['lc_filter'] || this.layers['lcc_filter'])
+        ((elem.id.includes('all_lcc') || elem.id.includes('all_present')) &&
+          (this.layers['lc_filter'] || this.layers['lcc_filter'])) ||
+        !userService
       ) {
         let bookmarkHotspotFilter = localStorage.getItem(
           'bookmarkHotspotFilter',
@@ -2249,14 +2525,14 @@ class MenuWidget extends React.Component {
       if (nuts) {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
-      this.checkForHotspots(elem, productContainerId);
+      if (!userService) this.checkForHotspots(elem, productContainerId);
     } else {
       sessionStorage.removeItem('downloadButtonClicked');
       sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
       this.layers[elem.id].opacity = 1;
       this.layers[elem.id].visible = false;
-      this.deleteFilteredLayer(elem.id);
+      if (!userService) this.deleteFilteredLayer(elem.id);
       let mapLayer = this.map.findLayerById(elem.id);
       if (mapLayer) {
         if (mapLayer.type && mapLayer.type !== 'base-tile') mapLayer.clear();
@@ -2267,7 +2543,7 @@ class MenuWidget extends React.Component {
       delete this.visibleLayers[elem.id];
       delete this.timeLayers[elem.id];
     }
-    this.updateCheckDataset(parentId);
+    if (!userService) this.updateCheckDataset(parentId);
     this.layersReorder();
     this.checkInfoWidget();
     // toggle custom legend for WMTS and TMS
@@ -2482,7 +2758,6 @@ class MenuWidget extends React.Component {
     for (var i in this.activeLayersJSON) {
       activeLayersArray.push(this.activeLayersJSON[i]);
     }
-
     if (!activeLayersArray.length) {
       messageLayers && (messageLayers.style.display = 'block');
     } else messageLayers && (messageLayers.style.display = 'none');
@@ -2895,11 +3170,19 @@ class MenuWidget extends React.Component {
   }
 
   async FullExtentDataset(elem) {
+    const serviceLayer = this.state.wmsUserServiceLayers.find(
+      (layer) => layer.LayerId === elem.id,
+    );
+
+    if (!serviceLayer) {
+      this.findCheckedDataset(elem);
+    } else {
+      this.url = serviceLayer.ViewService;
+    }
     let BBoxes = {};
-    this.findCheckedDataset(elem);
     if (this.url?.toLowerCase().endsWith('mapserver')) {
       BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
-    } else if (this.url?.toLowerCase().includes('wms')) {
+    } else if (this.url?.toLowerCase().includes('wms') || serviceLayer) {
       await this.getCapabilities(this.url, 'wms');
       BBoxes = this.parseBBOXWMS(this.xml);
     } else if (this.url?.toLowerCase().includes('wmts')) {
@@ -2928,18 +3211,40 @@ class MenuWidget extends React.Component {
   }
 
   async fullExtent(elem) {
-    this.findCheckedDataset(elem);
+    const serviceLayer = this.state.wmsUserServiceLayers.find(
+      (layer) => layer.LayerId === elem.id,
+    );
+
+    if (!serviceLayer) {
+      this.findCheckedDataset(elem);
+    } else {
+      this.productId = null;
+      this.url = serviceLayer.ViewService;
+    }
     let BBoxes = {};
     let firstLayer;
+    let landCoverAndLandUseMapping = document.querySelector('#component_0');
+    let productIds = [];
+    if (landCoverAndLandUseMapping) {
+      const productElements = landCoverAndLandUseMapping.querySelectorAll(
+        '.map-menu-product-dropdown',
+      );
+      productElements.forEach((productElement) => {
+        const productId = productElement.getAttribute('productid');
+        if (productId) {
+          productIds.push(productId);
+        }
+      });
+    }
 
-    if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
+    if (this.productId?.includes('333e4100b79045daa0ff16466ac83b7f')) {
       //global dynamic landCover
       this.findDatasetBoundingBox(elem);
 
       BBoxes = this.parseBBOXJSON(this.dataBBox);
     } else if (
-      this.productId.includes('fe8209dffe13454891cea05998c8e456') || //Low Resolution Vegetation Parameters
-      this.productId.includes('8914fde2241a4035818af8f0264fd55e') // Water Parameters
+      this.productId?.includes('fe8209dffe13454891cea05998c8e456') || // Low Resolution Vegetation Parameters
+      this.productId?.includes('8914fde2241a4035818af8f0264fd55e') // Water Parameters
     ) {
       if (
         this.layers[elem.id].fullExtents &&
@@ -2958,7 +3263,7 @@ class MenuWidget extends React.Component {
       }
     } else if (this.url?.toLowerCase().endsWith('mapserver')) {
       BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
-    } else if (this.url?.toLowerCase().includes('wms')) {
+    } else if (this.url?.toLowerCase().includes('wms') || serviceLayer) {
       await this.getCapabilities(this.url, 'wms');
       BBoxes = this.parseBBOXWMS(this.xml);
     } else if (this.url?.toLowerCase().includes('wmts')) {
@@ -2973,72 +3278,87 @@ class MenuWidget extends React.Component {
     ) {
       if (
         this.extentInitiated === false &&
-        !this.productId.includes('333e4100b79045daa0ff16466ac83b7f') &&
+        !this.productId?.includes('333e4100b79045daa0ff16466ac83b7f') &&
         this.location.search !== ''
       ) {
         firstLayer = BBoxes.dataset;
-      } else if (this.productId.includes('130299ac96e54c30a12edd575eff80f7')) {
+      }
+      if (productIds?.includes(this.productId)) {
+        // Your code here for when productIds includes this.productId
         let str = elem.parentNode.outerHTML;
-        let match = str.match(/layerid="(\d+)"/);
+        let match = str.match(/layerid="([a-zA-Z0-9_:-]+)"/);
         let layerid = match ? match[1] : null;
         if (layerid === null || layerid === undefined) return;
-        if (this.url?.toLowerCase().endsWith('mapserver')) {
-          switch (layerid) {
-            case '1':
-              firstLayer = this.findBBoxById(BBoxes, 13);
-              break;
-            case '2':
-              firstLayer = this.findBBoxById(BBoxes, 12);
-              break;
-            case '3':
-              firstLayer = this.findBBoxById(BBoxes, 11);
-              break;
-            case '4':
-              firstLayer = this.findBBoxById(BBoxes, 10);
-              break;
-            case '5':
-              firstLayer = this.findBBoxById(BBoxes, 9);
-              break;
-            case '7':
-              firstLayer = this.findBBoxById(BBoxes, 7);
-              break;
-            case '8':
-              firstLayer = this.findBBoxById(BBoxes, 6);
-              break;
-            case '9':
-              firstLayer = this.findBBoxById(BBoxes, 5);
-              break;
-            case '10':
-              firstLayer = this.findBBoxById(BBoxes, 4);
-              break;
-            case '11':
-              firstLayer = this.findBBoxById(BBoxes, 3);
-              break;
-            case '12':
-              firstLayer = this.findBBoxById(BBoxes, 0);
-              break;
-            case '13':
-              firstLayer = this.findBBoxById(BBoxes, 1);
-              break;
-            default:
-              return;
-          }
-        } else {
-          if (layerid === '12' || layerid === '13') {
-            firstLayer = BBoxes['dataset'];
-          } else if (layerid === '1' || layerid === '7') {
-            firstLayer = BBoxes[Object.keys(BBoxes)[0]];
-          } else if (layerid === '2' || layerid === '8') {
-            firstLayer = BBoxes[Object.keys(BBoxes)[1]];
-          } else if (layerid === '3' || layerid === '9') {
-            firstLayer = BBoxes[Object.keys(BBoxes)[2]];
-          } else if (layerid === '4' || layerid === '10') {
-            firstLayer = BBoxes[Object.keys(BBoxes)[3]];
-          } else if (layerid === '5' || layerid === '11') {
-            firstLayer = BBoxes[Object.keys(BBoxes)[4]];
+        if (
+          this.productId?.includes('130299ac96e54c30a12edd575eff80f7') &&
+          layerid.length <= 2
+        ) {
+          //let match = str.match(/layerid="(\d+)"/);
+          //let layerid = match ? match[1] : null;
+          if (this.url?.toLowerCase().endsWith('mapserver')) {
+            switch (layerid) {
+              case '1':
+                firstLayer = this.findBBoxById(BBoxes, 13);
+                break;
+              case '2':
+                firstLayer = this.findBBoxById(BBoxes, 12);
+                break;
+              case '3':
+                firstLayer = this.findBBoxById(BBoxes, 11);
+                break;
+              case '4':
+                firstLayer = this.findBBoxById(BBoxes, 10);
+                break;
+              case '5':
+                firstLayer = this.findBBoxById(BBoxes, 9);
+                break;
+              case '7':
+                firstLayer = this.findBBoxById(BBoxes, 7);
+                break;
+              case '8':
+                firstLayer = this.findBBoxById(BBoxes, 6);
+                break;
+              case '9':
+                firstLayer = this.findBBoxById(BBoxes, 5);
+                break;
+              case '10':
+                firstLayer = this.findBBoxById(BBoxes, 4);
+                break;
+              case '11':
+                firstLayer = this.findBBoxById(BBoxes, 3);
+                break;
+              case '12':
+                firstLayer = this.findBBoxById(BBoxes, 0);
+                break;
+              case '13':
+                firstLayer = this.findBBoxById(BBoxes, 1);
+                break;
+              default:
+                return;
+            }
           } else {
-            firstLayer = BBoxes['dataset'];
+            if (layerid === '12' || layerid === '13') {
+              firstLayer = BBoxes['dataset'];
+            } else if (layerid === '1' || layerid === '7') {
+              firstLayer = BBoxes[Object.keys(BBoxes)[0]];
+            } else if (layerid === '2' || layerid === '8') {
+              firstLayer = BBoxes[Object.keys(BBoxes)[1]];
+            } else if (layerid === '3' || layerid === '9') {
+              firstLayer = BBoxes[Object.keys(BBoxes)[2]];
+            } else if (layerid === '4' || layerid === '10') {
+              firstLayer = BBoxes[Object.keys(BBoxes)[3]];
+            } else if (layerid === '5' || layerid === '11') {
+              firstLayer = BBoxes[Object.keys(BBoxes)[4]];
+            } else {
+              firstLayer = BBoxes['dataset'];
+            }
           }
+        } else if (layerid.length > 2) {
+          firstLayer = BBoxes[layerid];
+        } else if (
+          this.productId?.includes('333e4100b79045daa0ff16466ac83b7f')
+        ) {
+          firstLayer = BBoxes[0];
         }
       } else if (
         elem.id.includes('all_present') ||
@@ -3047,11 +3367,11 @@ class MenuWidget extends React.Component {
         elem.id.includes('protected_areas')
       ) {
         firstLayer = BBoxes['all_present_lc_a_pol'];
+      } else if (serviceLayer) {
+        // Full extent treatment for service layers
+        firstLayer = BBoxes['dataset'];
       } else {
-        // Takes the BBOX corresponding to the layer.
-        if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
-          firstLayer = BBoxes[0];
-        } else firstLayer = BBoxes[elem.attributes.layerid.value];
+        firstLayer = BBoxes[elem.attributes.layerid.value];
       }
 
       let myExtent = new Extent({
@@ -3588,8 +3908,15 @@ class MenuWidget extends React.Component {
     }, 100);
   }
 
+  waitForDataFill(obj) {
+    while (obj.length === 0) {
+      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+    }
+    return obj;
+  }
+
   setLegendOpacity() {
-    const collection = document.getElementsByClassName('esri-legend__symbol');
+    let collection = document.getElementsByClassName('esri-legend__symbol');
 
     Array.prototype.forEach.call(collection, function (element) {
       let img = {};
@@ -3667,7 +3994,15 @@ class MenuWidget extends React.Component {
    * @param {*} id id from elem
    */
   eyeLayer(elem) {
-    this.findCheckedDataset(elem);
+    // Check if this is a user service layer
+    const isUserServiceLayer = this.state.wmsUserServiceLayers.some(
+      (layer) => layer.LayerId === elem.id,
+    );
+
+    // Only call findCheckedDataset for non-service layers (this method looks for parent datasets)
+    if (!isUserServiceLayer) {
+      this.findCheckedDataset(elem);
+    }
     if (
       this.visibleLayers[elem.id] &&
       this.visibleLayers[elem.id][1] === 'eye'
@@ -3713,7 +4048,11 @@ class MenuWidget extends React.Component {
       this.visibleLayers[elem.id] = ['fas', 'eye'];
     }
 
-    if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
+    if (
+      !isUserServiceLayer &&
+      this.productId &&
+      this.productId.includes('333e4100b79045daa0ff16466ac83b7f')
+    ) {
       // global dynamic land cover
       if (this.visibleLayers[elem.id][1] === 'eye-slash') {
         this.map.findLayerById(elem.id).visible = false;
@@ -3739,9 +4078,44 @@ class MenuWidget extends React.Component {
     this.setState({});
   }
 
-  componentDidUpdate(prevState, prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.props.download) return;
 
+    if (prevProps.wmsServiceUrl !== this.props.wmsServiceUrl) {
+      const { wmsServiceUrl } = this.props;
+      if (
+        wmsServiceUrl &&
+        typeof wmsServiceUrl === 'string' &&
+        wmsServiceUrl !== ''
+      ) {
+        this.handleNewMapServiceLayer(wmsServiceUrl);
+      }
+    }
+
+    if (prevState.wmsUserServiceLayers !== this.state.wmsUserServiceLayers) {
+      this.createUserServices(this.state.wmsUserServiceLayers);
+    }
+    if (
+      this.state.wmsUserServiceLayers.length > 0 &&
+      prevState.wmsUserServiceLayers.length === 0
+    ) {
+      // Close other tabs and open "My Services"
+      let dropdownsMapMenu = document.querySelectorAll('.map-menu-dropdown');
+      let i = dropdownsMapMenu.length - 1;
+      // let j = 0;
+      let dropdownId = 'dropdown_' + i;
+      // let myServicesId = 'component_' + i;
+      // let mapMenuServiceDropdownId = 'product_' + i + '_' + j;
+      dropdownsMapMenu.forEach((dropdown) => {
+        if (dropdown.id !== dropdownId) {
+          dropdown
+            .querySelector('.ccl-expandable__button')
+            .setAttribute('aria-expanded', 'false');
+        }
+      });
+      document.getElementById(dropdownId).setAttribute('aria-expanded', 'true');
+    }
+
     if (sessionStorage.getItem('snowAndIce') === 'true') {
       //grab all checkedLayers from sessionstorage store them in checkedLayeers
       let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
@@ -3823,6 +4197,12 @@ class MenuWidget extends React.Component {
       let layerId = layer.getAttribute('layer-id');
       let elem = document.getElementById(layerId);
       this.deleteCrossEvent(elem);
+      if (
+        this.state.wmsUserServiceLayers ||
+        this.state.wmsUserServiceLayers.length > 0
+      ) {
+        this.setState({ wmsUserServiceLayers: [] });
+      }
     });
   }
 

package/src/components/MapViewer/UploadWidget.jsx

@@ -26,6 +26,7 @@ class UploadWidget extends React.Component {
       'esri-icon-sketch-rectangle esri-widget--button esri-widget esri-interactive';
     this.mapviewer_config = this.props.mapviewer_config;
     this.fileInput = createRef();
+    this.uploadUrlServiceHandler = this.props.uploadUrlServiceHandler;
   }
 
   loader() {
@@ -107,15 +108,15 @@ class UploadWidget extends React.Component {
   clearWidget() {
     window.document.querySelector('.pan-container').style.display = 'none';
     this.props.mapViewer.view.popup.close();
-    const { wmsLayer } = this.state;
-    if (wmsLayer) {
-      this.props.view.map.remove(wmsLayer);
-      // this.props.view.graphics.removeAll();
-    }
-    this.setState({
-      wmsLayer: null,
-      wmsServiceUrl: '',
-    });
+    //const { wmsLayer } = this.state;
+    //if (wmsLayer) {
+    //  this.props.view.map.remove(wmsLayer);
+    //  // this.props.view.graphics.removeAll();
+    //}
+    //this.setState({
+    //  wmsLayer: null,
+    //  wmsServiceUrl: '',
+    //});
 
     document.querySelector('.esri-attribution__powered-by').style.display =
       'none';
@@ -125,33 +126,32 @@ class UploadWidget extends React.Component {
     this.setState({ wmsServiceUrl: event.target.value });
   };
 
-  handleUploadService = async () => {
-    const { wmsServiceUrl, wmsLayer } = this.state;
-    if (wmsLayer) {
-      this.props.view.map.remove(wmsLayer);
-    }
+  handleUploadService = () => {
+    const { wmsServiceUrl } = this.state;
 
-    try {
-      const newWmsLayer = new WMSLayer({
-        url: wmsServiceUrl,
-      });
-
-      await newWmsLayer.load();
-      this.props.view.map.add(newWmsLayer);
+    if (
+      wmsServiceUrl &&
+      wmsServiceUrl.trim() !== '' &&
+      wmsServiceUrl.toLowerCase().includes('wms')
+    ) {
+      this.uploadUrlServiceHandler(wmsServiceUrl);
       this.setState({
-        wmsLayer: newWmsLayer,
-        showInfoPopup: false,
-        infoPopupType: '',
         wmsServiceUrl: '',
       });
-    } catch (error) {
+    } else {
       this.setState({
         showInfoPopup: true,
         infoPopupType: 'uploadError',
-        wmsServiceUrl: '',
       });
+      setTimeout(() => {
+        this.setState({
+          showInfoPopup: false,
+          infoPopupType: '',
+        });
+      }, 3000);
     }
   };
+
   /**
    * This method is executed after the render method is executed
    */
@@ -160,6 +160,14 @@ class UploadWidget extends React.Component {
     this.props.view.when(() => {
       this.container.current !== null &&
         this.props.view.ui.add(this.container.current, 'top-right');
+      //load an empty wms layer to use the variable
+      const wmsLayer = new WMSLayer({
+        url: '',
+        title: 'WMS Layer',
+      });
+      this.setState({
+        wmsLayer: wmsLayer,
+      });
     });
   }
 

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

@@ -773,6 +773,10 @@ div.upload-container.esri-component
   text-decoration: none;
 }
 
+.land .map-menu-icon.map-menu-service-icon {
+  margin-left: 1.75rem;
+}
+
 .map-menu-dropdown i:hover {
   color: black;
 }