wip: land cover example with split view

examples/land-cover/package.json

@@ -14,6 +14,7 @@
     "@deck.gl/layers": "^9.2.5",
     "@deck.gl/mapbox": "^9.2.5",
     "@deck.gl/mesh-layers": "^9.2.5",
+    "@deck.gl/widgets": "^9.2.5",
     "@developmentseed/deck.gl-geotiff": "workspace:^",
     "@developmentseed/deck.gl-raster": "workspace:^",
     "@luma.gl/core": "9.2.5",

examples/land-cover/src/App.tsx

@@ -6,6 +6,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
 import { useRef, useState } from "react";
 import type { MapRef } from "react-map-gl/maplibre";
 import { Map as MaplibreMap, useControl } from "react-map-gl/maplibre";
+import { DeckGLSplitView } from "./components/DeckGLSplitView";
 import { InfoPanel } from "./components/InfoPanel";
 import { UIOverlay } from "./components/UIOverlay";
 
@@ -34,6 +35,7 @@ export default function App() {
   const mapRef = useRef<MapRef>(null);
   const [debug, setDebug] = useState(false);
   const [debugOpacity, setDebugOpacity] = useState(0.25);
+  const [comparisonMode, setComparisonMode] = useState(false);
 
   const cog_layer = new COGLayer({
     id: "cog-layer",
@@ -61,26 +63,32 @@ export default function App() {
 
   return (
     <div style={{ position: "relative", width: "100%", height: "100%" }}>
-      <MaplibreMap
-        ref={mapRef}
-        initialViewState={{
-          longitude: 0,
-          latitude: 0,
-          zoom: 3,
-          pitch: 0,
-          bearing: 0,
-        }}
-        mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
-      >
-        <DeckGLOverlay layers={[cog_layer]} interleaved />
-      </MaplibreMap>
+      {comparisonMode ? (
+        <DeckGLSplitView debug={debug} debugOpacity={debugOpacity} />
+      ) : (
+        <MaplibreMap
+          ref={mapRef}
+          initialViewState={{
+            longitude: 0,
+            latitude: 0,
+            zoom: 3,
+            pitch: 0,
+            bearing: 0,
+          }}
+          mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+        >
+          <DeckGLOverlay layers={[cog_layer]} />
+        </MaplibreMap>
+      )}
 
       <UIOverlay>
         <InfoPanel
           debug={debug}
           debugOpacity={debugOpacity}
+          comparisonMode={comparisonMode}
           onDebugChange={setDebug}
           onDebugOpacityChange={setDebugOpacity}
+          onComparisonModeChange={setComparisonMode}
         />
       </UIOverlay>
     </div>

examples/land-cover/src/components/DeckGLSplitView.tsx

@@ -0,0 +1,146 @@
+import { Deck, MapView } from "@deck.gl/core";
+import { _SplitterWidget as SplitterWidget } from "@deck.gl/widgets";
+import { COGLayer, proj } from "@developmentseed/deck.gl-geotiff";
+import { toProj4 } from "geotiff-geokeys-to-proj4";
+import { useEffect, useRef } from "react";
+
+interface DeckGLSplitViewProps {
+  debug: boolean;
+  debugOpacity: number;
+}
+
+async function geoKeysParser(
+  geoKeys: Record<string, any>,
+): Promise<proj.ProjectionInfo> {
+  const projDefinition = toProj4(geoKeys as any);
+
+  return {
+    def: projDefinition.proj4,
+    parsed: proj.parseCrs(projDefinition.proj4),
+    coordinatesUnits: projDefinition.coordinatesUnits as proj.SupportedCrsUnit,
+  };
+}
+
+const COG_URL_1985 =
+  "https://s3.us-east-1.amazonaws.com/ds-deck.gl-raster-public/cog/Annual_NLCD_LndCov_1985_CU_C1V1.tif";
+const COG_URL_2024 =
+  "https://s3.us-east-1.amazonaws.com/ds-deck.gl-raster-public/cog/Annual_NLCD_LndCov_2024_CU_C1V1.tif";
+
+export function DeckGLSplitView({ debug, debugOpacity }: DeckGLSplitViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const deckRef = useRef<Deck | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const initialViewState = {
+      longitude: -98,
+      latitude: 38.5,
+      zoom: 3.5,
+      pitch: 0,
+      bearing: 0,
+    };
+
+    const cog_layer_1985 = new COGLayer({
+      id: "cog-layer-1985",
+      geotiff: COG_URL_1985,
+      debug,
+      debugOpacity,
+      geoKeysParser,
+      operation: "draw",
+    });
+
+    const cog_layer_2024 = new COGLayer({
+      id: "cog-layer-2024",
+      geotiff: COG_URL_2024,
+      debug,
+      debugOpacity,
+      geoKeysParser,
+      operation: "draw",
+    });
+
+    const deck = new Deck({
+      parent: containerRef.current,
+      initialViewState: {
+        view1: initialViewState,
+        view2: initialViewState,
+      },
+      controller: true,
+      views: [
+        new MapView({ id: "left", x: 0, width: "50%", controller: true }),
+        new MapView({ id: "right", x: "50%", width: "50%", controller: true }),
+      ],
+      layers: [
+        cog_layer_1985.clone({ operation: "draw" }),
+        cog_layer_2024.clone({ operation: "draw" }),
+      ],
+      layerFilter: ({ layer, viewport }) => {
+        if (viewport.id === "view1") {
+          return layer.id === "cog-layer-1985";
+        }
+        if (viewport.id === "view2") {
+          return layer.id === "cog-layer-2024";
+        }
+        return true;
+      },
+      widgets: [
+        new SplitterWidget({
+          viewId1: "view1",
+          viewId2: "view2",
+          orientation: "vertical",
+        }),
+      ],
+    });
+
+    deckRef.current = deck;
+
+    return () => {
+      deck.finalize();
+      deckRef.current = null;
+    };
+  }, []);
+
+  // Update layers when debug settings change
+  useEffect(() => {
+    if (!deckRef.current) return;
+
+    const cog_layer_1985 = new COGLayer({
+      id: "cog-layer-1985",
+      geotiff: COG_URL_1985,
+      debug,
+      debugOpacity,
+      geoKeysParser,
+      operation: "draw",
+    });
+
+    const cog_layer_2024 = new COGLayer({
+      id: "cog-layer-2024",
+      geotiff: COG_URL_2024,
+      debug,
+      debugOpacity,
+      geoKeysParser,
+      operation: "draw",
+    });
+
+    deckRef.current.setProps({
+      layers: [
+        cog_layer_1985.clone({ operation: "draw" }),
+        cog_layer_2024.clone({ operation: "draw" }),
+      ],
+    });
+  }, [debug, debugOpacity]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "#1a1a1a",
+      }}
+    />
+  );
+}

examples/land-cover/src/components/InfoPanel.tsx

@@ -4,8 +4,10 @@ import { Legend } from "./Legend";
 interface InfoPanelProps {
   debug: boolean;
   debugOpacity: number;
+  comparisonMode: boolean;
   onDebugChange: (checked: boolean) => void;
   onDebugOpacityChange: (opacity: number) => void;
+  onComparisonModeChange: (checked: boolean) => void;
 }
 
 const helpIconTooltip = `
@@ -17,8 +19,10 @@ Triangles depict the GPU-based reprojection. Instead of per-pixel reprojection,
 export function InfoPanel({
   debug,
   debugOpacity,
+  comparisonMode,
   onDebugChange,
   onDebugOpacityChange,
+  onComparisonModeChange,
 }: InfoPanelProps) {
   return (
     <div
@@ -74,6 +78,33 @@ export function InfoPanel({
           marginTop: "12px",
         }}
       >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: "12px",
+          }}
+        >
+          <label
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              fontSize: "14px",
+              cursor: "pointer",
+            }}
+          >
+            <input
+              type="checkbox"
+              checked={comparisonMode}
+              onChange={(e) => onComparisonModeChange(e.target.checked)}
+              style={{ cursor: "pointer" }}
+            />
+            <span>Compare 1985 vs 2024</span>
+          </label>
+        </div>
+
         <div
           style={{
             display: "flex",