chore: Simplify cog-basic example (#119)

In #117 we split the existing cog-basic example into a new one specific
to land-cover. Now we can simplify some of the existing setup around
cog-basic.

Author: kylebarron

examples/cog-basic/src/App.tsx

@@ -1,18 +1,7 @@
 import type { DeckProps } from "@deck.gl/core";
 import { MapboxOverlay } from "@deck.gl/mapbox";
-import type { Device, Texture } from "@luma.gl/core";
-import { ShaderModule } from "@luma.gl/shadertools";
-import {
-  COGLayer,
-  parseColormap,
-  proj,
-} from "@developmentseed/deck.gl-geotiff";
-import type {
-  GeoTIFF,
-  GeoTIFFImage,
-  TypedArrayArrayWithDimensions,
-} from "geotiff";
-import { RasterLayerProps } from "@developmentseed/deck.gl-raster";
+import { COGLayer, proj } from "@developmentseed/deck.gl-geotiff";
+import type { GeoTIFF } from "geotiff";
 import { fromUrl, Pool } from "geotiff";
 import { toProj4 } from "geotiff-geokeys-to-proj4";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -82,102 +71,17 @@ async function getCogBounds(
 // const COG_URL =
 //   "https://nz-imagery.s3-ap-southeast-2.amazonaws.com/new-zealand/new-zealand_2024-2025_10m/rgb/2193/CC11.tiff";
 
-// const COG_URL =
-//   "https://ds-wheels.s3.us-east-1.amazonaws.com/m_4007307_sw_18_060_20220803.tif";
-
 const COG_URL =
-  "https://ds-wheels.s3.us-east-1.amazonaws.com/Annual_NLCD_LndCov_2023_CU_C1V0.tif";
-
-export type LandCoverProps = {
-  colormap_texture: Texture;
-};
-
-const landCoverModule = {
-  name: "landCover",
-} as const satisfies ShaderModule<LandCoverProps>;
-
-async function loadLandCoverTexture(
-  image: GeoTIFFImage,
-  options: {
-    device: Device;
-    window: [number, number, number, number];
-    signal?: AbortSignal;
-    pool: Pool;
-  },
-  colormapTexture: Texture,
-): Promise<{
-  texture: ImageData | Texture;
-  shaders?: RasterLayerProps["shaders"];
-  height: number;
-  width: number;
-}> {
-  const { device, window, signal, pool } = options;
-
-  const {
-    [0]: data,
-    width,
-    height,
-  } = (await image.readRasters({
-    window,
-    samples: [0],
-    pool,
-    signal,
-  })) as TypedArrayArrayWithDimensions;
-
-  const texture = device.createTexture({
-    format: "r8unorm",
-    dimension: "2d",
-    width,
-    height,
-    data,
-  });
-
-  // Hard coded NoData value but this ideally would be fetched from COG metadata
-  const nodataVal = 250;
-  // Since values are 0-1 for unorm textures,
-  const noDataScaled = nodataVal / 255.0;
-
-  return {
-    texture,
-    // For colormap rendering:
-    shaders: {
-      inject: {
-        "fs:#decl": `
-          uniform sampler2D colormap_texture;
-        `,
-        "fs:DECKGL_FILTER_COLOR": `
-          float value = color.r;
-          vec3 pickingval = vec3(value, 0., 0.);
-          if (value == ${noDataScaled}) {
-              discard;
-            } else {
-              vec4 color_val = texture(colormap_texture, vec2(value, 0.));
-              color = color_val;
-            }
-        `,
-      },
-      modules: [landCoverModule],
-      shaderProps: {
-        landCover: {
-          colormap_texture: colormapTexture,
-        },
-      },
-    },
-    height,
-    width,
-  };
-}
+  "https://ds-wheels.s3.us-east-1.amazonaws.com/m_4007307_sw_18_060_20220803.tif";
 
 export default function App() {
   const mapRef = useRef<MapRef>(null);
-  const [device, setDevice] = useState<Device | null>(null);
   const [geotiff, setGeotiff] = useState<GeoTIFF | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [debug, setDebug] = useState(false);
   const [debugOpacity, setDebugOpacity] = useState(0.25);
   const [pool] = useState<Pool>(new Pool());
-  const [colormapTexture, setColormapTexture] = useState<Texture | null>(null);
 
   useEffect(() => {
     let mounted = true;
@@ -221,51 +125,20 @@ export default function App() {
     };
   }, []);
 
-  // Once device exists, create global colormap texture
-  useEffect(() => {
-    async function createColormapTexture() {
-      if (device && geotiff) {
-        const image = await geotiff.getImage();
-        const { data, width, height } = parseColormap(
-          image.fileDirectory.ColorMap,
-        );
-        const colorMapTexture = device.createTexture({
-          data,
-          format: "rgba8unorm",
-          width,
-          height,
-          sampler: {
-            minFilter: "nearest",
-            magFilter: "nearest",
-            addressModeU: "clamp-to-edge",
-            addressModeV: "clamp-to-edge",
-          },
-        });
-
-        setColormapTexture(colorMapTexture);
-      }
-    }
-
-    createColormapTexture();
-  }, [geotiff, device]);
-
-  const layers =
-    geotiff && colormapTexture
-      ? [
-          new COGLayer({
-            id: "cog-layer",
-            geotiff,
-            maxError: 0.125,
-            debug,
-            debugOpacity,
-            geoKeysParser,
-            pool,
-            loadTexture: (image, options) =>
-              loadLandCoverTexture(image, options, colormapTexture),
-            beforeId: "aeroway-runway",
-          }),
-        ]
-      : [];
+  const layers = geotiff
+    ? [
+        new COGLayer({
+          id: "cog-layer",
+          geotiff,
+          maxError: 0.125,
+          debug,
+          debugOpacity,
+          geoKeysParser,
+          pool,
+          beforeId: "aeroway-runway",
+        }),
+      ]
+    : [];
 
   return (
     <div style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -280,11 +153,7 @@ export default function App() {
         }}
         mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
       >
-        <DeckGLOverlay
-          layers={layers}
-          interleaved
-          onDeviceInitialized={(device) => setDevice(device)}
-        />
+        <DeckGLOverlay layers={layers} interleaved />
       </Map>
 
       {/* UI Overlay Container */}
@@ -364,25 +233,6 @@ export default function App() {
               marginTop: "12px",
             }}
           >
-            {/* <label
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                fontSize: "14px",
-                cursor: "pointer",
-                marginBottom: "12px",
-              }}
-            >
-              <input
-                type="checkbox"
-                checked={renderAsTiled}
-                onChange={(e) => setRenderAsTiled(e.target.checked)}
-                style={{ cursor: "pointer" }}
-              />
-              <span>Render as tiled</span>
-            </label> */}
-
             <label
               style={{
                 display: "flex",