API Reference.ja
MaplatUi API の概念と利用パターン。本ページは リリース非依存 の解説材料
（ADR-0012）に焦点を当てます。完全かつ最新の API シグネチャ一覧は
リポジトリ内の docs/api/ を参照してください。
MaplatUi は Maplat を Web アプリケーションに組み込むためのメインクラスです。 ライフサイクルは3つのフェーズからなります:
-
初期化 —
MaplatUi.createObject(option)は Promise を返し、 地図データの読み込みと変換の準備が完了すると resolve します。 インスタンス作成の推奨方法です。 -
実行中 — インスタンスはインタラクティブです: 地図切替・オーバーレイ切替・
POI 表示等。
updateUrl()で URL に状態を反映できます。 -
破棄 —
remove()がアプリケーションを破棄し、リソース （イベントリスナ・DOM 要素・タイルキャッシュ）を解放します。
なぜ Promise か? Maplat は地図定義 JSON の読み込み、TIN 変換の計算 （またはコンパイル済データの読み込み）、OpenLayers 地図の初期化を完了してから 利用可能になります。Promise はこれら全てが完了した後に resolve します。
createObject またはコンストラクタに渡す option オブジェクトのプロパティは
いくつかのカテゴリに分かれます:
| カテゴリ | 主なプロパティ | 目的 |
|---|---|---|
| アプリ識別 | appid |
読み込むアプリ JSON を特定 |
| マップソース | （アプリ JSON で定義・option ではない） | 表示する地図・ベースレイヤ・オーバーレイ |
| UI 挙動 |
overlay, enableHideMarker, enableMarkerList, enableBorder, enableShare
|
UI 機能の切替 |
| URL 状態 | stateUrl |
地図状態（中心・ズーム・選択地図）の URL への反映 |
| PWA |
pwaManifest, pwaWorker
|
Progressive Web App 設定 |
| 外部トークン | mapboxToken |
サードパーティタイルサービスのアクセストークン |
option オブジェクトは 実時挙動 を制御します。地図・アプリデータ （どの地図・POI・スタイルか）はアプリ JSON ファイルで定義され、option では ありません。データ形式の詳細は Concepts を参照してください。
バンドラなしで素早く組み込む場合、CDN から OpenLayers と Maplat UI を読み込みます。 OpenLayers を 先に 読み込む必要があります。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10/ol.min.css">
<script src="https://cdn.jsdelivr.net/npm/ol@10/dist/ol.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@maplat/ui@0.12.2/dist/maplat_ui.css">
<script src="https://cdn.jsdelivr.net/npm/@maplat/ui@0.12.2/dist/maplat_ui.umd.js"></script>
<div id="map_div"></div>
<script>
MaplatUi.createObject({ appid: "myApp" }).then(function(app) {
console.log("Maplat initialized");
});
</script>モダンバンドラベースのプロジェクトでは、ES モジュールとしてインポートします。
import { MaplatUi } from '@maplat/ui';
import '@maplat/ui/dist/maplat_ui.css';
MaplatUi.createObject({ appid: 'myApp' }).then(app => {
// Application initialized
});peer dependency: ol（OpenLayers）v9 または v10 を別途インストール必要。
フレームワーク（React・Vue 等）に組み込む場合、コンポーネントの マウント/アンマウントフックでライフサイクルを管理します:
// 疑似コード
onMount: MaplatUi.createObject(option).then(app => { this.app = app; })
onUnmount: this.app.remove();同一 DOM 要素に複数の MaplatUi インスタンスを作成しないでください。 新しいインスタンスを作る前に古いインスタンスを破棄してください。
完全な API シグネチャ一覧（static メソッド・コンストラクタ・インスタンスメソッド・
MaplatAppOption プロパティ表）はリポジトリ内の
docs/api/ で管理されています。
本 Wiki ページではシグネチャを 重複保持しません（正本との乖離を防ぐため）。
参照:
-
docs/api/— 正本の API シグネチャ - README §API Documentation — 概要とクイックリファレンス
- 🇬🇧 English (Home)
- 🇯🇵 日本語 (Home.ja)
English
日本語
- 📄 README / README.ja
- 🗺️ Ecosystem Map（現在外部非公開）
- 🌐 Product site / 製品サイト
- 🏢 Nayuta, Inc. / コーポレートサイト