mcpField
G
geospatial-frontend

geospatial-frontend

github.com/isaaccorleyデザイン・UI7953 回インストール12 週間前に更新
リポジトリ

geospatial-frontend について

地球表示のインターフェースを備えた、地図中心の地理空間デモ Web アプリを構築するスキルです。Vanilla TypeScript と MapLibre の構成、空間データの読み込み、描画操作、ガイド付きチュートリアルを示します。

主な機能

  1. 01MapLibre GL JS の地球表示
  2. 02GeoJSON レイヤーと描画ツール
  3. 03DuckDB-WASM による空間フィルタリング
  4. 04Web Worker の計算パターン
  5. 05スポットライト式の対話チュートリアル
  6. 06レスポンシブなパネル配置

活用シーン

  1. 01地理空間デモアプリの構築
  2. 02衛星ベースマップと GeoJSON の表示
  3. 03Parquet データの空間フィルタリング
  4. 04地図操作のユーザーガイド

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/isaaccorley/geospatial-skills --skill geospatial-frontend

インストール後、Claude Code で/geospatial-frontendを入力して読み込まれたか確認します。

同梱ファイルreferences/design-system.mdreferences/user-preferences.md

詳細

地理空間フロントエンドデモビルダー

本格的な地図中心のデモ用 Web アプリを構築します。実運用されている地理空間検索デモをベースに、実績のあるデザインパターンを取り入れています。

アーキテクチャ

  • スタック：Vite + バニラ TypeScript + MapLibre GL JS（地球儀）+ DuckDB-WASM + 純粋な CSS
  • フレームワークなし：React、Vue、Tailwind、CSS-in-JS は使用しません。セマンティック HTML + CSS カスタムプロパティ + バニラ TS のみを使用します。
  • 地図を主役に：地球儀がアプリそのものです。それ以外の要素は、透明な HUD としてその上に重なります。
  • 単一の信頼できる情報源：グローバルな state オブジェクトを使用し、updateView() で再描画します。フィンガープリントの差分検出により、不要な DOM の再構築を防ぎます。

デザインシステム

トークンの仕様（色、フォント、影、間隔、角丸、アニメーション、コンポーネント）の詳細は、references/design-system.md を参照してください。

基本のアイデンティティ：温かみのあるエスプレッソ色 + アイボリー + さび色。ダークモードのみ。ガラス風のフローティングパネル。Anthropic Salon の美学に着想を得ています。

UI ルール

実績のあるパターン、確認済みの機能、デザインルールについては、references/user-preferences.md を参照してください。

レイアウト

viewport (100vw x 100vh, fixed)
  ::before  starfield
  ::after   vignette
  #map      MapLibre globe canvas
  brand     top-left (spinning rings + logotype)
  search    top-center (glassmorphed geocoder)
  status    top-center-below (pulsing LED + message)
  panel-L   left (query: draw controls, exemplars, results)
  panel-R   right (explore/discoveries, optional)
  tutorial  overlay + spotlight + card (z:1000+)

パネルは position: fixed で配置し、十分なパディングを設けたガラス風のスタイルにします。その下で、地図がビューポート全体を埋めます。

地図の統合

  • projection: "globe" を指定した MapLibre GL JS（平面図ではなく 3D 地球儀）
  • Sentinel-2 の雲なしタイル（または同等の衛星ベースマップ）
  • レイヤーのスタック：AOI の塗りつぶし／線 -> 下書きレイヤー -> 結果の塗りつぶし／線 -> ハロー付きポイントサークル -> ホバープレビュー
  • 描画：長方形（Shift キーを押しながらドラッグ、DOM オーバーレイを使用）+ ポリゴン（クリックして頂点を追加し、ダブルクリックで確定）
  • フライ・トゥーアニメーション：globe.flyTo() を使用し、curve は 1.4、speed は 1.2 に設定
  • GeoJSON ソース：すべてのデータを GeoJSON とし、動的なスタイリングには式ベースの paint プロパティを使用

データパイプラインのパターン

  • DuckDB-WASM で Parquet マニフェストとシャードを読み込みます
  • ST_Intersects またはバウンディングボックスによる包含判定で空間フィルタリングを行います
  • 重い計算（埋め込みベクトルの距離、スコアリング）には Web Worker を使用します
  • 同時実行数を制限してシャードを並列取得します
  • 2 段階のデータ読み込み：最初にメタデータを読み込み、埋め込みベクトルは必要に応じて読み込みます

チュートリアルシステム

実際の操作をシミュレートする、5～7 ステップのインタラクティブなスポットライト形式のウォークスルーです。

  • ボックスシャドウのスポットライト（0 0 0 9999px rgba(...)）で対象要素の上に穴を開けます
  • getBoundingClientRect() でカードの位置を自動調整し、ガラスパネル風にスタイリングします
  • アニメーション付きのリップル効果でクリックをシミュレートします
  • Enter キーで次に進みます。ユーザーが先に進んだ場合は、サンプルを自動配置します
  • 完了状態を localStorage に保存します
  • デモは実際に操作できる必要があります。ズーム、描画、サンプルの配置、表示モードをシミュレートします

レスポンシブ対応

ブレークポイントは 2 つだけです。

  • 1100px：パネルを縮小し、サブナビゲーションを非表示にします
  • 900px：パネルを画面下部中央に積み重ね、最大高さを 40～45vh にします

ファイル構成

各ファイルは約 500 LOC 未満に保ちます。関心ごとに分割します。

  • main.ts -- アプリの状態、DOM、イベントハンドラー、チュートリアル
  • map.ts -- MapLibre のセットアップ、レイヤー、描画、カメラ
  • types.ts -- インターフェース
  • util.ts -- ジオメトリ、色の補間、フォーマット
  • scoring-worker.ts -- 計算用 Web Worker
  • styles.css -- すべての CSS（純粋な CSS、プリプロセッサーなし）
  • index.html -- フォントのプリロードとメタタグを含むエントリーファイル

コメント

Markdown 対応