Skip to content

feat: Mosaic tile layer #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kylebarron merged 17 commits into from
Jan 15, 2026
Merged

feat: Mosaic tile layer #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fe00e07
feat: Mosaic tile layer
kylebarron Jan 13, 2026
d358623
Set up mosaic example
kylebarron Jan 14, 2026
6dc9372
fix debug layer id
kylebarron Jan 14, 2026
485c46f
ensure images render
kylebarron Jan 14, 2026
1c97d77
pass in bbox
kylebarron Jan 14, 2026
21f22e5
Create MosaicLayer and clean up app
kylebarron Jan 15, 2026
9dd6b06
pass through signal
kylebarron Jan 15, 2026
54b007b
fix type generics
kylebarron Jan 15, 2026
fe34cfe
type checking
kylebarron Jan 15, 2026
ede7925
Update docs
kylebarron Jan 15, 2026
c0073f8
lightweight definition of proj strings
kylebarron Jan 15, 2026
390bb81
Add `getSource` prop to MosaicLayer to do initial per-mosaic-item dat…
kylebarron Jan 15, 2026
d078fd2
customize rgb/false color rendering
kylebarron Jan 15, 2026
efbc11e
render rgb, false color, ndvi
kylebarron Jan 15, 2026
3a761c5
update example
kylebarron Jan 15, 2026
176de94
lint
kylebarron Jan 15, 2026
9330da8
lint
kylebarron Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions examples/naip-mosaic/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# NAIP Client-side Mosaic

This example demonstrates how to use the `MosaicLayer` to visualize a client-side mosaic of Cloud-Optimized GeoTIFFs (COGs) in deck.gl.

## 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/naip-mosaic
pnpm dev
```

4. Open your browser to http://localhost:3000
22 changes: 22 additions & 0 deletions examples/naip-mosaic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>NAIP Mosaic 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>
33 changes: 33 additions & 0 deletions examples/naip-mosaic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "naip-mosaic-example",
"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/naip-mosaic"
},
"dependencies": {
"@deck.gl/core": "^9.2.5",
"@deck.gl/layers": "^9.2.5",
"@deck.gl/mapbox": "^9.2.5",
"@developmentseed/deck.gl-geotiff": "workspace:^",
"@developmentseed/deck.gl-raster": "workspace:^",
"@luma.gl/core": "9.2.5",
"@luma.gl/shadertools": "9.2.5",
"geotiff": "^2.1.3",
"maplibre-gl": "^5.15.0",
"proj4": "^2.20.2",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react-map-gl": "^8.1.0"
},
"devDependencies": {
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2",
"gh-pages": "^6.3.0",
"vite": "^7.3.0"
}
}
Loading