Support WMS layer

examples/demo-app/src/app.js

@@ -151,7 +151,7 @@ class App extends Component {
     // this._loadPointData();
     // this._loadGeojsonData();
     // this._loadTripGeoJson();
-    this._loadGraphLayer();
+    // this._loadGraphLayer();
     // this._loadIconData();
     // this._loadH3HexagonData();
     // this._loadH3HData();
@@ -160,6 +160,7 @@ class App extends Component {
     // this._loadBelAQI();
     // Notifications
     // this._loadMockNotifications();
+    this._addWMSLayer();
   }
 
   async _loadH3HData() {
@@ -249,32 +250,72 @@ class App extends Component {
   //   );
   // };
 
+  _addWMSLayer = () => {
+    this.props.dispatch(
+      addDataToMap({
+        datasets: [
+          {
+            info: {
+              id: `wms-layer-1`,
+              label: `WMS Layer`
+            },
+            data: processRowObject([
+              {
+                url:
+                  'https://api.dev.precinct.odt.imec-apt.be/geoserver/Cityflows/wms?layers=Cityflows%3Astreets_daily_profiles&time=1970-01-01T09:00:00.000Z&CQL_FILTER=profile_type+=+%27FRIDAY%27',
+                crs: 'EPSG:4326',
+                styles: 'Cityflows:cityflows-profile'
+              }
+            ])
+          }
+        ],
+        config: {
+          keepExistingConfig: true,
+          version: 'v1',
+          config: {
+            visState: {
+              layers: [
+                {
+                  label: 'wms layer',
+                  type: 'wms',
+                  config: {
+                    dataId: 'wms-layer-1',
+                    isVisible: true
+                  }
+                }
+              ]
+            }
+          }
+        }
+      })
+    );
+  };
+
   _addTileLayer = () => {
     this.props.dispatch(
       addDataToMap({
         datasets: [
           {
             info: {
               id: `tile-layer-1`,
-              label: `WMTS Layer`
+              label: `Tile Layer`
             },
             data: processRowObject([
               {
                 url:
                   'http://localhost:8085/geoserver/gwc/service/wmts?layer=geoserver-imec:19_05_2022 10_30_00-01&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}'
-                // 'http://localhost:8085/geoserver/gwc/service/wmts?layer=geoserver-imec:pm10_atmo_street-20190121-0600UT&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}'
               }
             ])
           }
         ],
         config: {
           keepExistingConfig: true,
-          version: 'v1',
           config: {
             visState: {
               layers: [
                 {
                   type: 'tile',
+                  label: 'tile layer',
                   config: {
                     dataId: 'tile-layer-1',
                     isVisible: true

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@imec-int/kepler.gl",
   "author": "imec <admin@imec-apt.be>",
-  "version": "2.5.5-13",
+  "version": "2.5.5-14",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
@@ -285,4 +285,4 @@
   "volta": {
     "node": "12.19.0"
   }
-}
+}

src/.npmrc

@@ -0,0 +1 @@
+@imec-int:registry=https://npm.pkg.github.com

src/layers/base-layer.js

@@ -696,7 +696,10 @@ class Layer {
    * @returns {boolean} yes or no
    */
   hasLayerData(layerData) {
-    if (this.type === 'tile' && Boolean(layerData.url && layerData.url.length)) {
+    if (
+      (this.type === 'tile' || this.type === 'wms') &&
+      Boolean(layerData.url && layerData.url.length)
+    ) {
       return true;
     }
     if (!layerData) {

src/layers/index.d.ts

@@ -102,6 +102,7 @@ export type LayerClassesType = {
   trip: Layer;
   s2: Layer;
   tile: Layer;
+  wms: Layer;
   graph: Layer;
 };
 export const LayerClasses: LayerClassesType;

src/layers/index.js

@@ -34,6 +34,7 @@ import {default as S2GeometryLayer} from './s2-geometry-layer/s2-geometry-layer'
 import {default as TileLayer} from './tile-layer/tile-layer';
 import {default as GraphLayer} from './graph-layer/graph-layer';
 import {LAYER_TYPES} from './types';
+import {default as WMSLayer} from './wms-layer/wms-layer';
 
 // base layer
 export {default as Layer, OVERLAY_TYPE, LAYER_ID_LENGTH, colorMaker} from './base-layer';
@@ -54,6 +55,7 @@ export const KeplerGlLayers = {
   TripLayer,
   S2GeometryLayer,
   TileLayer,
+  WMSLayer,
   GraphLayer
 };
 
@@ -72,6 +74,7 @@ export const LayerClasses = {
   [LAYER_TYPES.trip]: TripLayer,
   [LAYER_TYPES.s2]: S2GeometryLayer,
   [LAYER_TYPES.tile]: TileLayer,
+  [LAYER_TYPES.wms]: WMSLayer,
   [LAYER_TYPES.graph]: GraphLayer
 };
 

src/layers/tile-layer/tile-layer.js

@@ -46,30 +46,6 @@ export default class TileLayer extends Layer {
     return TileLayerIcon;
   }
 
-  // get visualChannels() {
-  //   return {
-  //     color: {
-  //       ...super.visualChannels.color,
-  //       property: 'color',
-  //       key: 'sourceColor',
-  //       accessor: 'getSourceColor',
-  //       defaultValue: config => config.color
-  //     },
-  //     targetColor: {
-  //       ...super.visualChannels.color,
-  //       property: 'targetColor',
-  //       key: 'targetColor',
-  //       accessor: 'getTargetColor',
-  //       defaultValue: config => config.visConfig.targetColor || config.color
-  //     },
-  //     size: {
-  //       ...super.visualChannels.size,
-  //       accessor: 'getWidth',
-  //       property: 'stroke'
-  //     }
-  //   };
-  // }
-
   formatLayerData(datasets, oldLayerData) {
     if (this.config.dataId === null) {
       return {};
@@ -78,9 +54,7 @@ export default class TileLayer extends Layer {
     // extract URL from row 0 column 0
     const newUrl = dataContainer.valueAt(0, 0);
     const oldUrl = oldLayerData ? oldLayerData.url : undefined;
-    console.log(oldLayerData);
     let url = oldUrl;
-    console.log(oldUrl, newUrl);
     if (oldUrl !== newUrl) {
       url = newUrl;
     }

src/layers/types.js

@@ -35,5 +35,6 @@ export const LAYER_TYPES = keyMirror({
   trip: null,
   s2: null,
   tile: null,
+  wms: null,
   graph: null
 });

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

@@ -0,0 +1,50 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+class TileLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'tile-layer-icon',
+    totalColor: 1
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path
+          d="M512 288c0 35.35-21.49 64-48 64c-32.43 0-31.72-32-55.64-32C394.9 320 384 330.9 384 344.4V480c0 17.67-14.33 32-32 32h-71.64C266.9 512 256 501.1 256 487.6C256 463.1 288 464.4 288 432c0-26.51-28.65-48-64-48s-64 21.49-64 48c0 32.43 32 31.72 32 55.64C192 501.1 181.1 512 167.6 512H32c-17.67 0-32-14.33-32-32v-135.6C0 330.9 10.91 320 24.36 320C48.05 320 47.6 352 80 352C106.5 352 128 323.3 128 288S106.5 223.1 80 223.1c-32.43 0-31.72 32-55.64 32C10.91 255.1 0 245.1 0 231.6v-71.64c0-17.67 14.33-31.1 32-31.1h135.6C181.1 127.1 192 117.1 192 103.6c0-23.69-32-23.24-32-55.64c0-26.51 28.65-47.1 64-47.1s64 21.49 64 47.1c0 32.43-32 31.72-32 55.64c0 13.45 10.91 24.36 24.36 24.36H352c17.67 0 32 14.33 32 31.1v71.64c0 13.45 10.91 24.36 24.36 24.36c23.69 0 23.24-32 55.64-32C490.5 223.1 512 252.7 512 288z"
+          className="cr2"
+        />
+      </Base>
+    );
+  }
+}
+
+export default TileLayerIcon;

src/layers/wms-layer/wms-layer.js

@@ -0,0 +1,112 @@
+import Layer from '../base-layer';
+import {TileLayer as DeckGLTileLayer} from '@deck.gl/geo-layers';
+import {BitmapLayer} from '@deck.gl/layers';
+import WMSLayerIcon from './wms-layer-icon';
+import {load} from '@loaders.gl/core';
+
+export const WMSLayerVisConfigs = {
+  opacity: 'opacity',
+  thickness: 'thickness',
+  colorRange: 'colorRange',
+  sizeRange: 'strokeWidthRange',
+  targetColor: 'targetColor'
+};
+
+export default class WMSLayer extends Layer {
+  constructor(props) {
+    super(props);
+
+    this.registerVisConfig(WMSLayerVisConfigs);
+  }
+
+  get type() {
+    return 'wms';
+  }
+
+  get layerIcon() {
+    return WMSLayerIcon;
+  }
+
+  formatLayerData(datasets, oldLayerData) {
+    if (this.config.dataId === null) {
+      return {};
+    }
+    const {dataContainer} = datasets[this.config.dataId];
+    // extract URL from row 0 column 0
+    const newUrl = dataContainer.valueAt(0, 0);
+    const styles = dataContainer.valueAt(0, 2);
+    const crs = dataContainer.valueAt(0, 1);
+    const oldUrl = oldLayerData ? oldLayerData.url : undefined;
+    let url = oldUrl;
+    if (oldUrl !== newUrl) {
+      url = newUrl;
+    }
+    const accessors = this.getAttributeAccessors({
+      dataAccessor: dc => d => d,
+      dataContainer
+    });
+    return {
+      url,
+      styles,
+      crs,
+      ...accessors
+    };
+  }
+
+  shouldRenderLayer() {
+    return typeof this.type === 'string' && this.config.isVisible && this.hasAllColumns();
+  }
+
+  renderLayer(opts) {
+    const {data} = opts;
+    const {url, crs, styles} = data;
+
+    // Create new deck.gl WMS Layer with Bitmap sublayers
+    return [
+      new DeckGLTileLayer({
+        data: url,
+        minZoom: 0,
+        maxZoom: 19,
+        tileSize: 512,
+
+        getTileData(tile) {
+          const wmsUrl = url;
+          const {bbox} = tile;
+          const {east, north, south, west} = bbox;
+          const urlQueryStringParams = {
+            bbox: [west, south, east, north].join(','),
+            format: 'image/png',
+            height: 512,
+            request: 'GetMap',
+            service: 'WMS',
+            srs: crs ? crs : 'EPSG:4326',
+            styles: styles ? styles : '',
+            version: '1.1.1',
+            width: 512,
+            transparent: 'true'
+          };
+          const urlQueryString = Object.keys(urlQueryStringParams)
+            .map(key => `${key}=${urlQueryStringParams[key]}`)
+            .join('&');
+
+          return load(`${wmsUrl}&${urlQueryString}`);
+        },
+
+        renderSubLayers: props => {
+          const {
+            bbox: {west, south, east, north}
+          } = props.tile;
+
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north]
+          });
+        },
+        onTileError: () => {
+          return;
+        }
+      })
+    ];
+  }
+}

src/localization/en.js

@@ -119,7 +119,9 @@ export default {
       hexagonid: 'H3',
       trip: 'trip',
       s2: 'S2',
-      '3d': '3D'
+      '3d': '3D',
+      tile: 'tile',
+      wms: 'WMS'
     }
   },
   layerVisConfigs: {