[fix] WMS layer fixes 2

package.json

@@ -235,6 +235,7 @@
     "@loaders.gl/gis": "4.3.2",
     "@loaders.gl/schema": "4.3.2",
     "@loaders.gl/wkt": "4.3.2",
+    "@loaders.gl/wms": "4.3.2",
     "@luma.gl/constants": "8.5.21",
     "@luma.gl/core": "8.5.21",
     "@luma.gl/experimental": "8.5.21",

src/components/package.json

@@ -54,6 +54,7 @@
     "@kepler.gl/utils": "3.1.8",
     "@loaders.gl/mvt": "^4.3.2",
     "@loaders.gl/pmtiles": "^4.3.2",
+    "@loaders.gl/wms": "4.3.2",
     "@mapbox/mapbox-sdk": "^0.15.3",
     "@nebula.gl/edit-modes": "1.0.2-alpha.1",
     "@tippyjs/react": "^4.2.0",

src/components/src/modals/export-data-modal.tsx

@@ -94,7 +94,8 @@ const ExportDataModalFactory = () => {
       const showTiledDatasetWarning = Object.keys(datasets).some(datasetId => {
         return (
           (datasets[datasetId].type === DatasetType.VECTOR_TILE ||
-            datasets[datasetId].type === DatasetType.RASTER_TILE) &&
+            datasets[datasetId].type === DatasetType.RASTER_TILE ||
+            datasets[datasetId].type === DatasetType.WMS_TILE) &&
           (selectedDataset === datasetId || exportAllDatasets)
         );
       });

src/components/src/modals/tilesets-modals/common.tsx

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import type {WMSCapabilities} from '@loaders.gl/wms';
+
 import type {VectorTileMetadata} from '@kepler.gl/table';
 import type {StacTypes} from '@kepler.gl/types';
 
@@ -11,7 +13,7 @@ export type DatasetCreationAttributes = {
 };
 
 export type MetaResponse = {
-  metadata?: VectorTileMetadata | StacTypes.CompleteSTACObject | null;
+  metadata?: VectorTileMetadata | StacTypes.CompleteSTACObject | WMSCapabilities | null;
   dataset?: DatasetCreationAttributes | null;
   loading?: boolean;
   error?: Error | null;

src/components/src/modals/tilesets-modals/load-tileset.tsx

@@ -164,7 +164,6 @@ function LoadTilesetTabFactory() {
             </TilesetTypeContainer>
             <div>
               <CurrentForm setResponse={setResponse} />
-              {error && <div>{getError(error)}</div>}
             </div>
           </div>
           <MetaContainer>

src/components/src/modals/tilesets-modals/tileset-wms-form.tsx

@@ -3,16 +3,18 @@
 
 import React, {useCallback, useEffect, useState} from 'react';
 import styled from 'styled-components';
-import {WMSCapabilities, WMSCapabilitiesLoader} from '@loaders.gl/wms';
-import {load} from '@loaders.gl/core';
+import {WMSCapabilities} from '@loaders.gl/wms';
+
+import {validateUrl} from '@kepler.gl/common-utils';
+import {DatasetType, REMOTE_TILE, RemoteTileFormat, WMSDatasetMetadata} from '@kepler.gl/constants';
+import {getWMSCapabilities, wmsCapabilitiesToDatasetMetadata} from '@kepler.gl/table';
 
-import {DatasetType, REMOTE_TILE, RemoteTileFormat} from '@kepler.gl/constants';
 import {MetaResponse} from './common';
 import {InputLight} from '../../common';
 
 const TilesetInputContainer = styled.div`
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(3, auto);
   row-gap: 18px;
   font-size: 12px;
 `;
@@ -22,18 +24,34 @@ const TilesetInputDescription = styled.div`
   color: ${props => props.theme.AZURE200};
   font-size: 11px;
 `;
+
+const ExampleUrlsContainer = styled.div`
+  text-align: left;
+  color: ${props => props.theme.AZURE200};
+  font-size: 11px;
+
+  .example-url {
+    margin-top: 8px;
+    display: block;
+  }
+`;
+
 type WMSTileFormProps = {
   setResponse: (response: MetaResponse) => void;
 };
 
+type WMSData = {
+  metadata: WMSCapabilities | null;
+  layers: WMSDatasetMetadata['layers'];
+  version: string;
+};
+
 const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
   const [layerName, setLayerName] = useState<string>('');
   const [wmsUrl, setWmsUrl] = useState<string>('');
-  const [metadata, setMetadata] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
-  const [availableLayers, setAvailableLayers] = useState<{name: string; title: string}[]>([]);
-  const [wmsVersion, setWmsVersion] = useState<string>('1.3.0');
+  const [wmsData, setWMSData] = useState<WMSData | null>(null);
 
   const onLayerNameChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -49,48 +67,34 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
       const newWmsUrl = event.target.value;
       setWmsUrl(newWmsUrl);
 
+      if (!validateUrl(newWmsUrl)) {
+        setWMSData(null);
+        return;
+      }
+
       // Fetch WMS GetCapabilities
       try {
         setLoading(true);
         setError(null);
-        const data = (await load(
-          `${newWmsUrl}?service=WMS&request=GetCapabilities`,
-          WMSCapabilitiesLoader
-        )) as WMSCapabilities;
+
+        const data = await getWMSCapabilities(newWmsUrl);
+
+        const datasetMetadata = wmsCapabilitiesToDatasetMetadata(data);
 
         // Extract name or title from GetCapabilities response
         const serviceTitle = data?.title || data?.name;
         if (serviceTitle && !layerName) {
           setLayerName(serviceTitle);
         }
 
-        // Flatten layers if they are nested
-        const layers = data.layers.flatMap(layer => {
-          if (layer.layers && layer.layers.length > 0) {
-            return layer.layers;
-          }
-          return layer;
+        setWMSData({
+          metadata: data,
+          layers: datasetMetadata.layers,
+          version: datasetMetadata.version
         });
-
-        if (Array.isArray(layers)) {
-          const layerOptions = layers.map((layer: any) => ({
-            name: layer.name,
-            title: layer.title || layer.name,
-            boundingBox: layer.geographicBoundingBox
-          }));
-          setAvailableLayers(layerOptions);
-        } else {
-          setAvailableLayers([]);
-        }
-
-        // Set WMS version
-        const version = data.version || '1.3.0';
-        setWmsVersion(version);
-
-        setMetadata(data);
       } catch (err) {
         setError(err instanceof Error ? err : new Error('Unknown error'));
-        setMetadata(null);
+        setWMSData(null);
       } finally {
         setLoading(false);
       }
@@ -108,12 +112,12 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
           remoteTileFormat: RemoteTileFormat.WMS,
           tilesetDataUrl: wmsUrl,
           tilesetMetadataUrl: `${wmsUrl}?service=WMS&request=GetCapabilities`,
-          layers: availableLayers,
-          wmsVersion: wmsVersion
+          layers: wmsData?.layers || [],
+          wmsVersion: wmsData?.version || '1.3.0'
         }
       };
       setResponse({
-        metadata,
+        metadata: wmsData?.metadata ?? null,
         dataset,
         loading,
         error
@@ -126,7 +130,7 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
         error
       });
     }
-  }, [setResponse, layerName, wmsUrl, metadata, loading, error, availableLayers, wmsVersion]);
+  }, [setResponse, layerName, wmsUrl, wmsData, loading, error]);
 
   return (
     <TilesetInputContainer>
@@ -149,6 +153,18 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
         />
         <TilesetInputDescription>Provide a valid WMS service URL.</TilesetInputDescription>
       </div>
+      <div>
+        <TilesetInputDescription>For example, try a public WMS URL:</TilesetInputDescription>
+        <ExampleUrlsContainer>
+          <div className="example-url">• https://ows.terrestris.de/osm/service</div>
+          <div className="example-url">
+            • https://opengeo.ncep.noaa.gov/geoserver/conus/conus_cref_qcd/ows
+          </div>
+          <div className="example-url">
+            • https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi
+          </div>
+        </ExampleUrlsContainer>
+      </div>
     </TilesetInputContainer>
   );
 };

src/components/src/side-panel/layer-panel/layer-configurator.tsx

@@ -1032,14 +1032,10 @@ export default function LayerConfiguratorFactory(
     }) {
       return (
         <StyledLayerVisualConfigurator>
-          <LayerConfigGroup label={'layer.wms'} collapsible>
-            <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
-            <VisConfigSwitch
-              label={'layerVisConfigs.transparentBackground'}
-              {...layer.visConfigSettings.transparent}
-              {...visConfiguratorProps}
-              property="transparent"
-            />
+          <LayerConfigGroup label={'layer.service'}>
+            <PanelLabel>
+              <FormattedMessage id={'layer.layer'} />
+            </PanelLabel>
             <ItemSelector
               selectedItems={layer.config.visConfig.wmsLayer}
               options={layerChannelConfigProps.dataset.metadata.layers}
@@ -1067,6 +1063,15 @@ export default function LayerConfiguratorFactory(
               }}
             />
           </LayerConfigGroup>
+          <LayerConfigGroup label={'layer.appearance'}>
+            <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
+            <VisConfigSwitch
+              label={'layerVisConfigs.transparentBackground'}
+              {...layer.visConfigSettings.transparent}
+              {...visConfiguratorProps}
+              property="transparent"
+            />
+          </LayerConfigGroup>
         </StyledLayerVisualConfigurator>
       );
     }

src/constants/src/dataset.ts

@@ -66,3 +66,12 @@ export type RasterTileMetadataSourceType = {
  */
 export type RasterTileDatasetMetadata = (RasterTileLocalMetadata | RasterTileRemoteMetadata) &
   RasterTileMetadataSourceType;
+
+export type WMSDatasetMetadata = {
+  type: typeof REMOTE_TILE;
+  remoteTileFormat: RemoteTileFormat.WMS;
+  tilesetDataUrl: string;
+  tilesetMetadataUrl: string;
+  version: string;
+  layers: {name: string; title: string; boundingBox: number[] | null}[];
+};

src/deckgl-layers/package.json

@@ -38,10 +38,12 @@
     "@kepler.gl/constants": "3.1.8",
     "@kepler.gl/types": "3.1.8",
     "@kepler.gl/utils": "3.1.8",
+    "@loaders.gl/wms": "4.3.2",
     "@luma.gl/constants": "^8.5.20",
     "@luma.gl/core": "^8.5.20",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/vector-tile": "^1.3.1",
+    "@math.gl/web-mercator": "^3.6.2",
     "@types/d3-array": "^2.8.0",
     "@types/geojson": "^7946.0.8",
     "@types/lodash": "4.17.5",