[fix] WMS layer fixes 1

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

@@ -7,7 +7,7 @@ import JSONPretty from 'react-json-pretty';
 import {AutoSizer} from 'react-virtualized';
 import styled from 'styled-components';
 
-import {VectorTileIcon, RasterTileIcon} from '@kepler.gl/layers';
+import {VectorTileIcon, RasterTileIcon, WMSLayerIcon} from '@kepler.gl/layers';
 import {getError, getApplicationConfig} from '@kepler.gl/utils';
 
 import {MetaResponse} from './common';
@@ -16,7 +16,6 @@ import TilesetIcon from './tileset-icon';
 import TilesetVectorForm from './tileset-vector-form';
 import TilesetRasterForm from './tileset-raster-form';
 
-import WMSLayerIcon from 'src/layers/src/wms-layer/wms-layer-icon';
 import TilesetWMSForm from './tileset-wms-form';
 
 const WIDTH_ICON = '70px';

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

@@ -59,7 +59,7 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
         )) as WMSCapabilities;
 
         // Extract name or title from GetCapabilities response
-        const serviceTitle = data?.title;
+        const serviceTitle = data?.title || data?.name;
         if (serviceTitle && !layerName) {
           setLayerName(serviceTitle);
         }
@@ -75,7 +75,8 @@ const TilesetWMSForm: React.FC<WMSTileFormProps> = ({setResponse}) => {
         if (Array.isArray(layers)) {
           const layerOptions = layers.map((layer: any) => ({
             name: layer.name,
-            title: layer.title || layer.name
+            title: layer.title || layer.name,
+            boundingBox: layer.geographicBoundingBox
           }));
           setAvailableLayers(layerOptions);
         } else {

src/constants/src/layers.ts

@@ -564,6 +564,5 @@ export const EDITOR_AVAILABLE_LAYERS: string[] = [
   LAYER_TYPES.arc,
   LAYER_TYPES.line,
   LAYER_TYPES.hexagonId,
-  LAYER_TYPES.geojson,
-  LAYER_TYPES.wms
+  LAYER_TYPES.geojson
 ];

src/deckgl-layers/src/index.ts

@@ -18,6 +18,8 @@ export {default as RasterLayer} from './raster/raster-layer/raster-layer';
 export {default as RasterMeshLayer} from './raster/raster-mesh-layer/raster-mesh-layer';
 export * as RasterWebGL from './raster/webgl';
 
+export {default as WMSLayer} from './wms/wms-layer';
+
 export * from './layer-utils/shader-utils';
 
 export * from './3d-building-layer/types';

src/deckgl-layers/src/wms/wms-layer.ts

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+// @ts-expect-error
+import {_WMSLayer as DeckWMSLayer} from '@deck.gl/geo-layers';
+import {LayerProps as DeckLayerProps} from '@deck.gl/core/typed';
+
+export interface ExtendedWMSLayerProps extends DeckLayerProps {
+  /** Base URL to the WMS service or URL template */
+  data: string;
+
+  /** Type of service - 'wms', 'template', or 'auto' */
+  serviceType?: 'wms' | 'template' | 'auto';
+
+  /** Array of layer names to visualize from the WMS service */
+  layers?: string[];
+}
+
+// TODO
+
+export default class ExtendedWMSLayer extends DeckWMSLayer<ExtendedWMSLayerProps> {
+  static defaultProps = {
+    ...DeckWMSLayer.defaultProps,
+    serviceType: 'auto' as const,
+    layers: [],
+    srs: 'auto' as const,
+    format: 'png' as const
+  };
+
+  constructor(props: ExtendedWMSLayerProps) {
+    super(props);
+  }
+}

src/layers/src/index.ts

@@ -62,6 +62,8 @@ export {getCategoricalColormapDataUrl} from './raster-tile/image';
 export * from './raster-tile/types';
 export * from './raster-tile/raster-tile-utils';
 
+export {default as WMSLayerIcon} from './wms-layer/wms-layer-icon';
+
 import {LAYER_TYPES} from '@kepler.gl/constants';
 export {parseGeoJsonRawFeature} from './geojson-layer/geojson-utils';
 // base layer

src/layers/src/wms-layer/wms-layer-icon.tsx

@@ -14,34 +14,43 @@ class WMSLayerIcon extends Component {
 
   static defaultProps = {
     height: '16px',
-    predefinedClassName: 'WMS-layer-icon',
-    totalColor: 2
+    predefinedClassName: 'wms-layer-icon',
+    totalColor: 2,
+    viewBox: '0 0 30 30'
   };
 
-  render(): React.ReactNode {
-    const baseColor = '#e0e0e0';
-    const lineColor = '#606060';
-    const accentColor = '#88c0d0';
-
+  render(): JSX.Element {
     return (
       <Base {...this.props}>
-        <svg
-          width="100%"
-          height="100%"
-          viewBox="0 0 64 64"
-          xmlns="http://www.w3.org/2000/svg"
-          role="img"
-          aria-label="WMS Layer Icon"
-        >
-          {/* Bottom (backmost) layer */}
-          <rect x="16" y="16" width="36" height="36" fill="none" stroke={accentColor} strokeWidth="2" opacity="0.4" />
-
-          {/* Middle layer */}
-          <rect x="12" y="12" width="36" height="36" fill="none" stroke={accentColor} strokeWidth="2" opacity="0.6" />
-
-          {/* Top (frontmost) tile */}
-          <rect x="8" y="8" width="36" height="36" fill={baseColor} stroke={lineColor} strokeWidth="2" />
-        </svg>
+        <g clipPath="url(#clip0_13806_131258)">
+          <path
+            d="M14.7595 12.2358L1 19.9828L15.2405 28L29 20.2536L14.7595 12.2358Z"
+            fill="currentColor"
+          />
+          <path
+            d="M14.7595 7.66919L1 15.4156L15.2405 23.4334L29 15.687L14.7595 7.66919Z"
+            fill="#9DA0B9"
+          />
+          <path d="M14.7595 2L1 9.74639L15.2405 17.7636L29 10.0172L14.7595 2Z" fill="#BFC0D1" />
+          <path d="M25.9696 10.8737H4.02124V19.267H25.9696V10.8737Z" fill="currentColor" />
+          <path
+            d="M5.51221 12.2358H6.77682L7.643 15.9522L8.58367 12.2358H9.64733L10.629 15.9725L11.5235 12.2358H12.6784L11.3341 17.6116H10.0637L9.0693 13.8953L8.05934 17.6116H6.85362L5.51221 12.2358Z"
+            fill="white"
+          />
+          <path
+            d="M13.4314 12.2358H15.0812L16.3689 15.5817L17.6393 12.2358H19.2561V17.6116H18.0146V13.8389L16.4884 17.6116H16.0796L14.5453 13.8389V17.6116H13.4314V12.2358Z"
+            fill="white"
+          />
+          <path
+            d="M20.1084 15.9274H21.3037C21.3574 16.4088 21.5659 16.8069 22.383 16.8069C22.9304 16.8069 23.293 16.5141 23.293 16.0929C23.293 15.6717 23.0621 15.5141 22.2536 15.3936C20.8429 15.2134 20.2643 14.7995 20.2643 13.7606C20.2643 12.8433 21.0508 12.1592 22.2692 12.1592C23.5107 12.1592 24.2354 12.7003 24.3353 13.7679H23.1851C23.1077 13.2792 22.8149 13.0539 22.2675 13.0539C21.7201 13.0539 21.4423 13.3017 21.4423 13.6626C21.4423 14.0461 21.6196 14.2257 22.4679 14.3468C23.8018 14.5123 24.4889 14.8659 24.4889 15.9797C24.4889 16.937 23.6874 17.6938 22.3841 17.6938C20.8718 17.6943 20.1777 17.0029 20.1084 15.9274Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_13806_131258">
+            <rect width="28" height="26" fill="white" transform="translate(1 2)" />
+          </clipPath>
+        </defs>
       </Base>
     );
   }

src/layers/src/wms-layer/wms-layer.ts

@@ -1,6 +1,6 @@
-// Imports
-// @ts-expect-error
-import {_WMSLayer as DeckWMSLayer} from '@deck.gl/geo-layers';
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
 import {
   Field,
   LayerBaseConfig,
@@ -11,13 +11,16 @@ import {
 import TileDataset from '../vector-tile/common-tile/tile-dataset';
 import WMSLayerIcon from './wms-layer-icon';
 import {FindDefaultLayerPropsReturnValue} from '../layer-utils';
-import {DatasetType, LAYER_TYPES} from '@kepler.gl/constants';
-import {KeplerTable as KeplerDataset} from '@kepler.gl/table';
+
 import AbstractTileLayer, {
   AbstractTileLayerVisConfigSettings,
   LayerData
 } from '../vector-tile/abstract-tile-layer';
+
+import {DatasetType, LAYER_TYPES} from '@kepler.gl/constants';
 import {notNullorUndefined} from '@kepler.gl/common-utils';
+import {WMSLayer as DeckWMSLayer} from '@kepler.gl/deckgl-layers';
+import {KeplerTable as KeplerDataset} from '@kepler.gl/table';
 
 // Types
 export type WMSTile = {
@@ -36,6 +39,7 @@ export type WMSLayerVisConfig = {
   wmsLayer: {
     name: string;
     title: string;
+    boundingBox: number[][];
   };
 };
 
@@ -78,7 +82,7 @@ export default class WMSLayer extends AbstractTileLayer<WMSTile, any[]> {
     this.updateLayerVisConfig({
       opacity: 0.8, // Default opacity
       wmsLayer: defaultWmsLayer,
-      transparent: false
+      transparent: true
     });
   }
 
@@ -148,6 +152,25 @@ export default class WMSLayer extends AbstractTileLayer<WMSTile, any[]> {
     };
   }
 
+  _getCurrentServiceLayer(dataset: KeplerDataset) {
+    const {visConfig} = this.config;
+    return visConfig.wmsLayer ?? dataset.metadata?.layers?.[0] ?? null;
+  }
+
+  updateLayerMeta(dataset: KeplerDataset): void {
+    if (dataset.type !== DatasetType.WMS_TILE) {
+      return;
+    }
+
+    const currentLayer = this._getCurrentServiceLayer(dataset);
+    if (currentLayer && currentLayer.boundingBox) {
+      const bb = currentLayer.boundingBox;
+      this.updateMeta({
+        bounds: [bb[0][0], bb[0][1], bb[1][0], bb[1][1]]
+      });
+    }
+  }
+
   renderLayer(opts) {
     const {visConfig} = this.config;
     const {data} = opts;

src/utils/src/application-config.ts

@@ -54,11 +54,6 @@ export type KeplerApplicationConfig = {
   // Raster Tile layer config
   // Raster Tile layer is under development and not ready for production use. Disabled by default.
   enableRasterTileLayer?: boolean;
-
-  // WMS layer config -- Experimental
-  // WMS layer is under development and not ready for production use. Disabled by default.
-  enableWMSLayer?: boolean;
-
   /** Whether to use Titiler v0.21 API endpoints instead of v0.11 */
   rasterServerUseLatestTitiler?: boolean;
   /** An array of URLs to shards of the raster tile server to be used by the raster tile layer. */
@@ -73,6 +68,10 @@ export type KeplerApplicationConfig = {
   rasterServerServerErrorsToRetry?: number[];
   /** Maximum number of simultaneous requests per raster server. 0 - no limit */
   rasterServerMaxPerServerRequests?: number;
+
+  // WMS layer config -- Experimental
+  // WMS layer is under development and not ready for production use. Disabled by default.
+  enableWMSLayer?: boolean;
 };
 
 const DEFAULT_APPLICATION_CONFIG: Required<KeplerApplicationConfig> = {
@@ -117,17 +116,16 @@ const DEFAULT_APPLICATION_CONFIG: Required<KeplerApplicationConfig> = {
   enableRasterTileLayer: false,
   rasterServerUseLatestTitiler: true,
 
-  // WMS layer config
-  // TODO: enabled for development purposes only, remove in production
-  enableWMSLayer: false,
-
   // TODO: provide a default free server or leave blank
   rasterServerUrls: [],
   rasterServerSupportsElevation: true,
   rasterServerMaxRetries: 1,
   rasterServerRetryDelay: 10000,
   rasterServerServerErrorsToRetry: [503],
-  rasterServerMaxPerServerRequests: 0
+  rasterServerMaxPerServerRequests: 0,
+
+  // WMS layer config
+  enableWMSLayer: false
 };
 
 const applicationConfig: Required<KeplerApplicationConfig> = DEFAULT_APPLICATION_CONFIG;