@eeacms/volto-arcgis-block 0.1.352 → 0.1.354

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.354](https://github.com/eea/volto-arcgis-block/compare/0.1.353...0.1.354) - 24 April 2025
+
+### [0.1.353](https://github.com/eea/volto-arcgis-block/compare/0.1.352...0.1.353) - 15 April 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-286928 (bug): linter error fixed. [Unai Bolivar - [`d7afc23`](https://github.com/eea/volto-arcgis-block/commit/d7afc238ad25575b7e4857bb8ef6f693b3f1f736)]
+- CLMS-286928 (bug): Fixed issues pertaining user upload wms services for logged in users [Unai Bolivar - [`49eaf4c`](https://github.com/eea/volto-arcgis-block/commit/49eaf4cfa94fdd406709cd50b50aafd18a13f25e)]
 ### [0.1.352](https://github.com/eea/volto-arcgis-block/compare/0.1.351...0.1.352) - 11 April 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -77,6 +77,7 @@ class MapViewer extends React.Component {
     this.uploadFileErrorHandler = this.uploadFileErrorHandler.bind(this);
     this.uploadUrlServiceHandler = this.uploadUrlServiceHandler.bind(this);
     this.getTaxonomy = this.props.getTaxonomy.bind(this);
+    this.tax = null;
   }
 
   mapLayersHandler(newLayers) {
@@ -232,6 +233,7 @@ class MapViewer extends React.Component {
   async componentDidMount() {
     loadCss();
     await this.loader();
+    this.tax = await this.getTaxonomy('collective.taxonomy.family');
     this.positronCompositeBasemap = new Basemap({
       title: 'Positron composite',
       thumbnailUrl: this.cfgUrls.positronCompositeThumbnail,
@@ -650,6 +652,7 @@ export const CheckUserID = ({ reference }) => {
             uploadFileErrorHandler={reference.uploadFileErrorHandler}
             userID={user_id}
             getTaxonomy={reference.getTaxonomy}
+            tax={reference.tax}
           />
         </>
       )}

package/src/components/MapViewer/MenuWidget.jsx

@@ -502,6 +502,7 @@ class MenuWidget extends React.Component {
 
     this.activeLayersHandler = this.props.activeLayersHandler;
     this.getTaxonomy = this.props.getTaxonomy;
+    this.tax = this.props.tax;
   }
 
   loader() {
@@ -1251,6 +1252,7 @@ class MenuWidget extends React.Component {
   metodProcessProduct(product, prodIndex, inheritedIndex) {
     var dataset_def = [];
     var datasets = [];
+    var families = [];
     var index = 0;
     var inheritedIndexProduct = inheritedIndex + '_' + prodIndex;
     var checkProduct = 'map_product_' + inheritedIndexProduct;
@@ -1260,33 +1262,62 @@ class MenuWidget extends React.Component {
         : product.ProductDescription;
 
     if (product.Datasets && Array.isArray(product.Datasets)) {
-      for (var i in product.Datasets) {
-        if (this.filtersApplied) {
-          dataset_def = document
-            .querySelector('#' + checkProduct)
-            ?.getAttribute('defcheck');
-        } else if (
-          product.Datasets[i] &&
-          product.Datasets[i].Default_active === true
-        ) {
-          var idDataset = 'map_dataset_' + inheritedIndexProduct + '_' + index;
-          dataset_def.push(idDataset);
+      let familiesMap = new Map();
+      familiesMap['noFamily'] = [];
+      for (let index = 0; index < product.Datasets.length; index++) {
+        if (familiesMap[product.Datasets[index].FamilyTitle]) {
+          familiesMap[product.Datasets[index].FamilyTitle].push(
+            product.Datasets[index],
+          );
+        } else if (product.Datasets[index].FamilyTitle) {
+          familiesMap[product.Datasets[index].FamilyTitle] = [
+            product.Datasets[index],
+          ];
+        } else {
+          familiesMap['noFamily'].push(product.Datasets[index]);
         }
+      }
+      for (var j in familiesMap) {
+        if (j === 'noFamily') {
+          for (var i in familiesMap[j]) {
+            if (this.filtersApplied) {
+              dataset_def = document
+                .querySelector('#' + checkProduct)
+                ?.getAttribute('defcheck');
+            } else if (
+              product.Datasets[i] &&
+              product.Datasets[i].Default_active === true
+            ) {
+              var idDataset =
+                'map_dataset_' + inheritedIndexProduct + '_' + index;
+              dataset_def.push(idDataset);
+            }
 
-        // CLMS-1545
-        // if (!product.Datasets[i].MarkAsDownloadableNoServiceToVisualize) {
-        if (product.Datasets[i]) {
-          datasets.push(
-            this.metodProcessDataset(
-              product.Datasets[i],
-              index,
+            // CLMS-1545
+            // if (!product.Datasets[i].MarkAsDownloadableNoServiceToVisualize) {
+            if (product.Datasets[i]) {
+              datasets.push(
+                this.metodProcessDataset(
+                  product.Datasets[i],
+                  index,
+                  inheritedIndexProduct,
+                  checkProduct,
+                ),
+              );
+              index++;
+            }
+            // }
+          }
+        } else {
+          families.push(
+            this.metodProcessFamily(
+              familiesMap[j],
+              j,
               inheritedIndexProduct,
               checkProduct,
             ),
           );
-          index++;
         }
-        // }
       }
     }
 
@@ -1361,6 +1392,131 @@ class MenuWidget extends React.Component {
           <div
             className="ccl-form map-menu-products-container"
             id={'datasets_container_' + inheritedIndexProduct}
+          >
+            {families}
+            {datasets}
+          </div>
+        </fieldset>
+      </div>
+    );
+  }
+
+  metodProcessFamily(family, familyTitle, inheritedIndex, checkProduct) {
+    var dataset_def = [];
+    var datasets = [];
+    var index = 0;
+    var familyId = familyTitle.replace(/\s+/g, '');
+    var inheritedIndexProduct = inheritedIndex + '_' + familyId;
+    checkProduct = 'map_product_' + inheritedIndexProduct;
+    var familyTitleName = '';
+    this.tax.tree.forEach((element) => {
+      element.children.forEach((element) => {
+        if (element.key === familyTitle) {
+          familyTitleName = element.title;
+        }
+      });
+    });
+    if (family && Array.isArray(family)) {
+      for (var i in family) {
+        // if (this.filtersApplied) {
+        //   dataset_def = document
+        //     .querySelector('#' + checkProduct)
+        //     ?.getAttribute('defcheck');
+        // } else if (
+        //   product.Datasets[i] &&
+        //   product.Datasets[i].Default_active === true
+        // ) {
+        //   var idDataset = 'map_dataset_' + inheritedIndexProduct + '_' + index;
+        //   dataset_def.push(idDataset);
+        // }
+
+        // CLMS-1545
+        // if (!product.Datasets[i].MarkAsDownloadableNoServiceToVisualize) {
+        if (family[i]) {
+          datasets.push(
+            this.metodProcessDataset(
+              family[i],
+              index,
+              inheritedIndexProduct,
+              checkProduct,
+            ),
+          );
+          index++;
+        }
+        // }
+      }
+    }
+
+    // Empty vector, add the first dataset
+    if (!dataset_def.length) {
+      var idDatasetB = 'map_dataset_' + inheritedIndexProduct + '_0';
+      dataset_def.push(idDatasetB);
+    }
+    let style = this.props.download ? { display: 'none' } : {};
+
+    return (
+      <div
+        className="map-menu-family-dropdown"
+        id={'product_' + inheritedIndexProduct}
+        productid={familyId}
+        key={'a' + familyId}
+      >
+        <fieldset className="ccl-fieldset" key={'b' + familyId}>
+          <div
+            id={'dropdown_' + inheritedIndexProduct}
+            className="ccl-expandable__button"
+            aria-expanded="false"
+            key={'c' + familyId}
+            onClick={this.toggleDropdownContent.bind(this)}
+            onKeyDown={this.toggleDropdownContent.bind(this)}
+            tabIndex="0"
+            role="button"
+            style={style}
+          >
+            <div className="dropdown-icon">
+              <FontAwesomeIcon icon={['fas', 'caret-right']} />
+            </div>
+            <div className="ccl-form map-product-checkbox" key={'d' + familyId}>
+              <div className="ccl-form-group" key={'e' + familyId}>
+                <input
+                  type="checkbox"
+                  id={checkProduct}
+                  name=""
+                  value="name"
+                  className="ccl-checkbox ccl-required ccl-form-check-input"
+                  key={'h' + familyId}
+                  defcheck={dataset_def}
+                  onChange={(e) =>
+                    this.toggleProduct(e.target.checked, checkProduct, e)
+                  }
+                ></input>
+                <label
+                  className="ccl-form-check-label"
+                  htmlFor={checkProduct}
+                  key={'f' + familyId}
+                >
+                  <legend className="ccl-form-legend">
+                    {
+                      /* {description ? (
+                      <Popup
+                        trigger={<span>{familyTitle}</span>}
+                        content={description}
+                        basic
+                        className="custom"
+                        style={{ transform: 'translateX(-4rem)' }}
+                      />
+                    ) : (*/
+                      <span>{familyTitleName}</span>
+                      /*)} */
+                    }
+                  </legend>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            className="ccl-form map-menu-family-container"
+            id={'family_container_' + inheritedIndexProduct}
           >
             {datasets}
           </div>
@@ -1532,7 +1688,11 @@ class MenuWidget extends React.Component {
 
     return (
       <div
-        className="map-menu-dataset-dropdown"
+        className={
+          dataset.FamilyTitle
+            ? 'map-menu-family-dataset-dropdown'
+            : 'map-menu-dataset-dropdown'
+        }
         id={'dataset_' + inheritedIndexDataset}
         datasetid={dataset.DatasetId}
         key={'a' + datIndex}
@@ -2035,15 +2195,25 @@ class MenuWidget extends React.Component {
       layerId = title.toUpperCase().replace(/ /g, '_');
       const constructedSublayers = resourceLayer.sublayers?.items?.map(
         (sublayer) => {
-          const { index, name, title, legendUrl, featureInfoUrl } = sublayer;
+          const {
+            index,
+            name,
+            title,
+            legendUrl,
+            featureInfoUrl,
+            queryable,
+            popupEnabled,
+            visible,
+            legendEnabled,
+          } = sublayer;
           return {
             index,
             name,
             title,
-            popupEnabled: true,
-            queryable: true,
-            visible: true,
-            legendEnabled: true,
+            popupEnabled,
+            queryable,
+            visible,
+            legendEnabled,
             legendUrl: legendUrl
               ? legendUrl
               : viewService + legendRequest + name,
@@ -2202,7 +2372,9 @@ class MenuWidget extends React.Component {
         const newWmsUserServiceLayers = prevState.wmsUserServiceLayers.filter(
           (layer) => layer.LayerId !== elemId,
         );
-        this.saveUserServicesToStorage(newWmsUserServiceLayers);
+        if (this.userID && this.userID !== null) {
+          this.saveUserServicesToStorage(newWmsUserServiceLayers);
+        }
         return { wmsUserServiceLayers: newWmsUserServiceLayers };
       }
       return null;
@@ -2214,6 +2386,11 @@ class MenuWidget extends React.Component {
 
     try {
       const layersToSave = layers.map((layer) => {
+        // First, see if this layer exists in previous saved services to retain checked state
+        const checkedLayers =
+          JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
+        const isChecked = checkedLayers.includes(layer.LayerId);
+
         // Create a simplified object for storage
         return {
           url: layer.url,
@@ -2234,6 +2411,9 @@ class MenuWidget extends React.Component {
           })),
           ViewService: layer.ViewService,
           LayerId: layer.LayerId,
+          visibility: layer.visible !== false,
+          opacity: layer.opacity || 1,
+          checked: isChecked || layer.checked || false,
         };
       });
 
@@ -2246,6 +2426,7 @@ class MenuWidget extends React.Component {
 
   async loadUserServicesFromStorage() {
     if (this.userID != null) {
+      sessionStorage.clear();
       try {
         const savedServices = JSON.parse(
           localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
@@ -2258,6 +2439,20 @@ class MenuWidget extends React.Component {
               try {
                 // Create a new WMSLayer with the saved properties
                 const newLayer = new WMSLayer(serviceData);
+
+                // Set visibility property based on saved value
+                newLayer.visible = serviceData.visibility !== false;
+
+                // 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] =
+                  serviceData.visibility !== false
+                    ? ['fas', 'eye']
+                    : ['fas', 'eye-slash'];
+
                 // Add to this.layers
                 this.layers[serviceData.LayerId] = newLayer;
                 return newLayer;
@@ -2271,27 +2466,87 @@ class MenuWidget extends React.Component {
           const validLayers = recreatedLayers.filter((layer) => layer !== null);
 
           // Update state with recreated layers
-          this.setState({ wmsUserServiceLayers: validLayers });
-          // Get checked layers from session storage
-          // const checkedLayers =
-          // JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
-
-          // For each valid layer that was previously checked, make it visible
-          validLayers.forEach((layer) => {
-            // if (checkedLayers.includes(layer.LayerId)) {
-            const node = document.getElementById(layer.LayerId);
-            if (node) {
-              layer.visible === true
-                ? (node.checked = true)
-                : (node.checked = false);
-              this.toggleLayer(node);
-            }
+          this.setState({ wmsUserServiceLayers: validLayers }, () => {
+            // For each layer, update the checkbox state based on localStorage
+            setTimeout(() => {
+              validLayers.forEach((layer) => {
+                const node = document.getElementById(layer.LayerId);
+                if (node) {
+                  // Check the checkbox if it was saved as checked
+                  if (layer.checked === true) {
+                    // First add to checkedLayers in sessionStorage if not already there
+                    const checkedLayers =
+                      JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
+
+                    if (!checkedLayers.includes(layer.LayerId)) {
+                      checkedLayers.unshift(layer.LayerId);
+                      sessionStorage.setItem(
+                        'checkedLayers',
+                        JSON.stringify(checkedLayers),
+                      );
+                      window.dispatchEvent(new Event('storage'));
+                    }
+
+                    // Then check the checkbox and call toggleLayer with a flag to preserve visibility
+                    node.checked = true;
+
+                    // Custom addition to toggleLayer to bypass visibility override
+                    this.toggleLayerWithoutVisibilityReset(node);
+                  }
+                }
+              });
+            }, 100);
           });
         }
       } catch (error) {}
     }
   }
 
+  toggleLayerWithoutVisibilityReset(elem) {
+    // Copy most of toggleLayer behavior but don't set this.visibleLayers[elem.id]
+    if (this.layers[elem.id] === undefined) return;
+    if (!this.visibleLayers) this.visibleLayers = {};
+    if (!this.timeLayers) this.timeLayers = {};
+
+    // Add the layer to the map
+    this.layers[elem.id].visible = this.visibleLayers[elem.id][1] === 'eye';
+    this.map.add(this.layers[elem.id]);
+
+    // Continue with other toggleLayer operations
+    this.timeLayers[elem.id] = ['far', 'clock'];
+
+    // Add to active layers
+    this.activeLayersJSON[elem.id] = this.addActiveLayer(
+      elem,
+      Object.keys(this.activeLayersJSON).length,
+    );
+
+    this.saveCheckedLayer(elem.id);
+
+    // Reorder layers
+    let nuts = this.map.layers.items.find((layer) => layer.title === 'nuts');
+    if (nuts) {
+      this.map.reorder(nuts, this.map.layers.items.length + 1);
+    }
+
+    this.layersReorder();
+    this.checkInfoWidget();
+
+    // Toggle custom legend
+    if (
+      this.layers[elem.id].ViewService?.toLowerCase().includes('wmts') ||
+      this.layers[elem.id].ViewService?.toLowerCase().endsWith('file')
+    ) {
+      this.toggleCustomLegendItem(this.layers[elem.id]);
+    }
+
+    if (!this.props.download && this.props.hotspotData) {
+      this.activeLayersToHotspotData(elem.id);
+    }
+
+    this.renderHotspot();
+  }
+
   /**
    * Method to show/hide a layer. Update checkboxes from dataset and products
    * @param {*} elem Is the checkbox
@@ -4033,22 +4288,28 @@ class MenuWidget extends React.Component {
     let layerOpacities = JSON.parse(sessionStorage.getItem('layerOpacities'));
     if (layerOpacities === null) {
       layerOpacities = {};
-      layerOpacities[layer] = value;
-      sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
-    } else {
-      layerOpacities[layer] = value;
-      sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
     }
-    let savedServices = JSON.parse(
+    layerOpacities[layer] = value;
+    sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
+
+    // Save to localStorage for user service layers
+    const savedServices = JSON.parse(
       localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
     );
-    if (savedServices === null) {
-      return;
-    } else {
-      for (const service of Object.values(savedServices)) {
+
+    if (savedServices && Array.isArray(savedServices)) {
+      let servicesUpdated = false;
+
+      // Update opacity for matching layer in user services
+      savedServices.forEach((service) => {
         if (service.LayerId === layer) {
           service.opacity = value;
+          servicesUpdated = true;
         }
+      });
+
+      // Only save if we made changes
+      if (servicesUpdated) {
         localStorage.setItem(
           USER_SERVICES_KEY + '_' + this.userID,
           JSON.stringify(savedServices),
@@ -4065,43 +4326,44 @@ class MenuWidget extends React.Component {
   loadOpacity() {
     let layerOpacities =
       JSON.parse(sessionStorage.getItem('layerOpacities')) || {};
+
+    // Load from localStorage for user service layers
     const savedUserServices = JSON.parse(
       localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
     );
-    if (savedUserServices) {
-      Object.values(savedUserServices).forEach((service) => {
-        let layer = service.LayerId;
-        let value = service.opacity;
-        // Check if the layer is already in layerOpacities
-        if (layerOpacities[layer] === undefined) {
-          //add to layerOpacties
-          layerOpacities[layer] = value;
-          // if (this.layers[service]) {
-          //   // set map
-          //   this.layers[service].opacity = value;
-          //   // set slider
-          //   let nodeValue = `.active-layer[layer-id="${layer}"] .active-layer-opacity`;
-          //   let node = document.querySelector(nodeValue);
-          //   if (node) {
-          //     node.dataset.opacity = value * 100;
-          //   }
-          // }
+
+    // Import opacity values from user services if not already in session storage
+    if (savedUserServices && Array.isArray(savedUserServices)) {
+      savedUserServices.forEach((service) => {
+        const layerId = service.LayerId;
+        const opacity = service.opacity;
+
+        // If this layer's opacity isn't in session storage yet, add it
+        if (
+          layerId &&
+          opacity !== undefined &&
+          layerOpacities[layerId] === undefined
+        ) {
+          layerOpacities[layerId] = opacity;
         }
       });
     }
-    if (layerOpacities) {
-      for (const layer in layerOpacities) {
-        if (this.layers[layer]) {
-          let value = layerOpacities[layer];
-          // set map
-          this.layers[layer].opacity = value;
-          // set slider
-          let node = document.querySelector(
-            '.active-layer[layer-id="' + layer + '"] .active-layer-opacity',
-          );
-          if (node) {
-            node.dataset.opacity = value * 100;
-          }
+    //save layerOpacities to sessionStorage
+    sessionStorage.setItem('layerOpacities', JSON.stringify(layerOpacities));
+    // Apply opacity values to layers and UI
+    for (const layerId in layerOpacities) {
+      if (this.layers[layerId]) {
+        const value = layerOpacities[layerId];
+
+        // Set opacity on the map layer
+        this.layers[layerId].opacity = value;
+
+        // Update UI opacity slider
+        const node = document.querySelector(
+          `.active-layer[layer-id="${layerId}"] .active-layer-opacity`,
+        );
+        if (node) {
+          node.dataset.opacity = value * 100;
         }
       }
     }
@@ -4287,7 +4549,13 @@ class MenuWidget extends React.Component {
     }
     this.setLegendOpacity();
     this.loadOpacity();
-    this.loadVisibility();
+    if (
+      prevProps.hotspotData !== this.props.hotspotData ||
+      !this._visibilityInitialized
+    ) {
+      this.loadVisibility();
+      this._visibilityInitialized = true;
+    }
   }
 
   /**
@@ -4295,6 +4563,34 @@ class MenuWidget extends React.Component {
    */
   saveVisibility() {
     if (this.props.download) return;
+
+    // Get services from localStorage - it's an array of objects
+    const savedServices = JSON.parse(
+      localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
+    );
+
+    if (savedServices && Array.isArray(savedServices)) {
+      let servicesUpdated = false;
+
+      // Update visibility state for each service in the array
+      savedServices.forEach((service) => {
+        const layerId = service.LayerId;
+        if (layerId && this.visibleLayers[layerId]) {
+          // Update visibility based on eye icon state
+          service.visibility =
+            this.visibleLayers[layerId][1] === 'eye' ? true : false;
+          servicesUpdated = true;
+        }
+      });
+
+      // Only save if we made changes
+      if (servicesUpdated) {
+        localStorage.setItem(
+          USER_SERVICES_KEY + '_' + this.userID,
+          JSON.stringify(savedServices),
+        );
+      }
+    }
     sessionStorage.setItem('visibleLayers', JSON.stringify(this.visibleLayers));
   }
 
@@ -4304,6 +4600,8 @@ class MenuWidget extends React.Component {
   loadVisibility() {
     if (this.props.download) return;
 
+    let hasChanges = false;
+
     // Load visibility settings from sessionStorage
     let vl = JSON.parse(sessionStorage.getItem('visibleLayers'));
     if (vl) {
@@ -4317,44 +4615,52 @@ class MenuWidget extends React.Component {
       localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
     );
 
-    if (savedUserServices) {
-      Object.values(savedUserServices).forEach((service) => {
-        let layerId = service.LayerId;
-        let visibility = service.visibility;
-        // Only add visibility from localStorage if not already in sessionStorage
-        if (this.visibleLayers[layerId] === undefined) {
-          if (visibility) {
-            this.visibleLayers[layerId] = ['fas', 'eye'];
-          } else {
-            this.visibleLayers[layerId] = ['fas', 'eye-slash'];
-          }
+    if (savedUserServices && Array.isArray(savedUserServices)) {
+      savedUserServices.forEach((service) => {
+        const layerId = service.LayerId;
+        // Check if visibility is explicitly defined (could be true, false, or undefined)
+        if (
+          layerId &&
+          this.visibleLayers[layerId] === undefined &&
+          service.visibility !== undefined
+        ) {
+          // Set visible icon based on saved visibility boolean value
+          this.visibleLayers[layerId] =
+            service.visibility === true ? ['fas', 'eye'] : ['fas', 'eye-slash'];
+          hasChanges = true;
         }
       });
     }
-
-    // Apply visibility settings to layers
+    //add this.visibleLayers to session storage
+    sessionStorage.setItem('visibleLayers', JSON.stringify(this.visibleLayers));
     for (const key in this.visibleLayers) {
       if (this.layers[key]) {
-        if (this.visibleLayers[key][1] === 'eye') {
-          this.layers[key].visible = true;
-        } else {
-          this.layers[key].visible = false;
-        }
+        // Set layer visibility based on eye/eye-slash
+        const shouldBeVisible = this.visibleLayers[key][1] === 'eye';
+        this.layers[key].visible = shouldBeVisible;
 
+        // Update the active layer UI if it exists
         let elem = document.getElementById(key);
         if (elem && this.activeLayersJSON[key]) {
+          // Get the current order of the active layer
           let order = this.activeLayersJSON[key].props['layer-order'];
-          // add active layer to DOM
+
+          // Force recreate the active layer component with the correct visibility state
           this.activeLayersJSON[key] = this.addActiveLayer(elem, order);
-          // reorder layers
+
+          // Update related UI
           this.layersReorder();
-          // show/hide info widget
           this.checkInfoWidget();
-          // update
-          this.setState({});
+          this.toggleCustomLegendItem(this.layers[key]);
+          hasChanges = true;
         }
       }
     }
+
+    // Only update state once if there were changes
+    if (hasChanges) {
+      this.setState({});
+    }
   }
 
   /**
@@ -4393,6 +4699,8 @@ class MenuWidget extends React.Component {
    */
   saveCheckedLayer(layer) {
     if (this.props.download) return;
+
+    // Update sessionStorage as before
     let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (checkedLayers === null) {
       checkedLayers = [layer];
@@ -4404,6 +4712,31 @@ class MenuWidget extends React.Component {
       sessionStorage.setItem('checkedLayers', JSON.stringify(checkedLayers));
     }
     window.dispatchEvent(new Event('storage'));
+
+    // Also update localStorage for user service layers
+    const savedServices = JSON.parse(
+      localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
+    );
+
+    if (savedServices && Array.isArray(savedServices)) {
+      let servicesUpdated = false;
+
+      // Update checked state for matching layer in user services
+      savedServices.forEach((service) => {
+        if (service.LayerId === layer) {
+          service.checked = true;
+          servicesUpdated = true;
+        }
+      });
+
+      // Only save if we made changes
+      if (servicesUpdated) {
+        localStorage.setItem(
+          USER_SERVICES_KEY + '_' + this.userID,
+          JSON.stringify(savedServices),
+        );
+      }
+    }
   }
 
   /**
@@ -4442,6 +4775,31 @@ class MenuWidget extends React.Component {
         sessionStorage.setItem('visibleLayers', JSON.stringify(visibleLayers));
       }
     }
+
+    // Also update localStorage for user service layers
+    const savedServices = JSON.parse(
+      localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
+    );
+
+    if (savedServices && Array.isArray(savedServices)) {
+      let servicesUpdated = false;
+
+      // Update checked state for matching layer in user services
+      savedServices.forEach((service) => {
+        if (service.LayerId === layer) {
+          service.checked = false;
+          servicesUpdated = true;
+        }
+      });
+
+      // Only save if we made changes
+      if (servicesUpdated) {
+        localStorage.setItem(
+          USER_SERVICES_KEY + '_' + this.userID,
+          JSON.stringify(savedServices),
+        );
+      }
+    }
   }
 
   deleteFilteredLayer(layer) {
@@ -4872,74 +5230,80 @@ class MenuWidget extends React.Component {
           let datasetElem = document.querySelector(
             '[datasetid="' + dataset.DatasetId + '"]',
           );
-          for (let l = 0; l < Object.keys(this.activeLayersJSON).length; l++) {
-            if (
-              dataset.DatasetTitle ===
-              this.layers[Object.keys(this.activeLayersJSON)[l]].DatasetTitle
+          if (datasetElem) {
+            for (
+              let l = 0;
+              l < Object.keys(this.activeLayersJSON).length;
+              l++
             ) {
-              componentChecked = true;
-              productChecked = true;
-              datasetChecked = true;
-            }
-          }
-          if (
-            searchText === '' &&
-            componentFilter === 'default' &&
-            productFilter === 'default' &&
-            (familyFilter === 'default' || familyFilter === '')
-          ) {
-            this.filtersApplied = false;
-            componentFound = true;
-            productFound = true;
-            result = true;
-            componentElem
-              .querySelector('.ccl-expandable__button')
-              .setAttribute('aria-expanded', 'false');
-            productElem
-              .querySelector('.ccl-expandable__button')
-              .setAttribute('aria-expanded', 'false');
-            datasetElem.removeAttribute('style');
-            productElem.removeAttribute('style');
-            componentElem.removeAttribute('style');
-            if (!defaultActive) {
-              defaultActive = 'map_' + datasetElem.id;
-            }
-            if (dataset.Default_active) {
-              defaultActive = 'map_' + datasetElem.id;
-            }
-          } else if (
-            datasetChecked ||
-            (dataset?.DatasetTitle?.toUpperCase().includes(searchText) &&
-              (product.ProductId === productFilter ||
-                productFilter === 'default') &&
-              (this.compCfg[index].ComponentPosition.toString() ===
-                componentFilter ||
-                componentFilter === 'default') &&
-              (dataset?.FamilyTitle === familyFilter ||
-                familyFilter === 'default' ||
-                familyFilter === ''))
-          ) {
-            this.filtersApplied = true;
-            componentFound = true;
-            productFound = true;
-            result = true;
-            componentElem
-              .querySelector('.ccl-expandable__button')
-              .setAttribute('aria-expanded', 'true');
-            productElem
-              .querySelector('.ccl-expandable__button')
-              .setAttribute('aria-expanded', 'true');
-            datasetElem.removeAttribute('style');
-            productElem.removeAttribute('style');
-            componentElem.removeAttribute('style');
-            if (!defaultActive) {
-              defaultActive = 'map_' + datasetElem.id;
+              if (
+                dataset.DatasetTitle ===
+                this.layers[Object.keys(this.activeLayersJSON)[l]].DatasetTitle
+              ) {
+                componentChecked = true;
+                productChecked = true;
+                datasetChecked = true;
+              }
             }
-            if (dataset.Default_active) {
-              defaultActive = 'map_' + datasetElem.id;
+            if (
+              searchText === '' &&
+              componentFilter === 'default' &&
+              productFilter === 'default' &&
+              (familyFilter === 'default' || familyFilter === '')
+            ) {
+              this.filtersApplied = false;
+              componentFound = true;
+              productFound = true;
+              result = true;
+              componentElem
+                .querySelector('.ccl-expandable__button')
+                .setAttribute('aria-expanded', 'false');
+              productElem
+                .querySelector('.ccl-expandable__button')
+                .setAttribute('aria-expanded', 'false');
+              datasetElem.removeAttribute('style');
+              productElem.removeAttribute('style');
+              componentElem.removeAttribute('style');
+              if (!defaultActive) {
+                defaultActive = 'map_' + datasetElem.id;
+              }
+              if (dataset.Default_active) {
+                defaultActive = 'map_' + datasetElem.id;
+              }
+            } else if (
+              datasetChecked ||
+              (dataset?.DatasetTitle?.toUpperCase().includes(searchText) &&
+                (product.ProductId === productFilter ||
+                  productFilter === 'default') &&
+                (this.compCfg[index].ComponentPosition.toString() ===
+                  componentFilter ||
+                  componentFilter === 'default') &&
+                (dataset?.FamilyTitle === familyFilter ||
+                  familyFilter === 'default' ||
+                  familyFilter === ''))
+            ) {
+              this.filtersApplied = true;
+              componentFound = true;
+              productFound = true;
+              result = true;
+              componentElem
+                .querySelector('.ccl-expandable__button')
+                .setAttribute('aria-expanded', 'true');
+              productElem
+                .querySelector('.ccl-expandable__button')
+                .setAttribute('aria-expanded', 'true');
+              datasetElem.removeAttribute('style');
+              productElem.removeAttribute('style');
+              componentElem.removeAttribute('style');
+              if (!defaultActive) {
+                defaultActive = 'map_' + datasetElem.id;
+              }
+              if (dataset.Default_active) {
+                defaultActive = 'map_' + datasetElem.id;
+              }
+            } else {
+              datasetElem.setAttribute('style', 'display: none;');
             }
-          } else {
-            datasetElem.setAttribute('style', 'display: none;');
           }
         }
         productCheckbox.setAttribute('defcheck', defaultActive);

package/src/components/MapViewer/UploadWidget.jsx

@@ -128,20 +128,37 @@ class UploadWidget extends React.Component {
     this.setState({ wmsServiceUrl: event.target.value });
   };
 
-  handleUploadService = () => {
+  handleUploadService = async () => {
     const { wmsServiceUrl } = this.state;
+    try {
+      // Use a CORS proxy or add mode: 'no-cors' if you just need to check if service exists
+      let urlResult = await fetch(wmsServiceUrl, {
+        method: 'GET',
+        mode: 'cors', // You might need to change this to 'no-cors' if proxy isn't available
+      });
 
+      // Check if service is valid and properly responds
+      if (!urlResult || !urlResult.ok) {
+        this.errorPopup();
+        this.setState({ wmsServiceUrl: '' });
+        return;
+      }
+    } catch (error) {
+      this.errorPopup();
+      this.setState({ wmsServiceUrl: '' });
+      return;
+    }
+    // If service is valid and is a WMS service
     if (
       wmsServiceUrl &&
       wmsServiceUrl.trim() !== '' &&
       wmsServiceUrl.toLowerCase().includes('wms')
     ) {
       this.uploadUrlServiceHandler(wmsServiceUrl);
-      this.setState({
-        wmsServiceUrl: '',
-      });
+      this.setState({ wmsServiceUrl: '' });
     } else {
       this.errorPopup();
+      this.setState({ wmsServiceUrl: '' });
     }
   };
 

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

@@ -742,6 +742,14 @@ div.upload-container.esri-component
   margin-bottom: 0.5rem;
 }
 
+.map-menu-family-dataset-dropdown {
+  padding-left: 2rem;
+}
+
+.map-menu-family-dropdown {
+  padding-left: 2rem;
+}
+
 .map-menu-dataset > div:first-of-type {
   display: flex;
   width: 100%;