cog viewer
Every time I get a new COG (Cloud Optimized GeoTIFF) file, the first questions are always: what's the CRS? What's the value range? Is it actually cloud-optimized? What does this region look like?
Normal flow: open Jupyter, import rasterio, write boilerplate, plot something, look once, then start over for the next file. It always felt like: a quick "let me just look at this" shouldn't require so much setup.
cog viewer is for that case — pure browser, drop a URL or local .tif, draw a region, see the data immediately; once you're satisfied, "copy as Python" exports a rasterio / rioxarray snippet you can paste into Jupyter to continue.
It's actually COG-aware:
- Uses HTTP byte-range to download only the tiles for the current viewport — never pulls the whole file
- Auto-detects multi-band, supports RGB compose
- Regional stats + histograms, multiple palettes (terrain / viridis / magma / cividis / RdBu_r…)
- IFD ladder, TIFF tags, GeoKeys — all inspectable
- A "COG-friendliness" badge tells you whether the file is actually well-optimized
- Elevation profiles, clip-and-download sub-GeoTIFFs
- Permalinks (bbox + palette + band selection encoded in URL)
- Japanese plane-rectangular CRS pre-registered
Stack: pure HTML + ES modules, no build step. OpenLayers 10, geotiff.js, proj4js loaded from CDN. The "no-build" part is my favorite — you can double-click the HTML file and it just runs.
Built with Claude Code as a collaboration.
--- layout: lab.njk title_zh: cog viewer title_ja: cog viewer title_en: cog viewer year: 2026 cover: /images/lab/cog-viewer/cover.png description: "Browser-based viewer & analyzer for Cloud Optimized GeoTIFFs. COG-aware fetching, multi-band compose, histograms, elevation profiles. Drop a URL or local .tif and inspect — then copy a Python snippet to continue in Jupyter." url: https://cog-viewer.surreal.tools embed: https://cog-viewer.surreal.tools github: https://github.com/lavalse/cog-viewer workTags: - lab - software --- <div lang="zh"> 每次拿到一份新的 COG（Cloud Optimized GeoTIFF）文件，第一件事总是：它的 CRS 是什么？数值范围在哪里？是不是真的 cloud-optimized？这个区域看起来是什么样？ 通常的流程是开个 Jupyter，import rasterio、写一段 boilerplate、画个图、看一眼，然后下一个文件再来一遍。每次都觉得：这种"快速看一眼"应该不需要这么重的环境吧。 cog viewer 就是为这个场景做的——纯浏览器，丢一个 URL 或本地 .tif 进去，画一个区域，立刻看到数据；满意了再"copy as Python"导出 rasterio / rioxarray 代码段拿到 Jupyter 继续深入。 它真的"懂" COG： - 利用 HTTP byte-range 只下载当前视口需要的 tile，不会把整个文件拉下来 - 自动检测多波段，支持 RGB 合成 - 区域统计 + 直方图，多种 palette（terrain / viridis / magma / cividis / RdBu_r…） - IFD 阶梯、TIFF tag、GeoKey 全部可查 - 给出一个 "COG-friendliness" 徽章告诉你这个文件到底优化得好不好 - Elevation profile、clip-and-download 子文件 - 永久链接（bbox + palette + band 全编码进 URL） - 日本平面直角坐标系预注册 技术：纯 HTML + ES modules，没有 build step。CDN 加载 [OpenLayers 10](https://openlayers.org/)、[geotiff.js](https://geotiffjs.github.io/)、[proj4js](http://proj4js.org/)。"no-build" 是我喜欢的部分——HTML 文件双击就能跑。 也是用 [Claude Code](https://www.claude.com/product/claude-code) 协作搭起来的工具。 </div> <div lang="ja"> 新しい COG（Cloud Optimized GeoTIFF）ファイルを手にしたとき、まず気になるのはいつも同じだ：CRS は何か？値の範囲は？本当に cloud-optimized なのか？この領域はどんな見た目なのか？ いつもの流れは Jupyter を開いて、rasterio をインポートして、ボイラープレートを書いて、プロットして、ちらっと見て、また次のファイルで同じことを繰り返す。毎回思う——「ちょっと見るだけ」のためにこんな重い環境は要らないはずだと。 cog viewer はそのために作った——純粋なブラウザ、URL またはローカルの `.tif` をドロップして、領域を描けばすぐにデータが見える。満足したら「copy as Python」で rasterio / rioxarray のスニペットを取り出し、Jupyter で続きを深掘りできる。 本当に COG を「理解している」： - HTTP byte-range を使い、現在のビューポートが必要とするタイルだけをダウンロード——ファイル全体を引っ張ったりしない - マルチバンドを自動検出、RGB 合成に対応 - 領域の統計 + ヒストグラム、複数のパレット（terrain / viridis / magma / cividis / RdBu_r…） - IFD ラダー、TIFF タグ、GeoKey すべて検査可能 - 「COG-friendliness」バッジで、そのファイルがどのくらい最適化されているかを示す - Elevation profile、clip-and-download でサブファイルを保存 - パーマリンク（bbox + palette + band すべて URL にエンコード） - 日本の平面直角座標系を事前登録 技術：純 HTML + ES modules、ビルドステップなし。[OpenLayers 10](https://openlayers.org/)、[geotiff.js](https://geotiffjs.github.io/)、[proj4js](http://proj4js.org/) を CDN から読み込む。「no-build」が気に入っているところ——HTML をダブルクリックするだけで動く。 これも [Claude Code](https://www.claude.com/product/claude-code) との協働で作ったツール。 </div> <div lang="en"> Every time I get a new COG (Cloud Optimized GeoTIFF) file, the first questions are always: what's the CRS? What's the value range? Is it actually cloud-optimized? What does this region look like? Normal flow: open Jupyter, `import rasterio`, write boilerplate, plot something, look once, then start over for the next file. It always felt like: a quick "let me just look at this" shouldn't require so much setup. cog viewer is for that case — pure browser, drop a URL or local `.tif`, draw a region, see the data immediately; once you're satisfied, "copy as Python" exports a `rasterio` / `rioxarray` snippet you can paste into Jupyter to continue. It's actually COG-aware: - Uses HTTP byte-range to download only the tiles for the current viewport — never pulls the whole file - Auto-detects multi-band, supports RGB compose - Regional stats + histograms, multiple palettes (terrain / viridis / magma / cividis / RdBu_r…) - IFD ladder, TIFF tags, GeoKeys — all inspectable - A "COG-friendliness" badge tells you whether the file is actually well-optimized - Elevation profiles, clip-and-download sub-GeoTIFFs - Permalinks (bbox + palette + band selection encoded in URL) - Japanese plane-rectangular CRS pre-registered Stack: pure HTML + ES modules, no build step. [OpenLayers 10](https://openlayers.org/), [geotiff.js](https://geotiffjs.github.io/), [proj4js](http://proj4js.org/) loaded from CDN. The "no-build" part is my favorite — you can double-click the HTML file and it just runs. Built with [Claude Code](https://www.claude.com/product/claude-code) as a collaboration. </div>