Demo: one-click preset contrasts for the candidate CRS lookup

README.ja.md

@@ -225,6 +225,14 @@ proj-wasm 0.1.0-alpha8 は PROJ object を解放してもメモリを全部は
 - 実 demo: `demo/crs-candidate-lookup.html`
 - GitHub Pages: `https://code4history.github.io/Atlas/`
 
+デモ画面には 3 つの対比のプリセットがあり、それぞれ A と B の 2 ボタンを持ちます。
+
+- `place`: 同じ設定のまま京都（A）と東京（B）の範囲を比べる。候補の平面直角座標系が変わり、片方は VI 系、もう片方は VIII・IX 系になる。
+- `historical-grid`: 京都の範囲で、歴史グリッドの投影を外した場合（A）と入れた場合（B）を比べる。B にだけ `UTJCP:ZONE-B` が加わり、件数が 1 つ増える。
+- `area-filter`: 京都の範囲で、地域を Japan に絞った場合（A）と絞らない場合（B）を比べる。絞らないと日本以外の CRS も一覧に並ぶ。
+
+プリセットを押すと、範囲の 4 隅にマーカーを置き、地図をその範囲へ寄せ、検索を 1 回だけ走らせ、「見え方」の 1 行を出します。押したあとも、既存のつまみ・地域の選択・地図操作はそのまま使えます。
+
 ## ライセンス
 
 MIT License です。[LICENSE](./LICENSE) を参照してください。

README.md

@@ -234,6 +234,14 @@ in [CHANGELOG.md](./CHANGELOG.md).
 - Demo app: `demo/crs-candidate-lookup.html`
 - GitHub Pages target: `https://code4history.github.io/Atlas/`
 
+The demo page has three preset contrasts. Each contrast has an A and a B button:
+
+- `place`: the same filters over Kyoto (A) and over Tokyo (B), so the candidate plane rectangular systems change (VI on one side, VIII and IX on the other).
+- `historical-grid`: the Kyoto extent with the historical grid projections off (A) and on (B). B adds `UTJCP:ZONE-B` and exactly one row.
+- `area-filter`: the Kyoto extent with the Japan area filter on (A) and off (B). Without the filter, CRSs from outside Japan join the list.
+
+Pressing a preset puts markers on the four corners of its extent, fits the map to it, runs one lookup, and writes a one-line description of what should be visible. The existing toggles, area select and map controls keep working afterwards.
+
 ## License
 
 MIT License. See [LICENSE](./LICENSE).

demo/crs-candidate-lookup.html

@@ -45,6 +45,11 @@ <h1>Atlas - Candidate CRS Demo</h1>
     <span id="status" class="c4h-status">初期化中...</span>
   </header>
 
+  <section class="atlas-presets" aria-label="Presets">
+    <div id="preset-bar" class="atlas-preset-bar"></div>
+    <p class="atlas-expectation"><strong>見え方:</strong> <span id="preset-expectation"></span></p>
+  </section>
+
   <div class="c4h-instructions">
     操作: クリックでマーカー追加 - 全マーカーの bbox で CRS 候補検索。候補選択で CRS bbox を表示。
   </div>
@@ -63,7 +68,11 @@ <h1>Atlas - Candidate CRS Demo</h1>
     <section class="c4h-card">
       <header class="atlas-card-header">
         <h2>Candidate CRS</h2>
-        <p id="result-count">No query yet.</p>
+        <div class="atlas-result-count-line">
+          <p id="result-count">No query yet.</p>
+          <p id="result-summary" class="atlas-result-summary"></p>
+        </div>
+        <p id="excluded-summary" class="atlas-result-summary"></p>
       </header>
       <div class="atlas-table-scroll">
         <table>
@@ -88,6 +97,12 @@ <h2>CRS Detail</h2>
     </section>
   </div>
 
+  <footer class="c4h-portal-footer" id="version"></footer>
+
   <script type="module" src="./main.js"></script>
+  <script type="module">
+    import { initDemo } from "./main.js";
+    initDemo();
+  </script>
 </body>
 </html>

demo/main.d.ts

@@ -0,0 +1,25 @@
+import type { ListProjectedCrsFromProjWasmOptions, ProjectedCrsInfo } from "../src/proj-wasm-crs.ts";
+
+export interface DemoRuntime {
+  initializeProjWasmRuntime(options?: { projWasmAssetBaseUrl?: string | URL }): Promise<void> | void;
+  listProjectedCrsFromProjWasm(options: ListProjectedCrsFromProjWasmOptions): Promise<ProjectedCrsInfo[]>;
+}
+
+export interface DemoState {
+  activePreset: string | null;
+  markers: [number, number][];
+  rows: ProjectedCrsInfo[];
+  runtimeReady: boolean;
+  areaFilterEnabled: boolean;
+  areaMode: string;
+  includeCustomProjections: boolean;
+  includeDeprecated: boolean;
+  onshoreOnly: boolean;
+}
+
+export interface DemoHandle {
+  whenSettled(): Promise<void>;
+  getState(): DemoState;
+}
+
+export function initDemo(config?: { runtime?: DemoRuntime; doc?: unknown }): DemoHandle;