GeonicDB SDK を使った Vite ベースの Web アプリケーションのサンプルです。 GeonicDB に保存されたエンティティを地図上にリアルタイム表示します。
| 機能 | 説明 | 関連ファイル |
|---|---|---|
| Bearer JWT 認証 | メール + パスワードでログインし、トークンの自動リフレッシュでセッションを維持 | main.js |
| NGSI-LD エンティティ API | エンティティの一覧取得、タイプ一覧の取得（/types）、システム属性（sysAttrs）、offset ベースのページネーション |
app.js |
| NGSI-LD Temporal API | エンティティの属性値の時系列データを取得し、スパークラインで可視化 | app.js |
| WebSocket リアルタイム通知 | エンティティの作成・更新イベントをリアルタイムに受信して地図とフィードに反映 | app.js |
| SDK（npm パッケージ） | @geolonia/geonicdb-sdk として npm からインストール |
main.js, auth.js |
index.html HTML マークアップ
src/
main.js エントリポイント（SDK ロード・認証フロー）
auth.js 認証情報の永続化（localStorage ヘルパー・SDK ローダー）
app.js SDK 呼び出しのオーケストレーション（データ取得・ページネーション・WebSocket・エラー処理）
map.js 地図の初期化・レイヤー描画・ポップアップ・コンパスボタン
feed.js サイドパネルのライブフィード（無限スクロール）
entity.js NGSI-LD エンティティのユーティリティ関数
sparkline.js SVG スパークライン生成
style.css スタイル
style.json 地図スタイル（GSI ベースのダークグレーモノクロ）
vite.config.js Vite 設定
.env.example 環境変数のテンプレート
main.js と app.js を読んでください。SDK の API（db.login(), db.request(), db.subscribe() など）がラッパーなしで直接呼び出されています。
npm installcp .env.example .env.env を編集して GeonicDB サーバーの URL を設定します:
VITE_GEONICDB_URL=https://geonicdb.geolonia.com
VITE_GEOLONIA_API_KEY=YOUR-API-KEY # Geolonia Maps の API キー（任意）npm run devブラウザでログイン画面が表示されます。GeonicDB のメールアドレスとパスワードを入力してログインしてください。マルチテナント環境の場合はテナント名も入力します。
GeonicDB CLI を使って、location（GeoProperty）を持つエンティティを作成すると地図上に表示されます。
geonic entities create '{
"id": "urn:ngsi-ld:Sensor:example-001",
"type": "Sensor",
"name": { "type": "Property", "value": "温度センサー A" },
"temperature": { "type": "Property", "value": 22.5, "unitCode": "CEL" },
"location": {
"type": "GeoProperty",
"value": { "type": "Point", "coordinates": [139.7671, 35.6812] }
}
}'npm run build # dist/ にプロダクションビルドを出力
npm run preview # ビルド結果のプレビュー| 変数名 | 必須 | 説明 |
|---|---|---|
VITE_GEONICDB_URL |
Yes | GeonicDB サーバーの URL |
VITE_GEOLONIA_API_KEY |
No | Geolonia Maps の API キー |
- リポジトリを GitHub にプッシュし、Vercel にインポート
- 環境変数を設定
- デプロイ（Vite が自動検出されます）
- ログイン画面でメールアドレス・パスワード（・テナント名）を入力
- エンティティタイプを選択して「Open」
- 地図上のマーカーをクリックするとプロパティ詳細をポップアップ表示
- 左側のサイドバーをクリック（またはキーボード操作）するとエンティティにフォーカス
- サイドバーを下にスクロールすると、次のページが自動的に読み込まれ、地図にも追加表示される（無限スクロール）
- WebSocket 接続中はリアルタイムでエンティティの追加・更新が反映
- 時系列データがある場合はスパークラインチャートで自動表示
- 地図を回転させるとコンパスボタンが表示され、タップで北向きに戻る
MIT