@gisatcz/deckgl-geolib 0.0.3 → 1.2.0

package/dist/esm/types/cogbitmaplayer/CogBitmapLayer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="deck.gl" />
+/// <reference types="deck.gl" />
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer } from '@deck.gl/geo-layers';
+import { GeoImageOptions } from '../geoimage/geoimage';
+declare class CogBitmapLayer extends CompositeLayer<any> {
+    static layerName: string;
+    id: string;
+    url: string;
+    static displayName: string;
+    constructor(id: string, url: string, options: GeoImageOptions);
+    initializeState(): void;
+    init(url: string): Promise<void>;
+    renderLayers(): TileLayer<unknown, import("@deck.gl/geo-layers/tile-layer/tile-layer").TileLayerProps<unknown>>;
+}
+export default CogBitmapLayer;

package/dist/esm/types/cogterrainlayer/CogTerrainLayer.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="deck.gl" />
+/// <reference types="deck.gl" />
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer } from '@deck.gl/geo-layers';
+import { GeoImageOptions } from '../geoimage/geoimage';
+declare class CogTerrainLayer extends CompositeLayer<any> {
+    static layerName: string;
+    bitmapUrl: string;
+    urlType: 'none' | 'tile' | 'cog';
+    id: string;
+    terrainUrl: string;
+    static displayName: string;
+    constructor(id: string, terrainUrl: string, terrainOptions: GeoImageOptions, bitmapUrl?: string, bitmapOptions?: GeoImageOptions);
+    initializeState(): void;
+    init(terrainUrl: string): Promise<void>;
+    renderLayers(): TileLayer<unknown, import("@deck.gl/geo-layers/tile-layer/tile-layer").TileLayerProps<unknown>>[];
+}
+export default CogTerrainLayer;

package/dist/esm/types/cogtiles/cogtiles.d.ts

@@ -0,0 +1,29 @@
+import { CogTiff, CogTiffImage } from '@cogeotiff/core';
+import LZWDecoder from './lzw';
+import GeoImage, { GeoImageOptions } from '../geoimage/geoimage';
+declare class CogTiles {
+    cog: CogTiff;
+    zoomRange: number[];
+    tileSize: number;
+    lowestOriginTileOffset: number[];
+    lowestOriginTileSize: number;
+    loaded: boolean;
+    geo: GeoImage;
+    lzw: LZWDecoder;
+    options: GeoImageOptions;
+    constructor(options: GeoImageOptions);
+    initializeCog(url: string): Promise<CogTiff>;
+    getTileSize(cog: CogTiff): number;
+    getZoomRange(cog: CogTiff): number[];
+    getBoundsAsLatLon(cog: CogTiff): [number, number, number, number];
+    getOriginAsLatLon(cog: CogTiff): number[];
+    getImageTileIndex(img: CogTiffImage): number[];
+    getResolutionFromZoomLevel(tileSize: number, z: number): number;
+    getZoomLevelFromResolution(tileSize: number, resolution: number): number;
+    getLatLon(input: number[]): number[];
+    getTile(x: number, y: number, z: number): Promise<string>;
+    getFormat(sampleFormat: number[] | number, bitsPerSample: number[] | number): any;
+    getNoDataValue(tags: any): number;
+    testCog(): Promise<void>;
+}
+export default CogTiles;

package/dist/esm/types/geoimage/geoimage.d.ts

@@ -0,0 +1,49 @@
+import { GeoTIFFImage } from 'geotiff';
+import chroma from 'chroma-js';
+export type GeoImageOptions = {
+    type: 'image' | 'terrain';
+    format?: 'uint8' | 'uint16' | 'uint32' | 'int8' | 'int16' | 'int32' | 'float32' | 'float64';
+    useHeatMap?: boolean;
+    useColorsBasedOnValues?: boolean;
+    useAutoRange?: boolean;
+    useDataForOpacity?: boolean;
+    useChannel?: number | null;
+    useSingleColor?: boolean;
+    clipLow?: number | null;
+    clipHigh?: number | null;
+    multiplier?: number;
+    color?: Array<number> | chroma.Color;
+    colorScale?: Array<string> | Array<chroma.Color>;
+    colorScaleValueRange?: number[];
+    colorsBasedOnValues?: [number | undefined, chroma.Color][];
+    alpha?: number;
+    noDataValue?: number;
+    numOfChannels?: number;
+    nullColor?: Array<number> | chroma.Color;
+    unidentifiedColor?: Array<number> | chroma.Color;
+    clippedColor?: Array<number> | chroma.Color;
+};
+export default class GeoImage {
+    data: GeoTIFFImage | undefined;
+    scale: (num: number, inMin: number, inMax: number, outMin: number, outMax: number) => number;
+    setUrl(url: string): Promise<void>;
+    getMap(input: string | {
+        width: number;
+        height: number;
+        rasters: any[];
+    }, options: GeoImageOptions): Promise<any>;
+    getHeightmap(input: string | {
+        width: number;
+        height: number;
+        rasters: any[];
+    }, options: GeoImageOptions): Promise<any>;
+    getBitmap(input: string | {
+        width: number;
+        height: number;
+        rasters: any[];
+    }, options: GeoImageOptions): Promise<any>;
+    getMinMax(array: any, options: any): any[];
+    getColorValue(dataArray: [], options: GeoImageOptions, arrayLength: number, numOfChannels?: number): any[];
+    getDefaultColor(size: any, nullColor: any): any[];
+    getColorFromChromaType(colorDefinition: any): any[];
+}

package/dist/esm/types/index.d.ts

@@ -1,2 +1,11 @@
-export * from './classes';
-export * from './hooks';
+import CogBitmapLayer from './cogbitmaplayer/CogBitmapLayer';
+import CogTerrainLayer from './cogterrainlayer/CogTerrainLayer';
+import cogtiles from './cogtiles/cogtiles';
+import GeoImage from './geoimage/geoimage';
+declare const _default: {
+    CogBitmapLayer: typeof CogBitmapLayer;
+    CogTerrainLayer: typeof CogTerrainLayer;
+    cogtiles: typeof cogtiles;
+    GeoImage: typeof GeoImage;
+};
+export default _default;

package/dist/esm/types/utilities/tileurls.d.ts

@@ -0,0 +1,4 @@
+declare function isTileServiceUrl(url: string): boolean;
+declare function isCogUrl(url: string): boolean;
+declare function getTileUrl(service: string, x: number, y: number, z: number): string;
+export { isTileServiceUrl, isCogUrl, getTileUrl };

package/package.json

@@ -1,49 +1,55 @@
 {
   "name": "@gisatcz/deckgl-geolib",
-  "homepage": "https://github.com/gisat-panther/deck.gl-geotiff",
-  "version": "0.0.3",
-  "description": "geoimage lib",
+  "version": "1.2.0",
   "private": false,
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
   "scripts": {
     "rollup": "rollup -c",
-    "test": "jest",
-    "publish": "npm publish --access public"
-  },
-  "author": "Filip Micanek",
-  "license": "ISC",
-  "peerDependencies": {
-    "deck.gl": "^8.6.8",
-    "geotiff": "^2.0.4",
-    "react": "^16.13.1 || ^17.0.2 || ^18.1.0 ",
-    "react-dom": "^16.13.1 || ^17.0.2 || ^18.1.0 "
+    "start": "yarn && yarn rollup",
+    "lint": "eslint src/**/* -c ./.eslintrc.cjs",
+    "lintFix": "eslint src/**/* -c ./.eslintrc.cjs --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.4",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
-    "@danmarshall/deckgl-typings": "^4.9.13",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@types/jest": "^27.4.0",
-    "babel-jest": "^27.5.1",
-    "deck.gl": "^8.6.8",
-    "geotiff": "^2.0.4",
-    "jest": "^27.5.1",
-    "rollup": "^2.74.0",
-    "rollup-plugin-dts": "^4.1.0",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint": "^8.42.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.5.1",
+    "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^5.0.4"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts",
   "dependencies": {
+    "@chunkd/source-url": "^6.0.0",
+    "@cogeotiff/core": "^7.2.1",
+    "@deck.gl/core": "^8.9.18",
+    "@deck.gl/extensions": "^8.9.18",
+    "@deck.gl/geo-layers": "^8.9.18",
+    "@deck.gl/layers": "^8.9.18",
+    "@deck.gl/mesh-layers": "^8.9.18",
+    "@math.gl/web-mercator": "^3.6.3",
+    "@types/chroma-js": "^2.4.0",
+    "chroma-js": "^2.4.2",
+    "eslint": "^8.42.0",
+    "geotiff": "^2.0.7",
     "jpeg-js": "^0.4.4",
-    "pako": "^2.0.4"
+    "pako": "^2.1.0",
+    "rollup": "^3.25.1",
+    "url": "^0.11.1"
   }
 }

package/rollup.config.mjs

@@ -0,0 +1,70 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+// import dts from 'rollup-plugin-dts';
+import { terser } from 'rollup-plugin-terser';
+import json from '@rollup/plugin-json';
+import path from 'path';
+
+// import resolve from 'rollup-plugin-node-resolve';
+
+const packageJson = {
+  main: './dist/cjs/',
+  module: './dist/esm/',
+};
+
+export default [
+  {
+    external: [
+      'isomorphic-fetch',
+      'chroma-js',
+      'react',
+      'react-dom',
+      '@deck.gl/core',
+      '@deck.gl/react',
+      '@deck.gl/geo-layers',
+      '@deck.gl/layers',
+      '@luma.gl/constants',
+      '@luma.gl/core',
+      '@loaders.gl/core',
+    ],
+    input: './src/index.ts',
+    inlineDynamicImports: true,
+    output: [
+      {
+        file: path.join(packageJson.main, 'index.js'),
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: path.join(packageJson.main, 'index.min.js'),
+        format: 'cjs',
+        sourcemap: true,
+        plugins: [terser()],
+      },
+      {
+        file: path.join(packageJson.module, 'index.js'),
+        format: 'esm',
+        sourcemap: true,
+      },
+      {
+        file: path.join(packageJson.module, 'index.min.js'),
+        format: 'esm',
+        sourcemap: true,
+        plugins: [terser()],
+      },
+    ],
+    plugins: [
+      json(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json', exclude: ['**.js'] }),
+    ],
+  },
+  // {
+  //   input: 'dist/esm/types/index.d.ts',
+  //   output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+  //   plugins: [dts()],
+  //   external: ['react', 'react-dom'],
+  // },
+];

package/src/cogbitmaplayer/CogBitmapLayer.ts

@@ -0,0 +1,104 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer } from '@deck.gl/geo-layers';
+import { BitmapLayer } from '@deck.gl/layers';
+import CogTiles from '../cogtiles/cogtiles';
+
+import { GeoImageOptions } from '../geoimage/geoimage';
+
+let cogTiles: CogTiles;
+
+let tileSize: number;
+let minZoom: number;
+let maxZoom: number;
+// let needsRerender: boolean = false;
+// let extent = [0, 0, 0, 0]
+
+class CogBitmapLayer extends CompositeLayer<any> {
+  static layerName = 'CogBitmapLayer';
+
+  // private _isLoaded: boolean;
+
+  id = '';
+
+  url: string;
+
+  static displayName: string;
+
+  constructor(id:string, url:string, options:GeoImageOptions) {
+    super({});
+    this.id = id;
+    // this.state = {
+    //   initialized: false,
+    // };
+    // this._isLoaded = false;
+    cogTiles = new CogTiles(options);
+
+    this.url = url;
+    // setTimeout(() => {
+    //   this.init(url);
+    // }, 500);
+  }
+
+  initializeState() {
+    this.state = {
+      initialized: false,
+    };
+
+    this.init(this.url);
+  }
+
+  async init(url:string) {
+    const cog = await cogTiles.initializeCog(url);
+    this.setState({ initialized: true });
+    tileSize = cogTiles.getTileSize(cog);
+    const zoomRange = cogTiles.getZoomRange(cog);
+    [minZoom, maxZoom] = zoomRange;
+
+    // console.log(zoomRange)
+
+    // extent = cogTiles.getBoundsAsLatLon(cog)
+
+    // console.log(extent)
+
+    // needsRerender = true;
+  }
+
+  renderLayers() {
+    if (cogTiles.cog) {
+      const layer = new TileLayer({
+        id: `${this.id}-${String(performance.now())}`,
+        getTileData: (tileData: any) => cogTiles.getTile(
+          tileData.index.x,
+          tileData.index.y,
+          tileData.index.z,
+        ),
+        minZoom,
+        maxZoom,
+        tileSize,
+        maxRequests: 6,
+        extent: cogTiles.cog ? cogTiles.getBoundsAsLatLon(cogTiles.cog) : null,
+
+        renderSubLayers: (props: any) => {
+          const {
+            bbox: {
+              west, south, east, north,
+            },
+          } = props.tile;
+
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [west, south, east, north],
+            opacity: 1, // 0.6
+          });
+        },
+      });
+      return layer;
+    }
+    return null;
+  }
+}
+
+CogBitmapLayer.displayName = 'CogBitmapLayer';
+
+export default CogBitmapLayer;

package/src/cogbitmaplayer/README.md

@@ -0,0 +1,52 @@
+# CogBitmapLayer
+A Deck.gl-compatible layer for loading and displaying tiled COG image data
+## Features
+### Tiled data rendering
+- Dynamically load and render tiled COG image data
+### Data visualization
+- Set visualization styling, colors, use heatmap, set data bounds, and more
+### Compression support
+- Supports JPEG, LZW nad DEFLATE data compression methods
+## Usage
+### Initialize the layer
+To create CogBitmapLayer, you need an URL of your COG and also an object containing [geoimage](/geoimage/README.md) options for data processing.
+
+#### Example
+Display simple rgb image. If you don't specify a channel to process, it defaults to grayscale, RGB, or RGBA depending on the channel count
+```typescript
+const bitmapLayer = new CogBitmapLayer(
+"cog.tif",
+{type:"image"}
+)
+```
+Display the second channel as a heatmap with data from 0 to 1000
+- Currently, when `useAutoRange` is `true` min and max data value for each image is calculated separately, thus it is recommended to set min and max values in `colorScaleValueRange`.
+
+```typescript
+const bitmapLayer = new CogBitmapLayer(
+"cog.tif",
+{type:"image", useHeatmap:true, useChannel:1, colorScaleValueRange: [0, 1000]}
+)
+```
+Display the second channel as a heatmap with data from 0 to 1000 with custom color scale <a id="custom-heatmap-color-scale"></a>
+
+```typescript
+const bitmapLayer = new CogBitmapLayer(
+"cog.tif",
+{type:"image", useHeatmap:true, useChannel:1, colorScale: ['green', '#3182bd', [255, 0, 0], colorScaleValueRange: [0, 1000]}
+)
+```
+Display the third channel as a green color and only show data from 100 to 200, the clipped data should be visualized with yellow color
+```typescript
+const bitmapLayer = new CogBitmapLayer(
+"cog.tif",
+{type:"image", useChannel:2, useSingleColor: true, clipLow:100, clipHigh: 200, color: [0, 255, 0], clippedColor: 'yellow'}
+)
+```
+Asign color to specific data values <a id="assigning-color-to-specific-data-value"></a>
+```typescript
+const bitmapLayer = new CogBitmapLayer(
+"cog.tif",
+{type:"image", useChannel:20, useColorsBasedOnValues: true, colorsBasedOnValues: [[1, 'red'], [2, [0,0,255]], [3, '#00FF00']]}
+)
+```

package/src/cogterrainlayer/CogTerrainLayer.ts

@@ -0,0 +1,174 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { TileLayer, TerrainLayer } from '@deck.gl/geo-layers';
+
+// FIXME
+// eslint-disable-next-line
+import { getTileUrl, isCogUrl, isTileServiceUrl } from '../utilities/tileurls';
+import CogTiles from '../cogtiles/cogtiles';
+
+import { GeoImageOptions } from '../geoimage/geoimage';
+
+let terrainCogTiles: CogTiles;
+let bitmapCogTiles: CogTiles;
+
+let tileSize: number;
+let minZoom: number;
+let maxZoom: number;
+// let needsRerender: boolean = false;
+
+class CogTerrainLayer extends CompositeLayer<any> {
+  static layerName = 'CogTerrainLayer';
+
+  bitmapUrl: string;
+
+  urlType: 'none' | 'tile' | 'cog' = 'none';
+
+  id = '';
+
+  terrainUrl: string;
+
+  static displayName: string;
+
+  constructor(
+    id:string,
+    terrainUrl: string,
+    terrainOptions: GeoImageOptions,
+    bitmapUrl?: string,
+    bitmapOptions?: GeoImageOptions,
+  ) {
+    super({});
+    this.id = id;
+
+    if (bitmapUrl) {
+      if (isTileServiceUrl(bitmapUrl)) {
+        this.bitmapUrl = bitmapUrl;
+        this.urlType = 'tile';
+      } else if (isCogUrl(bitmapUrl)) {
+        bitmapCogTiles = new CogTiles(bitmapOptions!);
+        bitmapCogTiles.initializeCog(bitmapUrl);
+        this.urlType = 'cog';
+      } else {
+        console.warn('URL needs to point to a valid cog file, or needs to be in the {x}{y}{z} format.');
+      }
+    }
+
+    terrainCogTiles = new CogTiles(terrainOptions);
+    // this.init(terrainUrl);
+    this.terrainUrl = terrainUrl;
+  }
+
+  initializeState() {
+    this.state = {
+      initialized: false,
+    };
+
+    this.init(this.terrainUrl);
+  }
+
+  // async initializeState() {}
+
+  async init(terrainUrl: string) {
+    // console.log("LAYER INITIALIZE STATE");
+
+    const cog = await terrainCogTiles.initializeCog(terrainUrl);
+    tileSize = terrainCogTiles.getTileSize(cog);
+
+    const zoomRange = terrainCogTiles.getZoomRange(cog);
+    [minZoom, maxZoom] = zoomRange;
+
+    this.setState({ initialized: true });
+  }
+
+  renderLayers() {
+    if (terrainCogTiles.cog) {
+    // console.log("LAYER RENDER");
+
+      let bitmapTile: string;
+      // let zoomOffset = 0
+
+      switch (this.urlType) {
+        case 'tile':
+        // zoomOffset = 0
+          break;
+        case 'cog':
+        // zoomOffset = -2
+          break;
+        default:
+      }
+      // console.log("is fully loaded: " + loaded);
+      const layer = new TileLayer({
+        id: `${this.id}-${String(performance.now())}`,
+        zoomOffset: -1,
+        getTileData: (tileData: any) => terrainCogTiles.getTile(
+          tileData.index.x,
+          tileData.index.y,
+          tileData.index.z,
+        ),
+        minZoom,
+        maxZoom,
+        tileSize,
+        maxRequests: 6,
+        refinementStrategy: 'best-available',
+        extent: terrainCogTiles.getBoundsAsLatLon(terrainCogTiles.cog),
+
+        renderSubLayers: (props: any) => {
+          if (props.data && (props.tile.index.x !== undefined)) {
+            switch (this.urlType) {
+              case 'tile':
+                bitmapTile = getTileUrl(
+                  this.bitmapUrl,
+                  props.tile.index.x,
+                  props.tile.index.y,
+                  props.tile.index.z,
+                );
+                break;
+              case 'cog':
+                bitmapTile = bitmapCogTiles.getTile(
+                  props.tile.index.x,
+                  props.tile.index.y,
+                  props.tile.index.z,
+                );
+                break;
+              default:
+                bitmapTile = null;
+            }
+
+            return new TerrainLayer({
+              id: (`terrain-${props.tile.index.x}-${props.tile.index.y}-${props.tile.index.z}`),
+              pickable: true,
+              elevationDecoder: {
+                rScaler: 6553.6,
+                gScaler: 25.6,
+                bScaler: 0.1,
+                offset: -10000,
+              },
+              elevationData: props.data,
+              texture: bitmapTile,
+              bounds: [props.tile.bbox.west,
+                props.tile.bbox.south,
+                props.tile.bbox.east,
+                props.tile.bbox.north,
+              ],
+              minZoom,
+              maxZoom,
+              loadOptions: {
+                terrain: {
+                  skirtHeight: 2000,
+                  tesselator: 'martini',
+                },
+              },
+              meshMaxError: 12,
+            });
+          }
+          return null;
+        },
+      });
+      return [layer];
+    }
+    return [];
+  }
+}
+
+CogTerrainLayer.displayName = 'CogTerrainLayer';
+
+export default CogTerrainLayer;

package/src/cogterrainlayer/README.md

@@ -0,0 +1,41 @@
+# CogTerrainLayer
+A Deck.gl-compatible layer for loading and displaying tiled COG height data
+## Features
+### Tiled terrain rendering
+- Dynamically load and render tiled COG height data
+- Overlay another COG as a bitmap, or supply a tile service template url.
+### Data visualization
+- Multiply terrain height
+- Clamp COG data on top of generated terrain
+- Set visualization styling, colors, use heatmap, set data bounds, and more
+## Usage
+### Initialize the layer
+To create CogTerrainLayer, you need an URL of your COG and also an object containing [geoimage](/geoimage/README.md) options for data processing.
+For this layer, only needed options are `type`, `format`, and optionally `useChannel` and `multiplier`.
+You can also specify another COG as an overlay and it's corresponding options, or just supply a tile service template url. Overlay options use all of [geoimage](/geoimage/README.md) options and work only with COG
+
+#### Example
+Display simple terrain
+```
+const terrainLayer = new CogTerrainLayer(
+"cog.tif",
+{type:"terrain", format:"UINT8"}
+)
+```
+Display terrain with tile service overlay
+```
+const terrainLayer = new CogTerrainLayer(
+"cog.tif",
+{type:"terrain", format:"UINT8"},
+"tile-service.com/{z}/{x}/{y}.png"
+)
+```
+Display terrain with stylized COG overlay
+```
+const terrainLayer = new CogTerrainLayer(
+"cog.tif",
+{type:"terrain", format:"UINT8"},
+"cog-overlay.tif",
+{type:"image, useHeatMap:true, useChannel:2}
+)
+```