@gisatcz/deckgl-geolib 1.6.0-dev.0 → 1.7.0

package/package.json

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

package/src/cogbitmaplayer/README.md

@@ -1,52 +1,65 @@
 # CogBitmapLayer
+
 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
-- 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.
+#### 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.
 
 #### Example
+Import package into project and create terrain layer
+
+```typescript
+import geolib from '@gisatcz/deckgl-geolib';
+
+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.tif",
-{type:"image"}
+    'cog_data_url.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`.
+- 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]}
+    'cog_data_url.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>
+<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]}
+    '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'}
+    '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>
+<a name='assigning-color-to-specific-data-value'></a>
+Asign 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']]}
+    'cog.tif',
+    {type:'image', useChannel:20, useColorsBasedOnValues: true, colorsBasedOnValues: [[1, 'red'], [2, [0,0,255]], [3, '#00FF00']]}
 )
 ```

package/src/cogterrainlayer/README.md

@@ -1,41 +1,54 @@
 # CogTerrainLayer
+
 A Deck.gl-compatible layer for loading and displaying tiled COG height data
-## Features
-### Tiled terrain rendering
+
+### 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
+#### 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
+### 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`.
+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
+Import package into project and create terrain layer
+
+```typescript
+import geolib from '@gisatcz/deckgl-geolib';
+
+const CogTerrainLayer = geolib.CogTerrainLayer;
 ```
-const terrainLayer = new CogTerrainLayer(
-"cog.tif",
-{type:"terrain", format:"UINT8"}
-)
+Display simple terrain
+```typescript
+const cogLayer = new CogTerrainLayer(
+    'CogTerrainLayer',
+    'cog_data_url.tif',
+    { type: 'terrain'},
+);
 ```
+
 Display terrain with tile service overlay
-```
+```typescript
 const terrainLayer = new CogTerrainLayer(
-"cog.tif",
-{type:"terrain", format:"UINT8"},
-"tile-service.com/{z}/{x}/{y}.png"
+    'cog_data_url.tif',
+    {type:'terrain'},
+    'tile-service.com/{z}/{x}/{y}.png'
 )
 ```
 Display terrain with stylized COG overlay
-```
+```typescript
 const terrainLayer = new CogTerrainLayer(
-"cog.tif",
-{type:"terrain", format:"UINT8"},
-"cog-overlay.tif",
-{type:"image, useHeatMap:true, useChannel:2}
+    'cog.tif',
+    {type:'terrain'},
+    'cog-overlay.tif',
+    {type:'image', useHeatMap:true, useChannel:2}
 )
 ```

package/src/cogtiles/README.md

@@ -1,12 +1,12 @@
-# COGTILES
+# COG Tiles
 
 
 
-#### A Javascript library for easier tile functionality with COG files
+##### A Javascript library for easier tile functionality with COG files
 
 
 
-## Features
+### Features
 
 Class allows using CogTiff files with Deck.gl TileLayer.
 
@@ -20,7 +20,7 @@ Provides extra functionality for CogTiff files
 
 
 
-## Methods
+### Methods
 
 
 

package/src/geoimage/README.md

@@ -1,17 +1,17 @@
-# GEOIMAGE
-#### A Javascript library for generating bitmaps out of **geoTIFF** files.
+# Geoimage
+##### A Javascript library for generating bitmaps out of **geoTIFF** files.
 <img src = "/images/example0crop1.png" width = "100%">
 
-## Features
-#### Color texture generation
+### Features
+##### Color texture generation
 - Create RGB pictures out of RGB geoTIFF data.
 - Generate pictures out of non-RGB geoTIFF data with different processing options.
 
-#### Terrain texture generation
+##### 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).
 
-#### Data visualisation options
+##### Data visualisation options
 - Color
 - Transparency
 - Heatmap (custom color scale example [here](../cogbitmaplayer/README.md#custom-heatmap-color-scale))
@@ -19,7 +19,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
+### 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)**
 - `alpha : number` - visualise data in specific opacity **(if useDataOpacity is false)** **(default 150)**
@@ -39,7 +39,7 @@
 - `useSingleColor: boolean` - display data values only with single color **(default false)**
 - `color: chroma.Color` - set color when **if useSingleColor is true**, **(default [255, 0, 255, 255])**
 
-## Return options
+### Return options
 **Method returns Image DataUrl**
 
 - `getMap(returnFormat : "image" | "terrain", input : string | { width : number, height : number, rasters : any[] }, options?: { opacity : number })`
@@ -48,14 +48,14 @@
 
   If `returnFormat` = `"terrain"` - Ignores all options except `multiplier` and returns  [Mapbox Terrain-RGB](https://docs.mapbox.com/data/tilesets/guides/access-elevation-data/#decode-data)
 
-## Basic example
-#### Initialize the library
+### Basic example
+##### Initialize the library
 ```typescript
 import GeoImage from 'geoimage';
 
 const g = new GeoImage();
 ```
-#### Get bitmap
+##### Get bitmap
 ```typescript
 const bitmap = await g.getMap("image", 'image.tif');
 ```
@@ -65,7 +65,7 @@ const bitmap = await g.getMap("image", { width : 512, height : 512, rasters : [[
 
 
 
-#### Get heightmap
+##### Get heightmap
 
 ```typescript
 const heightmap = await g.getMap("terrain", 'image.tif');
@@ -74,7 +74,7 @@ const heightmap = await g.getMap("terrain", 'image.tif');
 const bitmap = await g.getMap("terrain", { width : 512, height : 512, rasters : [[...data]] });
 ```
 
-## Advanced example
+### Advanced example
 
 ```typescript
 //Import the library and initiate GeoImage object:

package/src/geoimage/geoimage.ts

@@ -135,30 +135,24 @@ export default class GeoImage {
     const c = canvas.getContext('2d');
     const imageData = c!.createImageData(width, height);
 
-    const channelCount = channel.length / (width * height);
-    const s = width * height * 4;
-
-    let pixel = 0;
-    if (options.useChannel != null) {
-      pixel = options.useChannel;
-    }
-
-    // console.time("heightmap generated in");
-    for (let i = 0; i < s; i += 4) {
-      channel[pixel] *= options.multiplier!;
-      const multiplied = 100000 + channel[pixel] * 10;
+    const numOfChannels = channel.length / (width * height);
+    const size: number = width * height * 4;
+    let pixel:number = options.useChannel === null ? 0 : options.useChannel;
 
-      imageData.data[i] = Math.trunc(multiplied * 0.00001525878);
-      imageData.data[i + 1] = Math.trunc(multiplied * 0.00390625) - imageData.data[i] * 256;
-      imageData.data[i + 2] = Math.trunc(multiplied) - imageData.data[i] * 65536
-      - imageData.data[i + 1] * 256;
+    for (let i = 0; i < size; i += 4) {
+      //  height image calculation based on:
+      //  https://deck.gl/docs/api-reference/geo-layers/terrain-layer
+
+      const elevationValue = channel[pixel] * options.multiplier!;
+      const colorValue = Math.floor((elevationValue + 10000) / 0.1);
+      imageData.data[i] = Math.floor(colorValue / (256 * 256));
+      imageData.data[i + 1] = Math.floor((colorValue / 256) % 256);
+      imageData.data[i + 2] = colorValue % 256;
       imageData.data[i + 3] = 255;
 
-      pixel += channelCount;
+      pixel += numOfChannels;
     }
 
-    // console.timeEnd("heightmap generated in");
-
     c!.putImageData(imageData, 0, 0);
     const imageUrl = canvas.toDataURL('image/png');
     // console.log('Heightmap generated.');