developmentseed · kylebarron · Apr 7, 2026 · Apr 6, 2026 · Apr 6, 2026 · Apr 7, 2026
diff --git a/examples/zarr-sentinel2-tci/README.md b/examples/zarr-sentinel2-tci/README.md
@@ -0,0 +1,21 @@
+# GeoZarr Sentinel-2 True Color Image
+
+## Setup
+
+1. Install dependencies from the repository root:
+   ```bash
+   pnpm install
+   ```
+
+2. Build the packages:
+   ```bash
+   pnpm build
+   ```
+
+3. Run the development server:
+   ```bash
+   cd examples/cog-basic
+   pnpm dev
+   ```
+
+4. Open your browser to http://localhost:3000
diff --git a/examples/zarr-sentinel2-tci/index.html b/examples/zarr-sentinel2-tci/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>COGLayer Example</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+      #root {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/zarr-sentinel2-tci/package.json b/examples/zarr-sentinel2-tci/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "deck.gl-zarr-sentinel2-tci",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "publish": "pnpm build && gh-pages -d dist -b gh-pages -e examples/zarr-sentinel2-tci"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^9.2.10",
+    "@deck.gl/geo-layers": "^9.2.10",
+    "@deck.gl/layers": "^9.2.10",
+    "@deck.gl/mapbox": "^9.2.10",
+    "@deck.gl/mesh-layers": "^9.2.10",
+    "@developmentseed/deck.gl-zarr": "workspace:^",
+    "@luma.gl/core": "9.2.6",
+    "maplibre-gl": "^5.19.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-map-gl": "^8.1.0",
+    "zarrita": "^0.6.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "gh-pages": "^6.3.0",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/examples/zarr-sentinel2-tci/src/App.tsx b/examples/zarr-sentinel2-tci/src/App.tsx
@@ -0,0 +1,132 @@
+import type { MapboxOverlayProps } from "@deck.gl/mapbox";
+import { MapboxOverlay } from "@deck.gl/mapbox";
+import { ZarrLayer } from "@developmentseed/deck.gl-zarr";
+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";
+
+function DeckGLOverlay(props: MapboxOverlayProps) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
+// Currently generated locally from
+// https://github.com/developmentseed/geozarr-examples/pull/36
+const ZARR_URL = "http://localhost:8080/TCI.zarr";
+
+export default function App() {
+  const mapRef = useRef<MapRef>(null);
+  const [debug, setDebug] = useState(false);
+  const [debugOpacity, setDebugOpacity] = useState(0.25);
+
+  const zarrLayer = new ZarrLayer({
+    id: "zarr-layer",
+    source: ZARR_URL,
+    debug,
+    debugOpacity,
+  });
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <MaplibreMap
+        ref={mapRef}
+        initialViewState={{
+          longitude: -74,
+          latitude: 41,
+          zoom: 8.5,
+        }}
+        mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+      >
+        <DeckGLOverlay layers={[zarrLayer]} interleaved />
+      </MaplibreMap>
+
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          zIndex: 1000,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: "20px",
+            left: "20px",
+            background: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+            maxWidth: "300px",
+            pointerEvents: "auto",
+          }}
+        >
+          <h3 style={{ margin: "0 0 8px 0", fontSize: "16px" }}>
+            ZarrLayer — Sentinel-2 TCI
+          </h3>
+          <p style={{ margin: "0 0 12px 0", fontSize: "12px", color: "#666" }}>
+            GeoZarr multiscale, EPSG:32612
+          </p>
+
+          <div
+            style={{
+              padding: "12px 0",
+              borderTop: "1px solid #eee",
+              marginTop: "4px",
+            }}
+          >
+            <label
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                fontSize: "14px",
+                cursor: "pointer",
+                marginBottom: "12px",
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={debug}
+                onChange={(e) => setDebug(e.target.checked)}
+                style={{ cursor: "pointer" }}
+              />
+              <span>Show Debug Mesh</span>
+            </label>
+
+            {debug && (
+              <div style={{ marginTop: "8px" }}>
+                <label
+                  style={{
+                    display: "block",
+                    fontSize: "12px",
+                    color: "#666",
+                    marginBottom: "4px",
+                  }}
+                >
+                  Debug Opacity: {debugOpacity.toFixed(2)}
+                  <input
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value={debugOpacity}
+                    onChange={(e) =>
+                      setDebugOpacity(parseFloat(e.target.value))
+                    }
+                    style={{ width: "100%", cursor: "pointer" }}
+                  />
+                </label>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/zarr-sentinel2-tci/src/main.tsx b/examples/zarr-sentinel2-tci/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/zarr-sentinel2-tci/tsconfig.json b/examples/zarr-sentinel2-tci/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/zarr-sentinel2-tci/vite.config.ts b/examples/zarr-sentinel2-tci/vite.config.ts
@@ -0,0 +1,11 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "/deck.gl-raster/examples/zarr-sentinel2-tci/",
+  worker: { format: "es" },
+  server: {
+    port: 3000,
+  },
+});