@gisatcz/deckgl-geolib 2.1.2-dev.1 → 2.1.4-dev.0

package/dist/esm/index.js

@@ -4513,6 +4513,41 @@ async function fromArrayBuffer(arrayBuffer, signal) {
     return GeoTIFF.fromSource(makeBufferSource(arrayBuffer), undefined, signal);
 }
 
+// types.ts
+const DefaultGeoImageOptions = {
+    type: 'image',
+    tesselator: 'martini',
+    format: undefined,
+    useHeatMap: true,
+    useColorsBasedOnValues: false,
+    useAutoRange: false,
+    useDataForOpacity: false,
+    useSingleColor: false,
+    useColorClasses: false,
+    blurredTexture: true,
+    clipLow: null,
+    clipHigh: null,
+    multiplier: 1.0,
+    color: [255, 0, 255, 255],
+    colorScale: chroma.brewer.YlOrRd,
+    colorScaleValueRange: [0, 255],
+    colorsBasedOnValues: undefined,
+    colorClasses: undefined,
+    alpha: 100,
+    useChannel: null,
+    useChannelIndex: null,
+    noDataValue: undefined,
+    numOfChannels: undefined,
+    nullColor: [0, 0, 0, 0],
+    unidentifiedColor: [0, 0, 0, 0],
+    clippedColor: [0, 0, 0, 0],
+    terrainColor: [133, 133, 133, 255],
+    terrainSkirtHeight: 100,
+    // Default fallback for invalid/nodata elevations. Should be configured based on the dataset's actual range.
+    terrainMinValue: 0,
+    planarConfig: undefined,
+};
+
 class Martini {
     constructor(gridSize = 257) {
         this.gridSize = gridSize;
@@ -4677,107 +4712,6 @@ class Tile {
     }
 }
 
-// loaders.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-/**
- * Add skirt to existing mesh
- * @param {object} attributes - POSITION and TEXCOOD_0 attributes data
- * @param {any} triangles - indices array of the mesh geometry
- * @param skirtHeight - height of the skirt geometry
- * @param outsideIndices - edge indices from quantized mesh data
- * @returns - geometry data with added skirt
- */
-function addSkirt(attributes, triangles, skirtHeight, outsideIndices) {
-    const outsideEdges = getOutsideEdgesFromTriangles(triangles);
-    // 2 new vertices for each outside edge
-    const newPosition = new attributes.POSITION.value.constructor(outsideEdges.length * 6);
-    const newTexcoord0 = new attributes.TEXCOORD_0.value.constructor(outsideEdges.length * 4);
-    // 2 new triangles for each outside edge
-    const newTriangles = new triangles.constructor(outsideEdges.length * 6);
-    for (let i = 0; i < outsideEdges.length; i++) {
-        const edge = outsideEdges[i];
-        updateAttributesForNewEdge({
-            edge,
-            edgeIndex: i,
-            attributes,
-            skirtHeight,
-            newPosition,
-            newTexcoord0,
-            newTriangles,
-        });
-    }
-    attributes.POSITION.value = concatenateTypedArrays(attributes.POSITION.value, newPosition);
-    attributes.TEXCOORD_0.value = concatenateTypedArrays(attributes.TEXCOORD_0.value, newTexcoord0);
-    const resultTriangles = triangles instanceof Array
-        ? triangles.concat(newTriangles)
-        : concatenateTypedArrays(triangles, newTriangles);
-    return {
-        attributes,
-        triangles: resultTriangles,
-    };
-}
-/**
- * Get geometry edges that located on a border of the mesh
- * @param {any} triangles - indices array of the mesh geometry
- * @returns {number[][]} - outside edges data
- */
-function getOutsideEdgesFromTriangles(triangles) {
-    const edges = [];
-    for (let i = 0; i < triangles.length; i += 3) {
-        edges.push([triangles[i], triangles[i + 1]]);
-        edges.push([triangles[i + 1], triangles[i + 2]]);
-        edges.push([triangles[i + 2], triangles[i]]);
-    }
-    edges.sort((a, b) => Math.min(...a) - Math.min(...b) || Math.max(...a) - Math.max(...b));
-    const outsideEdges = [];
-    let index = 0;
-    while (index < edges.length) {
-        if (edges[index][0] === edges[index + 1]?.[1] && edges[index][1] === edges[index + 1]?.[0]) {
-            index += 2;
-        }
-        else {
-            outsideEdges.push(edges[index]);
-            index++;
-        }
-    }
-    return outsideEdges;
-}
-/**
- * Get geometry edges that located on a border of the mesh
- * @param {object} args
- * @param {number[]} args.edge - edge indices in geometry
- * @param {number} args.edgeIndex - edge index in outsideEdges array
- * @param {object} args.attributes - POSITION and TEXCOORD_0 attributes
- * @param {number} args.skirtHeight - height of the skirt geometry
- * @param {TypedArray} args.newPosition - POSITION array for skirt data
- * @param {TypedArray} args.newTexcoord0 - TEXCOORD_0 array for skirt data
- * @param {TypedArray | Array} args.newTriangles - trinagle indices array for skirt data
- * @returns {void}
- */
-function updateAttributesForNewEdge({ edge, edgeIndex, attributes, skirtHeight, newPosition, newTexcoord0, newTriangles, }) {
-    const positionsLength = attributes.POSITION.value.length;
-    const vertex1Offset = edgeIndex * 2;
-    const vertex2Offset = edgeIndex * 2 + 1;
-    // Define POSITION for new 1st vertex
-    newPosition.set(attributes.POSITION.value.subarray(edge[0] * 3, edge[0] * 3 + 3), vertex1Offset * 3);
-    newPosition[vertex1Offset * 3 + 2] = newPosition[vertex1Offset * 3 + 2] - skirtHeight; // put down elevation on the skirt height
-    // Define POSITION for new 2nd vertex
-    newPosition.set(attributes.POSITION.value.subarray(edge[1] * 3, edge[1] * 3 + 3), vertex2Offset * 3);
-    newPosition[vertex2Offset * 3 + 2] = newPosition[vertex2Offset * 3 + 2] - skirtHeight; // put down elevation on the skirt height
-    // Use same TEXCOORDS for skirt vertices
-    newTexcoord0.set(attributes.TEXCOORD_0.value.subarray(edge[0] * 2, edge[0] * 2 + 2), vertex1Offset * 2);
-    newTexcoord0.set(attributes.TEXCOORD_0.value.subarray(edge[1] * 2, edge[1] * 2 + 2), vertex2Offset * 2);
-    // Define new triangles
-    const triangle1Offset = edgeIndex * 2 * 3;
-    newTriangles[triangle1Offset] = edge[0];
-    newTriangles[triangle1Offset + 1] = positionsLength / 3 + vertex2Offset;
-    newTriangles[triangle1Offset + 2] = edge[1];
-    newTriangles[triangle1Offset + 3] = positionsLength / 3 + vertex2Offset;
-    newTriangles[triangle1Offset + 4] = edge[0];
-    newTriangles[triangle1Offset + 5] = positionsLength / 3 + vertex1Offset;
-}
-
 // loaders.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
@@ -5188,141 +5122,130 @@ function inCircle(ax, ay, bx, by, cx, cy, px, py) {
     return dx * (ey * cp - bp * fy) - dy * (ex * cp - bp * fx) + ap * (ex * fy - ey * fx) < 0;
 }
 
-// import { ExtentsLeftBottomRightTop } from '@deck.gl/core/utils/positions';
-const DefaultGeoImageOptions = {
-    type: 'image',
-    tesselator: 'martini',
-    format: 'uint8',
-    useHeatMap: true,
-    useColorsBasedOnValues: false,
-    useAutoRange: false,
-    useDataForOpacity: false,
-    useSingleColor: false,
-    useColorClasses: false,
-    blurredTexture: true,
-    clipLow: null,
-    clipHigh: null,
-    multiplier: 1.0,
-    color: [255, 0, 255, 255],
-    colorScale: chroma.brewer.YlOrRd,
-    colorScaleValueRange: [0, 255],
-    colorsBasedOnValues: null,
-    colorClasses: null,
-    alpha: 100,
-    useChannel: null,
-    useChannelIndex: null,
-    noDataValue: undefined,
-    numOfChannels: undefined,
-    nullColor: [0, 0, 0, 0],
-    unidentifiedColor: [0, 0, 0, 0],
-    clippedColor: [0, 0, 0, 0],
-    terrainColor: [133, 133, 133, 255],
-    terrainSkirtHeight: 100,
-    terrainMinValue: 0,
-    planarConfig: undefined,
-};
-class GeoImage {
-    data;
-    scale = (num, inMin, inMax, outMin, outMax) => ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    async setUrl(url) {
-        // TODO - not tested
-        const response = await fetch(url);
-        const arrayBuffer = await response.arrayBuffer();
-        const tiff = await fromArrayBuffer(arrayBuffer);
-        const data = await tiff.getImage(0);
-        this.data = data;
+// loaders.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/**
+ * Add skirt to existing mesh
+ * @param {object} attributes - POSITION and TEXCOOD_0 attributes data
+ * @param {any} triangles - indices array of the mesh geometry
+ * @param skirtHeight - height of the skirt geometry
+ * @param outsideIndices - edge indices from quantized mesh data
+ * @returns - geometry data with added skirt
+ */
+function addSkirt(attributes, triangles, skirtHeight, outsideIndices) {
+    const outsideEdges = getOutsideEdgesFromTriangles(triangles);
+    // 2 new vertices for each outside edge
+    const newPosition = new attributes.POSITION.value.constructor(outsideEdges.length * 6);
+    const newTexcoord0 = new attributes.TEXCOORD_0.value.constructor(outsideEdges.length * 4);
+    // 2 new triangles for each outside edge
+    const newTriangles = new triangles.constructor(outsideEdges.length * 6);
+    for (let i = 0; i < outsideEdges.length; i++) {
+        const edge = outsideEdges[i];
+        updateAttributesForNewEdge({
+            edge,
+            edgeIndex: i,
+            attributes,
+            skirtHeight,
+            newPosition,
+            newTexcoord0,
+            newTriangles,
+        });
     }
-    async getMap(input, options, meshMaxError) {
-        const mergedOptions = { ...DefaultGeoImageOptions, ...options };
-        switch (mergedOptions.type) {
-            case 'image':
-                return this.getBitmap(input, mergedOptions);
-            case 'terrain':
-                return this.getHeightmap(input, mergedOptions, meshMaxError);
-            default:
-                return null;
-        }
+    attributes.POSITION.value = concatenateTypedArrays(attributes.POSITION.value, newPosition);
+    attributes.TEXCOORD_0.value = concatenateTypedArrays(attributes.TEXCOORD_0.value, newTexcoord0);
+    const resultTriangles = triangles instanceof Array
+        ? triangles.concat(newTriangles)
+        : concatenateTypedArrays(triangles, newTriangles);
+    return {
+        attributes,
+        triangles: resultTriangles,
+    };
+}
+/**
+ * Get geometry edges that located on a border of the mesh
+ * @param {any} triangles - indices array of the mesh geometry
+ * @returns {number[][]} - outside edges data
+ */
+function getOutsideEdgesFromTriangles(triangles) {
+    const edges = [];
+    for (let i = 0; i < triangles.length; i += 3) {
+        edges.push([triangles[i], triangles[i + 1]]);
+        edges.push([triangles[i + 1], triangles[i + 2]]);
+        edges.push([triangles[i + 2], triangles[i]]);
     }
-    // GetHeightmap uses only "useChannel" and "multiplier" options
-    async getHeightmap(input, options, meshMaxError) {
-        let rasters = [];
-        let width;
-        let height;
-        if (typeof (input) === 'string') {
-            // TODO not tested
-            // input is type of object
-            await this.setUrl(input);
-            rasters = (await this.data.readRasters());
-            width = this.data.getWidth();
-            height = this.data.getHeight();
+    edges.sort((a, b) => Math.min(...a) - Math.min(...b) || Math.max(...a) - Math.max(...b));
+    const outsideEdges = [];
+    let index = 0;
+    while (index < edges.length) {
+        if (edges[index][0] === edges[index + 1]?.[1] && edges[index][1] === edges[index + 1]?.[0]) {
+            index += 2;
         }
         else {
-            rasters = input.rasters;
-            width = input.width;
-            height = input.height;
-        }
-        const optionsLocal = { ...options };
-        let channel = rasters[0];
-        optionsLocal.useChannelIndex ??= optionsLocal.useChannel == null ? null : optionsLocal.useChannel - 1;
-        if (options.useChannelIndex != null) {
-            if (rasters[optionsLocal.useChannelIndex]) {
-                channel = rasters[optionsLocal.useChannelIndex];
-            }
-        }
-        const terrain = new Float32Array((width === 257 ? width : width + 1) * (height === 257 ? height : height + 1));
-        const numOfChannels = channel.length / (width * height);
-        let pixel = options.useChannelIndex === null ? 0 : options.useChannelIndex;
-        const isStitched = width === 257;
-        for (let y = 0; y < height; y++) {
-            for (let x = 0; x < width; x++) {
-                let elevationValue = (options.noDataValue && channel[pixel] === options.noDataValue) ? options.terrainMinValue : channel[pixel] * options.multiplier;
-                // Validate that the elevation value is within the valid range for Float32.
-                // Extreme values (like -1.79e308) can become -Infinity when cast, causing WebGL errors.
-                if (Number.isNaN(elevationValue) || elevationValue < -34e37 || elevationValue > 3.4e38) {
-                    elevationValue = options.terrainMinValue;
-                }
-                // If stitched (257), fill linearly. If 256, fill with stride for padding.
-                const index = isStitched ? (y * width + x) : (y * (width + 1) + x);
-                terrain[index] = elevationValue;
-                pixel += numOfChannels;
-            }
-        }
-        if (!isStitched) {
-            // backfill bottom border
-            for (let i = (width + 1) * width, x = 0; x < width; x++, i++) {
-                terrain[i] = terrain[i - width - 1];
-            }
-            // backfill right border
-            for (let i = height, y = 0; y < height + 1; y++, i += height + 1) {
-                terrain[i] = terrain[i - 1];
-            }
+            outsideEdges.push(edges[index]);
+            index++;
         }
-        // getMesh
+    }
+    return outsideEdges;
+}
+/**
+ * Get geometry edges that located on a border of the mesh
+ * @param {object} args
+ * @param {number[]} args.edge - edge indices in geometry
+ * @param {number} args.edgeIndex - edge index in outsideEdges array
+ * @param {object} args.attributes - POSITION and TEXCOORD_0 attributes
+ * @param {number} args.skirtHeight - height of the skirt geometry
+ * @param {TypedArray} args.newPosition - POSITION array for skirt data
+ * @param {TypedArray} args.newTexcoord0 - TEXCOORD_0 array for skirt data
+ * @param {TypedArray | Array} args.newTriangles - trinagle indices array for skirt data
+ * @returns {void}
+ */
+function updateAttributesForNewEdge({ edge, edgeIndex, attributes, skirtHeight, newPosition, newTexcoord0, newTriangles, }) {
+    const positionsLength = attributes.POSITION.value.length;
+    const vertex1Offset = edgeIndex * 2;
+    const vertex2Offset = edgeIndex * 2 + 1;
+    // Define POSITION for new 1st vertex
+    newPosition.set(attributes.POSITION.value.subarray(edge[0] * 3, edge[0] * 3 + 3), vertex1Offset * 3);
+    newPosition[vertex1Offset * 3 + 2] = newPosition[vertex1Offset * 3 + 2] - skirtHeight; // put down elevation on the skirt height
+    // Define POSITION for new 2nd vertex
+    newPosition.set(attributes.POSITION.value.subarray(edge[1] * 3, edge[1] * 3 + 3), vertex2Offset * 3);
+    newPosition[vertex2Offset * 3 + 2] = newPosition[vertex2Offset * 3 + 2] - skirtHeight; // put down elevation on the skirt height
+    // Use same TEXCOORDS for skirt vertices
+    newTexcoord0.set(attributes.TEXCOORD_0.value.subarray(edge[0] * 2, edge[0] * 2 + 2), vertex1Offset * 2);
+    newTexcoord0.set(attributes.TEXCOORD_0.value.subarray(edge[1] * 2, edge[1] * 2 + 2), vertex2Offset * 2);
+    // Define new triangles
+    const triangle1Offset = edgeIndex * 2 * 3;
+    newTriangles[triangle1Offset] = edge[0];
+    newTriangles[triangle1Offset + 1] = positionsLength / 3 + vertex2Offset;
+    newTriangles[triangle1Offset + 2] = edge[1];
+    newTriangles[triangle1Offset + 3] = positionsLength / 3 + vertex2Offset;
+    newTriangles[triangle1Offset + 4] = edge[0];
+    newTriangles[triangle1Offset + 5] = positionsLength / 3 + vertex1Offset;
+}
+
+class TerrainGenerator {
+    static generate(input, options, meshMaxError) {
+        const { width, height } = input;
+        // 1. Compute Terrain Data (Extract Elevation)
+        const terrain = this.computeTerrainData(input, options);
+        // 2. Tesselate (Generate Mesh)
         const { terrainSkirtHeight } = options;
         let mesh;
         switch (options.tesselator) {
             case 'martini':
-                mesh = getMartiniTileMesh(meshMaxError, width, terrain);
+                mesh = this.getMartiniTileMesh(meshMaxError, width, terrain);
                 break;
             case 'delatin':
-                mesh = getDelatinTileMesh(meshMaxError, width, height, terrain);
+                mesh = this.getDelatinTileMesh(meshMaxError, width, height, terrain);
                 break;
             default:
-                if (width === height && !(height && (width - 1))) {
-                    // fixme get terrain to separate method
-                    // terrain = getTerrain(data, width, height, elevationDecoder, 'martini');
-                    mesh = getMartiniTileMesh(meshMaxError, width, terrain);
-                }
-                else {
-                    // fixme get terrain to separate method
-                    // terrain = getTerrain(data, width, height, elevationDecoder, 'delatin');
-                    mesh = getDelatinTileMesh(meshMaxError, width, height, terrain);
-                }
+                // Intentional: default to Martini for any unspecified or unrecognized tesselator.
+                mesh = this.getMartiniTileMesh(meshMaxError, width, terrain);
                 break;
         }
         const { vertices } = mesh;
         let { triangles } = mesh;
-        let attributes = getMeshAttributes(vertices, terrain, width, height, input.bounds);
+        let attributes = this.getMeshAttributes(vertices, terrain, width, height, input.bounds);
         // Compute bounding box before adding skirt so that z values are not skewed
         const boundingBox = getMeshBoundingBox(attributes);
         if (terrainSkirtHeight) {
@@ -5344,27 +5267,119 @@ class GeoImage {
             attributes,
         };
     }
-    async getBitmap(input, options) {
+    /**
+     * Decodes raw raster data into a Float32Array of elevation values.
+     * Handles channel selection, value scaling, data type validation, and border stitching.
+     */
+    static computeTerrainData(input, options) {
+        const { width, height, rasters } = input;
         const optionsLocal = { ...options };
-        let rasters = [];
-        let channels;
-        let width;
-        let height;
-        if (typeof (input) === 'string') {
-            // TODO not tested
-            // input is type of object
-            await this.setUrl(input);
-            rasters = (await this.data.readRasters());
-            channels = rasters.length;
-            width = this.data.getWidth();
-            height = this.data.getHeight();
+        optionsLocal.useChannelIndex ??= optionsLocal.useChannel == null ? null : optionsLocal.useChannel - 1;
+        // Detect if data is planar (multiple arrays) or interleaved (one array with multiple samples per pixel)
+        const isPlanar = rasters.length > 1;
+        const channel = isPlanar
+            ? (rasters[optionsLocal.useChannelIndex ?? 0] ?? rasters[0])
+            : rasters[0];
+        const terrain = new Float32Array((width === 257 ? width : width + 1) * (height === 257 ? height : height + 1));
+        const samplesPerPixel = isPlanar ? 1 : (channel.length / (width * height));
+        // If planar, we already selected the correct array, so start at index 0.
+        // If interleaved, start at the index of the desired channel.
+        let pixel = isPlanar ? 0 : (optionsLocal.useChannelIndex ?? 0);
+        const isStitched = width === 257;
+        const fallbackValue = options.terrainMinValue ?? 0;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const multiplier = options.multiplier ?? 1;
+                let elevationValue = (options.noDataValue !== undefined &&
+                    options.noDataValue !== null &&
+                    channel[pixel] === options.noDataValue)
+                    ? fallbackValue
+                    : channel[pixel] * multiplier;
+                // Validate that the elevation value is within the valid range for Float32.
+                // Extreme values (like -1.79e308) can become -Infinity when cast, causing WebGL errors.
+                if (Number.isNaN(elevationValue) || elevationValue < -34e37 || elevationValue > 3.4e38) {
+                    elevationValue = fallbackValue;
+                }
+                // If stitched (257), fill linearly. If 256, fill with stride for padding.
+                const index = isStitched ? (y * width + x) : (y * (width + 1) + x);
+                terrain[index] = elevationValue;
+                pixel += samplesPerPixel;
+            }
         }
-        else {
-            rasters = input.rasters;
-            channels = rasters.length;
-            width = input.width;
-            height = input.height;
+        if (!isStitched) {
+            // backfill bottom border
+            for (let i = (width + 1) * width, x = 0; x < width; x++, i++) {
+                terrain[i] = terrain[i - width - 1];
+            }
+            // backfill right border
+            for (let i = height, y = 0; y < height + 1; y++, i += height + 1) {
+                terrain[i] = terrain[i - 1];
+            }
         }
+        return terrain;
+    }
+    static getMartiniTileMesh(meshMaxError, width, terrain) {
+        const gridSize = width === 257 ? 257 : width + 1;
+        const martini = new Martini(gridSize);
+        const tile = martini.createTile(terrain);
+        const { vertices, triangles } = tile.getMesh(meshMaxError);
+        return { vertices, triangles };
+    }
+    static getDelatinTileMesh(meshMaxError, width, height, terrain) {
+        const widthPlus = width === 257 ? 257 : width + 1;
+        const heightPlus = height === 257 ? 257 : height + 1;
+        const tin = new Delatin(terrain, widthPlus, heightPlus);
+        tin.run(meshMaxError);
+        // @ts-expect-error: Delatin instance properties 'coords' and 'triangles' are not explicitly typed in the library port
+        const { coords, triangles } = tin;
+        const vertices = coords;
+        return { vertices, triangles };
+    }
+    static getMeshAttributes(vertices, terrain, width, height, bounds) {
+        const gridSize = width === 257 ? 257 : width + 1;
+        const numOfVerticies = vertices.length / 2;
+        // vec3. x, y in pixels, z in meters
+        const positions = new Float32Array(numOfVerticies * 3);
+        // vec2. 1 to 1 relationship with position. represents the uv on the texture image. 0,0 to 1,1.
+        const texCoords = new Float32Array(numOfVerticies * 2);
+        const [minX, minY, maxX, maxY] = bounds || [0, 0, width, height];
+        // If stitched (257), the spatial extent covers 0..256 pixels, so we divide by 256.
+        // If standard (256), the spatial extent covers 0..256 pixels (with backfill), so we divide by 256.
+        const effectiveWidth = width === 257 ? width - 1 : width;
+        const effectiveHeight = height === 257 ? height - 1 : height;
+        const xScale = (maxX - minX) / effectiveWidth;
+        const yScale = (maxY - minY) / effectiveHeight;
+        for (let i = 0; i < numOfVerticies; i++) {
+            const x = vertices[i * 2];
+            const y = vertices[i * 2 + 1];
+            const pixelIdx = y * gridSize + x;
+            positions[3 * i] = x * xScale + minX;
+            positions[3 * i + 1] = -y * yScale + maxY;
+            positions[3 * i + 2] = terrain[pixelIdx];
+            texCoords[2 * i] = x / effectiveWidth;
+            texCoords[2 * i + 1] = y / effectiveHeight;
+        }
+        return {
+            POSITION: { value: positions, size: 3 },
+            TEXCOORD_0: { value: texCoords, size: 2 },
+            // NORMAL: {}, - optional, but creates the high poly look with lighting
+        };
+    }
+}
+
+// DataUtils.ts
+function scale(num, inMin, inMax, outMin, outMax) {
+    if (inMax === inMin) {
+        return outMin;
+    }
+    return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+}
+
+class BitmapGenerator {
+    static async generate(input, options) {
+        const optionsLocal = { ...options };
+        const { rasters, width, height } = input;
+        const channels = rasters.length;
         const canvas = document.createElement('canvas');
         canvas.width = width;
         canvas.height = height;
@@ -5375,21 +5390,14 @@ class GeoImage {
         let b;
         let a;
         const size = width * height * 4;
-        // const size = width * height;
-        // if (!options.noDataValue) {
-        //   console.log('Missing noData value. Raster might be displayed incorrectly.');
-        // }
-        optionsLocal.unidentifiedColor = this.getColorFromChromaType(optionsLocal.unidentifiedColor);
-        optionsLocal.nullColor = this.getColorFromChromaType(optionsLocal.nullColor);
-        optionsLocal.clippedColor = this.getColorFromChromaType(optionsLocal.clippedColor);
-        optionsLocal.color = this.getColorFromChromaType(optionsLocal.color);
-        optionsLocal.useChannelIndex ??= options.useChannel === null ? null : options.useChannel - 1;
-        // console.log(rasters[0])
-        /* console.log("raster 0 length: " + rasters[0].length)
-        console.log("image width: " + width)
-        console.log("channels: " + channels)
-        console.log("format: " + rasters[0].length / (width * height))
-        */
+        const alpha255 = Math.floor(optionsLocal.alpha * 2.55);
+        optionsLocal.unidentifiedColor = this.getColorFromChromaType(optionsLocal.unidentifiedColor, alpha255);
+        optionsLocal.nullColor = this.getColorFromChromaType(optionsLocal.nullColor, alpha255);
+        optionsLocal.clippedColor = this.getColorFromChromaType(optionsLocal.clippedColor, alpha255);
+        optionsLocal.color = this.getColorFromChromaType(optionsLocal.color, alpha255);
+        optionsLocal.useChannelIndex ??= optionsLocal.useChannel == null ? null : optionsLocal.useChannel - 1;
+        // Derive channel count from data if not provided
+        const numAvailableChannels = optionsLocal.numOfChannels ?? (rasters.length === 1 ? rasters[0].length / (width * height) : rasters.length);
         if (optionsLocal.useChannelIndex == null) {
             if (channels === 1) {
                 if (rasters[0].length / (width * height) === 1) {
@@ -5397,17 +5405,13 @@ class GeoImage {
                     // AUTO RANGE
                     if (optionsLocal.useAutoRange) {
                         optionsLocal.colorScaleValueRange = this.getMinMax(channel, optionsLocal);
-                        // console.log('data min: ' + optionsLocal.rangeMin + ', max: ' + optionsLocal.rangeMax);
                     }
                     // SINGLE CHANNEL
                     const colorData = this.getColorValue(channel, optionsLocal, size);
-                    colorData.forEach((value, index) => {
-                        imageData.data[index] = value;
-                    });
+                    imageData.data.set(colorData);
                 }
                 // RGB values in one channel
                 if (rasters[0].length / (width * height) === 3) {
-                    // console.log("geoImage: " + "RGB 1 array of length: " + rasters[0].length);
                     let pixel = 0;
                     for (let idx = 0; idx < size; idx += 4) {
                         const rgbColor = [rasters[0][pixel], rasters[0][pixel + 1], rasters[0][pixel + 2]];
@@ -5419,7 +5423,6 @@ class GeoImage {
                     }
                 }
                 if (rasters[0].length / (width * height) === 4) {
-                    // console.log("geoImage: " + "RGBA 1 array");
                     rasters[0].forEach((value, index) => {
                         imageData.data[index] = value;
                     });
@@ -5428,11 +5431,12 @@ class GeoImage {
             if (channels === 3) {
                 // RGB
                 let pixel = 0;
+                const alphaConst = Math.floor(optionsLocal.alpha * 2.55);
                 for (let i = 0; i < size; i += 4) {
                     r = rasters[0][pixel];
                     g = rasters[1][pixel];
                     b = rasters[2][pixel];
-                    a = Math.floor(optionsLocal.alpha * 2.55);
+                    a = alphaConst;
                     imageData.data[i] = r;
                     imageData.data[i + 1] = g;
                     imageData.data[i + 2] = b;
@@ -5443,11 +5447,12 @@ class GeoImage {
             if (channels === 4) {
                 // RGBA
                 let pixel = 0;
+                const alphaConst = Math.floor(optionsLocal.alpha * 2.55);
                 for (let i = 0; i < size; i += 4) {
                     r = rasters[0][pixel];
                     g = rasters[1][pixel];
                     b = rasters[2][pixel];
-                    a = Math.floor(optionsLocal.alpha * 2.55);
+                    a = alphaConst;
                     imageData.data[i] = r;
                     imageData.data[i + 1] = g;
                     imageData.data[i + 2] = b;
@@ -5456,21 +5461,16 @@ class GeoImage {
                 }
             }
         }
-        else if (optionsLocal.useChannelIndex < optionsLocal.numOfChannels && optionsLocal.useChannelIndex >= 0) {
-            let channel = rasters[0];
-            if (rasters[optionsLocal.useChannelIndex]) {
-                channel = rasters[optionsLocal.useChannelIndex];
-            }
+        else if (optionsLocal.useChannelIndex < numAvailableChannels && optionsLocal.useChannelIndex >= 0) {
+            const isInterleaved = rasters.length === 1 && numAvailableChannels > 1;
+            const channel = isInterleaved ? rasters[0] : (rasters[optionsLocal.useChannelIndex] ?? rasters[0]);
+            const samplesPerPixel = isInterleaved ? numAvailableChannels : 1;
             // AUTO RANGE
             if (optionsLocal.useAutoRange) {
-                optionsLocal.colorScaleValueRange = this.getMinMax(channel, optionsLocal);
-                // console.log('data min: ' + optionsLocal.rangeMin + ', max: ' + optionsLocal.rangeMax);
+                optionsLocal.colorScaleValueRange = this.getMinMax(channel, optionsLocal, samplesPerPixel);
             }
-            // const numOfChannels = channel.length / (width * height);
-            const colorData = this.getColorValue(channel, optionsLocal, size, optionsLocal.numOfChannels);
-            colorData.forEach((value, index) => {
-                imageData.data[index] = value;
-            });
+            const colorData = this.getColorValue(channel, optionsLocal, size, samplesPerPixel);
+            imageData.data.set(colorData);
         }
         else {
             // if user defined channel does not exist
@@ -5481,92 +5481,162 @@ class GeoImage {
                 imageData.data[index] = value;
             });
         }
-        // console.timeEnd('bitmap-generated-in');
+        // Optimization: Skip Canvas -> PNG encoding -> Base64 string
+        // Return raw GPU-ready ImageBitmap directly
+        // Note: createImageBitmap(imageData) is cleaner, but using the canvas ensures broad compatibility
         c.putImageData(imageData, 0, 0);
-        const imageUrl = canvas.toDataURL('image/png');
-        // console.log('Bitmap generated.');
-        return imageUrl;
-    }
-    getMinMax(array, options) {
-        let maxValue = options.maxValue ? options.maxValue : Number.MIN_VALUE;
-        let minValue = options.minValue ? options.minValue : Number.MAX_VALUE;
-        for (let idx = 0; idx < array.length; idx += 1) {
+        return createImageBitmap(canvas);
+    }
+    static getMinMax(array, options, samplesPerPixel = 1) {
+        let maxValue = -Infinity;
+        let minValue = Infinity;
+        let foundValid = false;
+        let pixel = samplesPerPixel === 1 ? 0 : (options.useChannelIndex ?? 0);
+        for (let idx = pixel; idx < array.length; idx += samplesPerPixel) {
             if (options.noDataValue === undefined || array[idx] !== options.noDataValue) {
                 if (array[idx] > maxValue)
                     maxValue = array[idx];
                 if (array[idx] < minValue)
                     minValue = array[idx];
+                foundValid = true;
             }
         }
+        if (!foundValid) {
+            return options.colorScaleValueRange || [0, 255];
+        }
         return [minValue, maxValue];
     }
-    getColorValue(dataArray, options, arrayLength, numOfChannels = 1) {
-        // const rgb = chroma.random().rgb(); // [R, G, B]
-        // const randomColor = [...rgb, 120];
+    static getColorValue(dataArray, options, arrayLength, samplesPerPixel = 1) {
         const colorScale = chroma.scale(options.colorScale).domain(options.colorScaleValueRange);
-        // channel index is equal to channel number - 1
-        let pixel = options.useChannelIndex === null ? 0 : options.useChannelIndex;
-        const colorsArray = new Array(arrayLength);
-        // if useColorsBasedOnValues is true
-        const dataValues = options.colorsBasedOnValues ? options.colorsBasedOnValues.map(([first]) => first) : undefined;
-        const colorValues = options.colorsBasedOnValues ? options.colorsBasedOnValues.map(([, second]) => [...chroma(second).rgb(), Math.floor(options.alpha * 2.55)]) : undefined;
-        // if useClasses is true
-        const colorClasses = options.useColorClasses ? options.colorClasses.map(([color]) => [...chroma(color).rgb(), Math.floor(options.alpha * 2.55)]) : undefined;
-        const dataIntervals = options.useColorClasses ? options.colorClasses.map(([, interval]) => interval) : undefined;
-        const dataIntervalBounds = options.useColorClasses ? options.colorClasses.map(([, , bounds], index) => {
+        let pixel = samplesPerPixel === 1 ? 0 : (options.useChannelIndex ?? 0);
+        const colorsArray = new Uint8ClampedArray(arrayLength);
+        const cbvInput = options.colorsBasedOnValues ?? [];
+        const classesInput = options.colorClasses ?? [];
+        const optUseColorsBasedOnValues = options.useColorsBasedOnValues && cbvInput.length > 0;
+        const optUseColorClasses = options.useColorClasses && classesInput.length > 0;
+        const dataValues = optUseColorsBasedOnValues ? cbvInput.map(([first]) => first) : [];
+        const colorValues = optUseColorsBasedOnValues ? cbvInput.map(([, second]) => [...chroma(second).rgb(), Math.floor(options.alpha * 2.55)]) : [];
+        const colorClasses = optUseColorClasses ? classesInput.map(([color]) => [...chroma(color).rgb(), Math.floor(options.alpha * 2.55)]) : [];
+        const dataIntervals = optUseColorClasses ? classesInput.map(([, interval]) => interval) : [];
+        const dataIntervalBounds = optUseColorClasses ? classesInput.map(([, , bounds], index) => {
             if (bounds !== undefined)
                 return bounds;
-            if (index === options.colorClasses.length - 1)
+            if (index === classesInput.length - 1)
                 return [true, true];
             return [true, false];
-        }) : undefined;
+        }) : [];
+        // Pre-calculate Loop Variables to avoid object lookup in loop
+        const optNoData = options.noDataValue;
+        const optClipLow = options.clipLow;
+        const optClipHigh = options.clipHigh;
+        const optClippedColor = options.clippedColor;
+        const optUseHeatMap = options.useHeatMap;
+        const optUseSingleColor = options.useSingleColor;
+        const optUseDataForOpacity = options.useDataForOpacity;
+        const optColor = options.color;
+        const optUnidentifiedColor = options.unidentifiedColor;
+        const optNullColor = options.nullColor;
+        const optAlpha = Math.floor(options.alpha * 2.55);
+        const rangeMin = options.colorScaleValueRange[0];
+        const rangeMax = options.colorScaleValueRange.slice(-1)[0];
+        // LOOKUP TABLE OPTIMIZATION (for 8-bit data)
+        // If the data is Uint8 (0-255), we can pre-calculate the result for every possible value.
+        const is8Bit = dataArray instanceof Uint8Array || dataArray instanceof Uint8ClampedArray;
+        // The LUT optimization is only applied for 8-bit data when `useDataForOpacity` is false.
+        // `useDataForOpacity` is excluded because it requires the raw data value for
+        // dynamic opacity scaling. All other visualization modes (HeatMap, Categorical,
+        // Classes, Single Color) are pre-calculated into the LUT for maximum performance.
+        if (is8Bit && !optUseDataForOpacity) {
+            // Create LUT: 256 values * 4 channels (RGBA)
+            const lut = new Uint8ClampedArray(256 * 4);
+            for (let i = 0; i < 256; i++) {
+                let r = optNullColor[0], g = optNullColor[1], b = optNullColor[2], a = optNullColor[3];
+                // Logic mirroring the pixel loop
+                if (optNoData === undefined || i !== optNoData) {
+                    if ((optClipLow != null && i <= optClipLow) || (optClipHigh != null && i >= optClipHigh)) {
+                        [r, g, b, a] = optClippedColor;
+                    }
+                    else {
+                        let c = [r, g, b, a];
+                        if (optUseHeatMap) {
+                            const rgb = colorScale(i).rgb();
+                            c = [rgb[0], rgb[1], rgb[2], optAlpha];
+                        }
+                        else if (optUseColorsBasedOnValues) {
+                            const index = dataValues.indexOf(i);
+                            c = (index > -1) ? colorValues[index] : optUnidentifiedColor;
+                        }
+                        else if (optUseColorClasses) {
+                            const index = this.findClassIndex(i, dataIntervals, dataIntervalBounds);
+                            c = (index > -1) ? colorClasses[index] : optUnidentifiedColor;
+                        }
+                        else if (optUseSingleColor) {
+                            c = optColor;
+                        }
+                        [r, g, b, a] = c;
+                    }
+                }
+                lut[i * 4] = r;
+                lut[i * 4 + 1] = g;
+                lut[i * 4 + 2] = b;
+                lut[i * 4 + 3] = a;
+            }
+            // Fast Apply Loop
+            let outIdx = 0;
+            const numPixels = arrayLength / 4;
+            for (let i = 0; i < numPixels; i++) {
+                const val = dataArray[pixel];
+                const lutIdx = Math.min(255, Math.max(0, val)) * 4;
+                colorsArray[outIdx++] = lut[lutIdx];
+                colorsArray[outIdx++] = lut[lutIdx + 1];
+                colorsArray[outIdx++] = lut[lutIdx + 2];
+                colorsArray[outIdx++] = lut[lutIdx + 3];
+                pixel += samplesPerPixel;
+            }
+            return colorsArray;
+        }
+        // Standard Loop (Float or non-optimized)
         for (let i = 0; i < arrayLength; i += 4) {
-            let pixelColor = options.nullColor;
-            // let pixelColor = randomColor;
-            // FIXME
-            if ((!Number.isNaN(dataArray[pixel])) && (options.noDataValue === undefined || dataArray[pixel] !== options.noDataValue)) {
-                if ((options.clipLow != null && dataArray[pixel] <= options.clipLow)
-                    || (options.clipHigh != null && dataArray[pixel] >= options.clipHigh)) {
-                    pixelColor = options.clippedColor;
+            let r = optNullColor[0], g = optNullColor[1], b = optNullColor[2], a = optNullColor[3];
+            const val = dataArray[pixel];
+            if ((!Number.isNaN(val)) && (optNoData === undefined || val !== optNoData)) {
+                if ((optClipLow != null && val <= optClipLow) || (optClipHigh != null && val >= optClipHigh)) {
+                    [r, g, b, a] = optClippedColor;
                 }
                 else {
-                    if (options.useHeatMap) {
-                        // FIXME
-                        pixelColor = [...colorScale(dataArray[pixel]).rgb(), Math.floor(options.alpha * 2.55)];
+                    let c;
+                    if (optUseHeatMap) {
+                        const rgb = colorScale(val).rgb();
+                        c = [rgb[0], rgb[1], rgb[2], optAlpha];
                     }
-                    if (options.useColorsBasedOnValues) {
-                        const index = dataValues.indexOf(dataArray[pixel]);
-                        if (index > -1) {
-                            pixelColor = colorValues[index];
-                        }
-                        else
-                            pixelColor = options.unidentifiedColor;
+                    else if (optUseColorsBasedOnValues) {
+                        const index = dataValues.indexOf(val);
+                        c = (index > -1) ? colorValues[index] : optUnidentifiedColor;
                     }
-                    if (options.useColorClasses) {
-                        const index = this.findClassIndex(dataArray[pixel], dataIntervals, dataIntervalBounds);
-                        if (index > -1) {
-                            pixelColor = colorClasses[index];
-                        }
-                        else
-                            pixelColor = options.unidentifiedColor;
+                    else if (optUseColorClasses) {
+                        const index = this.findClassIndex(val, dataIntervals, dataIntervalBounds);
+                        c = (index > -1) ? colorClasses[index] : optUnidentifiedColor;
                     }
-                    if (options.useSingleColor) {
-                        // FIXME - Is this compatible with chroma.color?
-                        pixelColor = options.color;
+                    else if (optUseSingleColor) {
+                        c = optColor;
                     }
-                    if (options.useDataForOpacity) {
-                        pixelColor[3] = this.scale(dataArray[pixel], options.colorScaleValueRange[0], options.colorScaleValueRange.slice(-1)[0], 0, 255);
+                    if (c) {
+                        [r, g, b, a] = c;
+                    }
+                    if (optUseDataForOpacity) {
+                        a = scale(val, rangeMin, rangeMax, 0, 255);
                     }
                 }
             }
-            // FIXME
-            ([colorsArray[i], colorsArray[i + 1], colorsArray[i + 2], colorsArray[i + 3]] = pixelColor);
-            pixel += numOfChannels;
+            colorsArray[i] = r;
+            colorsArray[i + 1] = g;
+            colorsArray[i + 2] = b;
+            colorsArray[i + 3] = a;
+            pixel += samplesPerPixel;
         }
         return colorsArray;
     }
-    findClassIndex(number, intervals, bounds) {
-        // returns index of the first class to which the number belongs
+    static findClassIndex(number, intervals, bounds) {
         for (let idx = 0; idx < intervals.length; idx += 1) {
             const [min, max] = intervals[idx];
             const [includeEqualMin, includeEqualMax] = bounds[idx];
@@ -5577,89 +5647,89 @@ class GeoImage {
         }
         return -1;
     }
-    getDefaultColor(size, nullColor) {
-        const colorsArray = new Array(size);
+    static getDefaultColor(size, nullColor) {
+        const colorsArray = new Uint8ClampedArray(size);
         for (let i = 0; i < size; i += 4) {
             [colorsArray[i], colorsArray[i + 1], colorsArray[i + 2], colorsArray[i + 3]] = nullColor;
         }
         return colorsArray;
     }
-    getColorFromChromaType(colorDefinition) {
+    static getColorFromChromaType(colorDefinition, alpha = 255) {
         if (!Array.isArray(colorDefinition) || colorDefinition.length !== 4) {
-            return [...chroma(colorDefinition).rgb(), 255];
+            return [...chroma(colorDefinition).rgb(), alpha];
         }
         return colorDefinition;
     }
-    hasPixelsNoData(pixels, noDataValue) {
+    static hasPixelsNoData(pixels, noDataValue) {
         return noDataValue !== undefined && pixels.every((pixel) => pixel === noDataValue);
     }
 }
-//
-//
-//
-/**
- * Get Martini generated vertices and triangles
- *
- * @param {number} meshMaxError threshold for simplifying mesh
- * @param {number} width width of the input data
- * @param {number[] | Float32Array} terrain elevation data
- * @returns {{vertices: Uint16Array, triangles: Uint32Array}} vertices and triangles data
- */
-function getMartiniTileMesh(meshMaxError, width, terrain) {
-    const gridSize = width === 257 ? 257 : width + 1;
-    const martini = new Martini(gridSize);
-    const tile = martini.createTile(terrain);
-    const { vertices, triangles } = tile.getMesh(meshMaxError);
-    return { vertices, triangles };
-}
-function getMeshAttributes(vertices, terrain, width, height, bounds) {
-    const gridSize = width === 257 ? 257 : width + 1;
-    const numOfVerticies = vertices.length / 2;
-    // vec3. x, y in pixels, z in meters
-    const positions = new Float32Array(numOfVerticies * 3);
-    // vec2. 1 to 1 relationship with position. represents the uv on the texture image. 0,0 to 1,1.
-    const texCoords = new Float32Array(numOfVerticies * 2);
-    const [minX, minY, maxX, maxY] = bounds || [0, 0, width, height];
-    // If stitched (257), the spatial extent covers 0..256 pixels, so we divide by 256.
-    // If standard (256), the spatial extent covers 0..256 pixels (with backfill), so we divide by 256.
-    const effectiveWidth = width === 257 ? width - 1 : width;
-    const effectiveHeight = height === 257 ? height - 1 : height;
-    const xScale = (maxX - minX) / effectiveWidth;
-    const yScale = (maxY - minY) / effectiveHeight;
-    for (let i = 0; i < numOfVerticies; i++) {
-        const x = vertices[i * 2];
-        const y = vertices[i * 2 + 1];
-        const pixelIdx = y * gridSize + x;
-        positions[3 * i + 0] = x * xScale + minX;
-        positions[3 * i + 1] = -y * yScale + maxY;
-        positions[3 * i + 2] = terrain[pixelIdx];
-        texCoords[2 * i + 0] = x / effectiveWidth;
-        texCoords[2 * i + 1] = y / effectiveHeight;
+
+class GeoImage {
+    data;
+    async setUrl(url) {
+        // TODO - not tested
+        const response = await fetch(url);
+        const arrayBuffer = await response.arrayBuffer();
+        const tiff = await fromArrayBuffer(arrayBuffer);
+        const data = await tiff.getImage(0);
+        this.data = data;
+    }
+    async getMap(input, options, meshMaxError) {
+        const mergedOptions = { ...DefaultGeoImageOptions, ...options };
+        switch (mergedOptions.type) {
+            case 'image':
+                return this.getBitmap(input, mergedOptions);
+            case 'terrain':
+                return this.getHeightmap(input, mergedOptions, meshMaxError);
+            default:
+                return null;
+        }
+    }
+    // GetHeightmap uses only "useChannel" and "multiplier" options
+    async getHeightmap(input, options, meshMaxError) {
+        let rasters = [];
+        let width;
+        let height;
+        let bounds;
+        if (typeof (input) === 'string') {
+            // TODO not tested
+            // input is type of object
+            await this.setUrl(input);
+            rasters = (await this.data.readRasters());
+            width = this.data.getWidth();
+            height = this.data.getHeight();
+            bounds = this.data.getBoundingBox();
+        }
+        else {
+            rasters = input.rasters;
+            width = input.width;
+            height = input.height;
+            bounds = input.bounds;
+        }
+        // Delegate to TerrainGenerator
+        return TerrainGenerator.generate({ width, height, rasters, bounds }, options, meshMaxError);
+    }
+    async getBitmap(input, options) {
+        let rasters = [];
+        let width;
+        let height;
+        if (typeof (input) === 'string') {
+            // TODO not tested
+            // input is type of object
+            await this.setUrl(input);
+            rasters = (await this.data.readRasters());
+            width = this.data.getWidth();
+            height = this.data.getHeight();
+        }
+        else {
+            rasters = input.rasters;
+            width = input.width;
+            height = input.height;
+        }
+        // Delegate to BitmapGenerator
+        return BitmapGenerator.generate({ width, height, rasters }, options);
     }
-    return {
-        POSITION: { value: positions, size: 3 },
-        TEXCOORD_0: { value: texCoords, size: 2 },
-        // NORMAL: {}, - optional, but creates the high poly look with lighting
-    };
-}
-/**
- * Get Delatin generated vertices and triangles
- *
- * @param {number} meshMaxError threshold for simplifying mesh
- * @param {number} width width of the input data array
- * @param {number} height height of the input data array
- * @param {number[] | Float32Array} terrain elevation data
- * @returns {{vertices: number[], triangles: number[]}} vertices and triangles data
- */
-function getDelatinTileMesh(meshMaxError, width, height, terrain) {
-    const widthPlus = width === 257 ? 257 : width + 1;
-    const heightPlus = height === 257 ? 257 : height + 1;
-    const tin = new Delatin(terrain, widthPlus, heightPlus);
-    tin.run(meshMaxError);
-    // @ts-expect-error: Delatin instance properties 'coords' and 'triangles' are not explicitly typed in the library port
-    const { coords, triangles } = tin;
-    const vertices = coords;
-    return { vertices, triangles };
 }
 
 const EARTH_CIRCUMFERENCE = 2 * Math.PI * 6378137;
@@ -5684,19 +5754,31 @@ class CogTiles {
     }
     async initializeCog(url) {
         if (this.cog)
-            return; // Prevent re-initialization
-        this.cog = await fromUrl(url);
-        const image = await this.cog.getImage();
-        const fileDirectory = image.fileDirectory;
-        this.cogOrigin = image.getOrigin();
-        this.options.noDataValue ??= await this.getNoDataValue(image);
-        this.options.format ??= await this.getDataTypeFromTags(fileDirectory);
-        this.options.numOfChannels = fileDirectory.getValue('SamplesPerPixel');
-        this.options.planarConfig = fileDirectory.getValue('PlanarConfiguration');
-        [this.cogZoomLookup, this.cogResolutionLookup] = await this.buildCogZoomResolutionLookup(this.cog);
-        this.tileSize = image.getTileWidth();
-        this.zoomRange = this.calculateZoomRange(this.tileSize, image.getResolution()[0], await this.cog.getImageCount());
-        this.bounds = this.calculateBoundsAsLatLon(image.getBoundingBox());
+            return; // Prevent re-initialization on the same instance
+        try {
+            this.cog = await fromUrl(url);
+            const image = await this.cog.getImage();
+            const fileDirectory = image.fileDirectory;
+            this.cogOrigin = image.getOrigin();
+            this.options.noDataValue ??= await this.getNoDataValue(image);
+            this.options.format ??= await this.getDataTypeFromTags(fileDirectory);
+            this.options.numOfChannels = fileDirectory.getValue('SamplesPerPixel');
+            this.options.planarConfig = fileDirectory.getValue('PlanarConfiguration');
+            [this.cogZoomLookup, this.cogResolutionLookup] = await this.buildCogZoomResolutionLookup(this.cog);
+            this.tileSize = image.getTileWidth();
+            // 1. Validation: Ensure the image is tiled
+            if (!this.tileSize || !image.getTileHeight()) {
+                throw new Error('GeoTIFF Error: The provided image is not tiled. '
+                    + 'Please use "rio cogeo create --web-optimized" to fix this.');
+            }
+            this.zoomRange = this.calculateZoomRange(this.tileSize, image.getResolution()[0], await this.cog.getImageCount());
+            this.bounds = this.calculateBoundsAsLatLon(image.getBoundingBox());
+        }
+        catch (error) {
+            /* eslint-disable no-console */
+            console.error(`[CogTiles] Failed to initialize COG from ${url}:`, error);
+            throw error;
+        }
     }
     getZoomRange() {
         return this.zoomRange;
@@ -5802,13 +5884,6 @@ class CogTiles {
     async getTileFromImage(tileX, tileY, zoom, fetchSize) {
         const imageIndex = this.getImageIndexForZoomLevel(zoom);
         const targetImage = await this.cog.getImage(imageIndex);
-        // 1. Validation: Ensure the image is tiled
-        const tileWidth = targetImage.getTileWidth();
-        const tileHeight = targetImage.getTileHeight();
-        if (!tileWidth || !tileHeight) {
-            throw new Error('GeoTIFF Error: The provided image is not tiled. '
-                + 'Please use "rio cogeo create --web-optimized" to fix this.');
-        }
         // --- STEP 1: CALCULATE BOUNDS IN METERS ---
         // 2. Get COG Metadata (image = COG)
         const imageResolution = this.cogResolutionLookup[imageIndex];
@@ -5863,16 +5938,14 @@ class CogTiles {
         // If the tile is hanging off the edge, we need to manually reconstruct it.
         // We strictly compare against FETCH_SIZE because that is our target buffer dimension.
         if (missingLeft > 0 || missingTop > 0 || readWidth < FETCH_SIZE || readHeight < FETCH_SIZE) {
-            /// Initialize a temporary buffer for a single band (filled with NoData)
-            // We will reuse this buffer for each band to save memory allocations.
-            const tileBuffer = this.createTileBuffer(this.options.format, FETCH_SIZE);
-            tileBuffer.fill(this.options.noDataValue);
+            const numChannels = this.options.numOfChannels || 1;
+            // Initialize with a TypedArray of the full target size and correct data type
+            const validImageData = this.createTileBuffer(this.options.format, FETCH_SIZE, numChannels);
+            if (this.options.noDataValue !== undefined) {
+                validImageData.fill(this.options.noDataValue);
+            }
             // if the valid window is smaller than the tile size, it gets the image size width and height, thus validRasterData.width must be used as below
             const validRasterData = await targetImage.readRasters({ window });
-            // FOR MULTI-BAND - the result is one array with sequentially typed bands, firstly all data for the band 0, then for band 1
-            // I think this is less practical then the commented solution above, but I do it so it works with the code in GeoImage.ts in deck.gl-geoimage in function getColorValue.
-            const validImageData = Array(validRasterData.length * validRasterData[0].length);
-            validImageData.fill(this.options.noDataValue);
             // Place the valid pixel data into the tile buffer.
             for (let band = 0; band < validRasterData.length; band += 1) {
                 // We must reset the buffer for each band, otherwise data from previous band persists in padding areas
@@ -5886,7 +5959,6 @@ class CogTiles {
                     const srcRowOffset = row * validRasterData.width;
                     for (let col = 0; col < readWidth; col += 1) {
                         // Compute the destination position in the tile buffer.
-                        // We shift by the number of missing pixels (if any) at the top/left.
                         const destCol = missingLeft + col;
                         // Bounds Check: Ensure we don't write outside the allocated buffer
                         if (destRow < FETCH_SIZE && destCol < FETCH_SIZE) {
@@ -5899,7 +5971,7 @@ class CogTiles {
                     }
                 }
                 for (let i = 0; i < tileBuffer.length; i += 1) {
-                    validImageData[i * this.options.numOfChannels + band] = tileBuffer[i];
+                    validImageData[i * numChannels + band] = tileBuffer[i];
                 }
             }
             return [validImageData];
@@ -6017,10 +6089,11 @@ class CogTiles {
      *
      * @param {string} dataType - A string specifying the data type (e.g., "Int32", "Float64", "UInt16", etc.).
      * @param {number} tileSize - The width/height of the square tile.
-     * @returns {TypedArray} A typed array buffer of length tileSize * tileSize.
+     * @param {number} multiplier - Optional multiplier for interleaved buffers (e.g., numChannels).
+     * @returns {TypedArray} A typed array buffer of length (tileSize * tileSize * multiplier).
      */
-    createTileBuffer(dataType, tileSize) {
-        const length = tileSize * tileSize;
+    createTileBuffer(dataType, tileSize, multiplier = 1) {
+        const length = tileSize * tileSize * multiplier;
         switch (dataType) {
             case 'UInt8':
                 return new Uint8Array(length);
@@ -6135,12 +6208,10 @@ class CogBitmapLayer extends CompositeLayer {
             || props.bounds !== oldProps.bounds;
         if (!this.state.isTiled && shouldReload) ;
         // Update the useChannel option for bitmapCogTiles when cogBitmapOptions.useChannel changes.
-        // This ensures that the correct channel is used for rendering, but directly modifying the state
-        // object in this way is not ideal and may need refactoring in the future to follow a more
-        // declarative state management approach. Consider revisiting this if additional properties
-        // need to be synchronized or if the state structure changes.
-        if (props?.cogBitmapOptions?.useChannel && (props.cogBitmapOptions?.useChannel !== oldProps.cogBitmapOptions?.useChannel)) {
+        if (props?.cogBitmapOptions?.useChannel !== oldProps.cogBitmapOptions?.useChannel) {
             this.state.bitmapCogTiles.options.useChannel = props.cogBitmapOptions.useChannel;
+            // Trigger a refresh of the tiles
+            this.state.bitmapCogTiles.options.useChannelIndex = null; // Clear cached index
         }
         if (props.workerUrl) {
             log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
@@ -6318,6 +6389,12 @@ class CogTerrainLayer extends CompositeLayer {
             || props.elevationDecoder !== oldProps.elevationDecoder
             || props.bounds !== oldProps.bounds;
         if (!this.state.isTiled && shouldReload) ;
+        // Update the useChannel option for terrainCogTiles when terrainOptions.useChannel changes.
+        if (props?.terrainOptions?.useChannel !== oldProps.terrainOptions?.useChannel) {
+            this.state.terrainCogTiles.options.useChannel = props.terrainOptions.useChannel;
+            // Trigger a refresh of the tiles
+            this.state.terrainCogTiles.options.useChannelIndex = null; // Clear cached index
+        }
         if (props.workerUrl) {
             log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
         }
@@ -6450,25 +6527,6 @@ class CogTerrainLayer extends CompositeLayer {
                 refinementStrategy,
             });
         }
-        // if (!elevationData) {
-        //   return null;
-        // }
-        // const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
-        // return new SubLayerClass(
-        //   this.getSubLayerProps({
-        //   id: 'mesh',
-        //   }),
-        //   {
-        //   data: DUMMY_DATA,
-        //   mesh: this.state.terrain,
-        //   texture,
-        //   _instanced: false,
-        //   getPosition: (d) => [0, 0, 0],
-        //   getColor: color,
-        //   material,
-        //   wireframe,
-        //   },
-        // );
     }
 }