cog viewer

---
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>