GeonicDB サンプル: 公共施設マップ

自治体のオープンデータ（公共施設一覧）を GeonicDB に登録し、Geolonia Maps で可視化する最小構成のサンプルアプリケーションです。

ライブデモ: https://geolonia.github.io/geonicdb-sample-public-facility/

板橋区が公開する公共施設一覧（デジタル庁 自治体標準オープンデータセット・CC BY 4.0）を GeonicDB（NGSI-v2 対応 Context Broker）に登録し、リスト表示と地図ピン表示を左右分割・連動させて閲覧できるようにした読み取り専用のデモです（混雑状況のリアルタイム監視などは行いません）。

• 業務価値: 既存のオープンデータを GeonicDB に載せるだけで「施設管理台帳のデジタル化」を最小コストで体感できます。
• 技術リファレンス: @geolonia/geonicdb-sdk + Geolonia Maps の最小 clean な実装例です。Use this template → 自団体データへ差し替え → デプロイ、まで最短距離で辿れる構成にしています。

npm install
cp .env.example .env.local   # 環境変数を設定（次項参照）
npm run dev

ブラウザで http://localhost:5173 にアクセスしてください。

.env.local の VITE_GEONICDB_URL / VITE_GEONICDB_TENANT を書き換えることで、任意の GeonicDB インスタンスに向けられます。

エンティティの操作には @geolonia/geonicdb-cli（npm install -g @geolonia/geonicdb-cli）が便利です。

Geolonia Maps の API キーは Geolonia Dashboard から取得してください。

同梱の板橋区公共施設データ（CC BY 4.0）でまず試してから、自団体のデータに差し替える2段階です。

# .env.local に GEONICDB_SEED_URL / GEONICDB_SEED_TENANT / (必要なら) GEONICDB_SEED_TOKEN を設定
npm run seed

• scripts/seed.ts が同梱の scripts/data/itabashi-public-facilities.csv を読み込み、NGSI-v2 の PublicFacility エンティティへ変換して投入します。
• 自団体データに差し替える場合は、同じ列構成（デジタル庁 自治体標準オープンデータセットの公共施設一覧フォーマット）の CSV を用意し npm run seed -- --csv <path> を実行してください。
• ★ライブデモの demo テナント（geonicdb.geolonia.com）は匿名・読み取り専用のため投入できません。seed は必ず自分の GeonicDB に対して実行してください。

データの入れ方の詳細は docs/architecture.md（③ データの入れ方）を参照してください。

ビルドした dist/ は静的ファイルなので、GitHub Pages・Netlify・任意の静的ホスティングにそのまま配置できます。

★VITE_GEONICDB_URL / VITE_GEONICDB_TENANT / VITE_GEOLONIA_API_KEY（および GitHub Pages 用の VITE_BASE）はビルド時に dist/ へ焼き込まれる値です。ホスティング先ごとにビルド時の環境変数設定が必要です。

main への push で .github/workflows/deploy-pages.yml が自動的にビルド・デプロイします。

1. リポジトリの Settings > Pages で Source を「GitHub Actions」に設定する。

2. 自団体の GeonicDB・地図キーを使う場合は Settings > Secrets and variables > Actions > Variables で以下を設定する（未設定でもプレースホルダーでビルドは成功する。地図タイルが空白になるだけ）。

   変数名	説明
   GEOLONIA_API_KEY	Geolonia Maps の API キー（未設定時は YOUR-API-KEY）
   GEONICDB_URL	GeonicDB エンドポイント（未設定時は https://geonicdb.geolonia.com）
   GEONICDB_TENANT	GeonicDB テナント名（未設定時は demo）

3. VITE_BASE はワークフローがリポジトリ名から自動設定するため、手動設定は不要。

雛形（netlify.toml）を同梱しています。

1. Netlify で「Add new site」→「Import an existing project」から本リポジトリを選択する。
2. ビルドコマンド・公開ディレクトリは netlify.toml から自動検出される（npm run build / dist）。
3. Site configuration > Environment variables で VITE_GEONICDB_URL / VITE_GEONICDB_TENANT / VITE_GEOLONIA_API_KEY を設定する（netlify.toml には値を含めていない。netlify.toml の [build.environment] は Netlify UI の設定より優先されてしまうため、意図的に空にしてある）。未設定のままだと施設データ・地図タイルとも表示されない。GitHub Pages と異なり VITE_BASE は不要（ルート / で配信されるため既定のままでよい）。

VITE_GEONICDB_URL=<自GeonicDB> VITE_GEONICDB_TENANT=<自テナント> VITE_GEOLONIA_API_KEY=<自キー> npm run build

dist/ を任意の静的ホスティング（S3+CloudFront・Cloudflare Pages 等）にアップロードしてください。

fork して自団体向けに仕立てる際、どこを変えればよいかの一覧です。

• @geolonia/geonicdb-sdk（NgsiV2Client）によるデータ取得
• Geolonia Maps（@geolonia/embed）による地図描画
• 静的ホスティングのみ（サーバーサイド実装なし）・匿名 read アクセスで成立

ブラウザ → localhost:5173 (Vite)
  ├── API リクエスト → VITE_GEONICDB_URL (GeonicDB エンドポイント)
  └── 地図タイル → Geolonia Maps (VITE_GEOLONIA_API_KEY)

より詳しい解説（匿名 read で成立する理由・データの入れ方・カスタマイズ観点）は docs/architecture.md を参照してください。アプリ内の「このデモについて」リンクからも同じ内容を読めます。

src/
├── main.tsx                      # エントリポイント
├── App.tsx                       # メインコンポーネント（施設一覧＋地図）
├── App.css                       # スタイル
├── geolonia-embed.d.ts           # @geolonia/embed 型定義オーバーライド
├── components/
│   ├── layout/
│   │   └── MapSidebarLayout.tsx  # リスト⇔地図の左右分割レイアウト
│   ├── map/
│   │   ├── GeonicDbMap.tsx       # Geolonia Maps ラッパー
│   │   └── FacilityMapView.tsx   # 施設ピン地図ビュー
│   ├── public-facility/
│   │   ├── FacilityCard.tsx      # 施設カード
│   │   ├── FacilityList.tsx      # 施設一覧
│   │   ├── FacilityDetail.tsx    # 施設詳細パネル
│   │   └── SpriteIcon.tsx        # スプライトアイコン
│   ├── about/                    # このデモ専用の解説ページ（削除可・後述）
│   └── Attribution.tsx           # データ出典表示
├── hooks/
│   └── useFacilities.ts          # GeonicDB から施設データ取得（SDK）
├── lib/
│   ├── ngsi.ts                   # NGSIv2 API ユーティリティ
│   └── geo-types.ts              # 地理型定義
└── types/
    └── public-facility.ts        # 公共施設エンティティ型
scripts/
├── seed.ts                       # データ投入 CLI エントリポイント
├── seed-lib.ts                   # CSV パース・エンティティ変換ロジック
└── data/                         # 同梱の板橋区公共施設データ（CC BY 4.0）

npm run build

dist/ に静的ファイルが出力されます。

npm test

W2/W3 用の切り出し手順・トラブルシューティングは docs/playbook.md を参照してください。

「このデモについて」解説ページ（src/components/about/）はこのサンプル専用の機能です。フォークして自団体向けに仕立てる際は不要であれば削除してください。

1. src/components/about/ ディレクトリを削除する。
2. src/App.tsx から AboutPage の import・view state・view === 'about' の分岐・「このデモについて」ボタンを削除する（// DEMO-ONLY / /* DEMO-ONLY START */ 〜 /* DEMO-ONLY END */ コメントで挟まれた箇所。grep -rn "DEMO-ONLY" src/ で一覧できる）。
3. src/App.css の DEMO-ONLY START 〜 DEMO-ONLY END ブロック（.about-link / .about-page 関連スタイル）を削除する。
4. （任意）docs/architecture.md を削除する。

• データ: 板橋区 公共施設一覧（デジタル庁 自治体標準オープンデータセット） — CC BY 4.0
• コード: MIT