@gisatcz/deckgl-geolib 1.11.0-dev.9 → 1.11.1-dev.0

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

@@ -43,8 +43,6 @@ export type CogBitmapLayerProps = _CogBitmapLayerProps & TileLayerProps<MeshAndT
 export default class CogBitmapLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<ExtraPropsT & Required<_CogBitmapLayerProps & Required<TileLayerProps<MeshAndTexture>>>> {
     static defaultProps: DefaultProps<CogBitmapLayerProps>;
     static layerName: string;
-    minZoom: number;
-    maxZoom: number;
     state: {
         initialized: boolean;
         isTiled?: boolean;

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

@@ -60,12 +60,12 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
     static defaultProps: DefaultProps<TerrainLayerProps>;
     static layerName: string;
     terrainUrl: string;
-    minZoom: number;
-    maxZoom: number;
     state: {
         isTiled?: boolean;
         terrain?: MeshAttributes;
         zRange?: ZRange | null;
+        minZoom: number;
+        maxZoom: number;
     };
     initializeState(context: any): Promise<void>;
     init(terrainUrl: string): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisatcz/deckgl-geolib",
-  "version": "1.11.0-dev.9",
+  "version": "1.11.1-dev.0",
   "private": false,
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/cogbitmaplayer/CogBitmapLayer.ts

@@ -146,10 +146,6 @@ export default class CogBitmapLayer<ExtraPropsT extends {} = {}> extends Composi
 
   static layerName = 'CogBitmapLayer';
 
-  minZoom: number;
-
-  maxZoom: number;
-
   state!: {
     initialized: boolean;
     isTiled?: boolean;

package/src/cogbitmaplayer/README.md

@@ -2,21 +2,26 @@
 
 A Deck.gl-compatible layer for loading and displaying tiled COG image data
 
-### Features
-#### Tiled data rendering
+## Features
+### Tiled data rendering
 - Dynamically load and render tiled COG image data
-#### Data visualization
+### Data visualization
 - Set visualization styling, colors, use heatmap, set data bounds, and more
-#### Compression support
+### Compression support
 - Supports DEFLATE data compression methods
 
 [//]: # (- 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.
+## Usage
+### Initialize the layer
+To create CogBitmapLayer, you need an id name, URL of your COG, declare that data is tiled, 
+and also an object containing [geoimage](../geoimage/README.md) options for data processing.
 
-#### Example
-Import package into project and create terrain layer
+### Examples
+> **Note**: The examples below showcase only a subset of available rendering options. 
+> To view all configurable options for `CogBitmapLayer`, 
+> refer to the [geoimage](../geoimage/README.md) library documentation.
+
+Import package into project and create bitmap layer
 
 ```typescript
 import geolib from '@gisatcz/deckgl-geolib';
@@ -25,41 +30,77 @@ const CogBitmapLayer = geolib.CogBitmapLayer;
 ```
 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_data_url.tif',
-    {type:'image'}
-)
+const cogLayer = new CogBitmapLayer(
+  id: 'cog_bitmap_name',
+  rasterData:  'cog_bitmap_data_url.tif',
+  isTiled: true,
+  cogBitmapOptions: {
+    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_data_url.tif',
-    {type:'image', useHeatmap:true, useChannel:1, colorScaleValueRange: [0, 1000]}
-)
+const cogLayer = new CogBitmapLayer(
+  id: 'cog_bitmap_name',
+  rasterData:  'cog_bitmap_data_url.tif',
+  isTiled: true,
+  cogBitmapOptions: {
+      type: 'image',
+        // useAutoRange: true,
+      colorScaleValueRange: [0,1000]
+      useChannel: 1,
+  }
+);
 ```
 <a name='custom-heatmap-color-scale'></a>
 Display the second channel as a heatmap with data from 0 to 1000 with custom color scale 
 
 ```typescript
-const bitmapLayer = new CogBitmapLayer(
-    'cog.tif',
-    {type:'image', useHeatmap:true, useChannel:1, colorScale: ['green', '#3182bd', [255, 0, 0], colorScaleValueRange: [0, 1000]}
-)
+const cogLayer = new CogBitmapLayer(
+  id: 'cog_bitmap_name',
+  rasterData:  'cog_bitmap_data_url.tif',
+  isTiled: true,
+  cogBitmapOptions: {
+    type: 'image',
+    colorScaleValueRange: [0,1000]
+    useChannel: 1,
+    useHeatmap: true,
+    colorScale: ['green', '#3182bd', [255, 0, 0]]
+  }
+);
 ```
 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'}
-)
+const cogLayer = new CogBitmapLayer(
+  id: 'cog_bitmap_name',
+  rasterData:  'cog_bitmap_data_url.tif',
+  isTiled: true,
+  cogBitmapOptions: {
+    type: 'image',
+    useChannel: 2,
+    useSingleColor: true,
+    clipLow: 100, 
+    clipHigh: 200,
+    color: [0, 255, 0, 255], 
+    clippedColor: 'yellow'
+  }
+);
 ```
 <a name='assigning-color-to-specific-data-value'></a>
-Asign color to specific data values 
+Assign color to specific data values 
 ```typescript
-const bitmapLayer = new CogBitmapLayer(
-    'cog.tif',
-    {type:'image', useChannel:20, useColorsBasedOnValues: true, colorsBasedOnValues: [[1, 'red'], [2, [0,0,255]], [3, '#00FF00']]}
-)
+const cogLayer = new CogBitmapLayer(
+  id: 'cog_bitmap_name',
+  rasterData:  'cog_bitmap_data_url.tif',
+  isTiled: true,
+  cogBitmapOptions: {
+    type: 'image',
+    useChannel: 20,
+    useColorsBasedOnValues: true,
+    colorsBasedOnValues: [[1, 'red'], [2, [0, 0, 255]], [3, '#00FF00']]
+  }
+);
 ```

package/src/cogterrainlayer/CogTerrainLayer.ts

@@ -186,14 +186,12 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
 
   terrainUrl: string;
 
-  minZoom: number;
-
-  maxZoom: number;
-
   state!: {
 	  isTiled?: boolean;
 	  terrain?: MeshAttributes;
 	  zRange?: ZRange | null;
+    minZoom: number;
+    maxZoom: number;
 	};
 
   async initializeState(context: any) {
@@ -212,9 +210,10 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
     // this.tileSize = this.terrainCogTiles.getTileSize(cog);
 
     const zoomRange = this.state.terrainCogTiles.getZoomRange(cog);
-    [this.minZoom, this.maxZoom] = zoomRange;
 
-    this.setState({ initialized: true });
+    const [minZoom, maxZoom] = zoomRange;
+
+    this.setState({ initialized: true, minZoom, maxZoom });
   }
 
   updateState({ props, oldProps }: UpdateParameters<this>): void {
@@ -379,8 +378,6 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
       meshMaxError,
       elevationDecoder,
       tileSize,
-      maxZoom,
-      minZoom,
       extent,
       maxRequests,
       onTileLoad,
@@ -410,8 +407,8 @@ export default class TerrainLayer<ExtraPropsT extends {} = {}> extends Composite
           onViewportLoad: this.onViewportLoad.bind(this),
           zRange: this.state.zRange || null,
           tileSize,
-          maxZoom,
-          minZoom,
+          minZoom: this.state.minZoom,
+          maxZoom: this.state.maxZoom,
           extent,
           maxRequests,
           onTileLoad,

package/src/cogterrainlayer/README.md

@@ -2,23 +2,24 @@
 
 A Deck.gl-compatible layer for loading and displaying tiled COG height data
 
-### Features
+## Features
 
-#### Tiled terrain rendering
+### 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
+### 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
+## 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`, and optionally `useChannel` and `multiplier`.
+For this layer, only needed terrain options are `type`, and optionally `multiplier`, `terrainSkirtHeight`, `terrainMinValue`.
+
 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
+### Example
 Import package into project and create terrain layer
 
 ```typescript
@@ -29,15 +30,72 @@ const CogTerrainLayer = geolib.CogTerrainLayer;
 Display simple terrain
 ```typescript
 const cogLayer = new CogTerrainLayer(
-    'CogTerrainLayer',
-    'cog_data_url.tif',
-    { type: 'terrain'},
+  id: 'cog_terrain_name',
+  elevationData:  'cog_terrain_data_url.tif',
+  isTiled: true,
+  tileSize: 256,
+  operation: 'terrain+draw',
+  terrainOptions: {
+        type: 'terrain', 
+    }
+);
+```
+Display multiplied terrain with custom skirt height 
+(height of individual tiles edges, so there are no white spaces between individual 3D tiles) and defined minimal terrain value.
+```typescript
+const cogLayer = new CogTerrainLayer(
+  id: 'cog_terrain_name',
+  elevationData:  'cog_terrain_data_url.tif',
+  isTiled: true,
+  tileSize: 256,
+  operation: 'terrain+draw',
+  terrainOptions: {
+        type: 'terrain', 
+        multiplier: 1,
+        terrainSkirtHeight: 1,
+        terrainMinValue: 200,
+    }
+);
+```
+Adjust `meshMaxError`: Martini error tolerance in meters, smaller number -> more detailed mesh, **(default 4.0)**.
+```typescript
+const cogLayer = new CogTerrainLayer(
+  id: 'cog_terrain_name',
+  elevationData:  'cog_terrain_data_url.tif',
+  isTiled: true,
+  useChannel: null,
+  tileSize: 256,
+  meshMaxError: 1,
+  operation: 'terrain+draw',
+  terrainOptions: {
+        type: 'terrain', 
+    }
 );
 ```
 
+[//]: # (TODO check if useChannel works properly)
+Adjust `opacity` and display second channel.
+```typescript
+const cogLayer = new CogTerrainLayer(
+  id: 'cog_terrain_name',
+  elevationData:  'cog_terrain_data_url.tif',
+  opacity: 0.5,
+  isTiled: true,
+  useChannel: 1,
+  tileSize: 256,
+  meshMaxError: 1,
+  operation: 'terrain+draw',
+  terrainOptions: {
+        type: 'terrain', 
+    }
+);
+```
+
+[//]: # (TODO update overlay generation)
+
 Display terrain with tile service overlay
 ```typescript
-const terrainLayer = new CogTerrainLayer(
+const cogLayer = new CogTerrainLayer(
     'cog_data_url.tif',
     {type:'terrain'},
     'tile-service.com/{z}/{x}/{y}.png'
@@ -45,7 +103,7 @@ const terrainLayer = new CogTerrainLayer(
 ```
 Display terrain with stylized COG overlay
 ```typescript
-const terrainLayer = new CogTerrainLayer(
+const cogLayer = new CogTerrainLayer(
     'cog.tif',
     {type:'terrain'},
     'cog-overlay.tif',

package/src/geoimage/README.md

@@ -1,5 +1,5 @@
 # Geoimage
-##### A Javascript library for generating bitmaps out of **geoTIFF** files.
+##### A Javascript library for rendering bitmaps and terrain out of **geoTIFF** files.
 <img src = "/images/example0crop1.png" width = "100%">
 
 ### Features
@@ -9,7 +9,9 @@
 
 ##### Terrain texture generation
 - Generate heightmaps out of single-channel geoTIFF elevation data.
-- The **elevation data** is encoded into the bitmap as [Mapbox Terrain-RGB](https://docs.mapbox.com/data/tilesets/guides/access-elevation-data/#decode-data).
+- Create tiled mesh layer which represents height values fron geoTIFF without any compression to height PNG. 
+- Created mesh is TIN generated by [martini algorithm](https://github.com/mapbox/martini).
+
 
 ##### Data visualisation options
 - Color
@@ -19,6 +21,7 @@
 - Automatic data range
 - Manual data range
 - Assign color to specific data value (example [here](../cogbitmaplayer/README.md#assigning-color-to-specific-data-value))
+
 ### Data processing options
 - `useAutoRange : boolean` - set automatic range of color gradient **(default false)**
 - `useDataForOpacity : boolean` - visualise data with opacity of each pixel according to its value **(default false)**
@@ -48,15 +51,12 @@ etc. and [Color Brewer pallete names](https://www.datanovia.com/en/wp-content/up
 in this format: `chroma.brewer.Greens`
 
 #### Additional terrain processing options
-- `terrainMinValue: number` - noData value retreived from input file's metadata is subsitute by this value **(default 0)**
+- `terrainMinValue: number` - noData value retrieved from input file's metadata is substitute by this value **(default 0)**
 - `terrainSkirtHeight: number` - defines height of individual tiles edges, so there are no white spaces between individual 3D tiles **(default 100)**
-- `terrainColor: chroma.Color` - color of terrain model **(default [133, 133, 133, 255])**
 
-- Setting **opacity for terrain layers**: when using a terrain layer without defining a bitmap overlay, 
-setting the opacity of the model is straightforward: set `alpha` in terrainOptions (0-100). 
-However, if a bitmap overlay is defined (`bitmapUrl` and `bitmapOptions`), the opacity for 
-the overlay is taken from its definition in `bitmapOptions`, not from `terrainOptions` 
-(which is recommended to be set to 100 unless the opacities are combined). 
+[//]: # (- `terrainColor: chroma.Color` - color of terrain model **&#40;default [133, 133, 133, 255]&#41;**)
+
+- Setting **opacity for terrain layers**: Terrayin layer is ordinary Deck.gl layer instance, so opacity is common prop.
 
 ### Return options
 **Method returns Image DataUrl**