Tutorials.ja

Tutorials（日本語）

Maplat アプリのセットアップとデプロイの手順ガイドです。

注記（2026-07）: このページは Maplat 0.2.6 時代（2018年8月）の記述をベースにしています。 現在（0.12.2）とはアプリ構造・配布形態が大きく異なります（ESM / CDN / npm パッケージ @maplat/ui）。最新のクイックスタートは README を参照してください。

目次

• 1. サンプルパッケージのダウンロード
• 2. サンプルパッケージの中身の確認
• 3. MaplatEditorで地図作成後の作業
• 4. apps/sample.json の設定
• 5. クエリストリングによる動作制御
• 6. その他の設定サンプル
• 関連ページ

---

1. サンプルパッケージのダウンロード

まず、Maplat のサンプルパッケージを こちらのリンク からダウンロードしてください。zip ファイルなので解凍してください。 解凍内容を Web サーバ上に配置し、index.html にアクセスするだけで、 盛岡の古地図2枚を含んだサンプル Maplat が動作します。

モダンブラウザのファイルアクセスセキュリティ設定の関係上、Maplat は ローカルフォルダからの実行はできません。必ず Web サーバに配置してください。

サンプルが動作するのを確認したら、次の手順に移ってください。

2. サンプルパッケージの中身の確認

サンプルパッケージの中身は概ね以下のような構成になっています:

├apps
│  └sample.json
├dist
│  └いくつかのjs/cssファイル
├fonts
│  └いくつかのフォントファイル
├img
│  └いくつかの画像ファイル
├index.html
├locales
│  └いくつかの多言語化用ファイル/フォルダ
├maps
│  └いくつかの地図定義json
├parts
│  └いくつかのUIパーツ用画像
├tiles
│  └いくつかの地図タイルフォルダ
└tmbs
   └いくつかの地図選択UI用サムネイルファイル

変更する必要のないファイル/フォルダ:

• dist フォルダ
• fonts フォルダ
• index.html（ただし apps/sample.json の名前を変えたい等カスタマイズする際は内容変更要）
• locales フォルダ
• parts フォルダ
• tmbs/gsi_menu.jpg, tmbs/osm_menu.jpg

内容を修正しないといけないファイル:

• apps/sample.json

中身のファイルを差し替えないといけないフォルダ:

• img — apps/sample.json で定義した POI で画像を使う場合、その画像を配置
• maps — MaplatEditor で作成した compiled フォルダ下の地図定義 JSON を配置
• tiles — MaplatEditor で作成した tiles フォルダ下の地図タイルフォルダを配置
• tmbs — 地図選択 UI 用サムネイル（ファイル名 {mapID}_menu.jpg・長辺52px・手作業生成）

3. MaplatEditorで地図作成後の作業

MaplatEditor で地図を編集後の作業は以下の通りです:

1. サンプルの maps フォルダの中の JSON ファイルを削除し、MaplatEditor の生成した compiled フォルダ下の JSON ファイルのうち組み込みたい地図 ID のものを配置する。
2. サンプルの tiles 下の地図タイルフォルダを削除し、MaplatEditor の生成した tiles フォルダ下のうち組み込みたい地図 ID のものを配置する。
3. サンプルの tmbs 下の JPG ファイルを gsi_menu.jpg と osm_menu.jpg を除いて削除し、手作業生成した各地図 ID 用のサムネイル画像を配置する。
4. 次項の説明に従い apps/sample.json の中身を書き換える。
5. サンプルの img 下の画像ファイルを削除し、apps/sample.json で POI に使う画像を配置する。

4. apps/sample.json の設定

apps/sample.json の中身は以下のようになっています:

{
    "app_name" : {
        "ja" : "盛岡市古地図アプリ",
        "en" : "Historical Map Application of Morioka"
    },
    "lang" : "ja",
    "fake_gps" : true,
    "fake_center" : {
        "ja" : "盛岡市",
        "en" : "Morioka"
    },
    "fake_radius" : 10,
    "home_position" : [141.149989, 39.699952],
    "default_zoom" : 17,
    "sources" : [
        { "mapID" : "morioka_ndl" },
        { "mapID" : "morioka" },
        "gsi",
        "osm"
    ],
    "pois" : [
        {
            "name" : { "ja" : "盛岡城", "en" : "Morioka Castle" },
            "address" : "岩手県盛岡市内丸1-37",
            "lat" : 39.69994722,
            "lng" : 141.1501111,
            "desc" : "南部（盛岡）藩南部氏の居城...",
            "image" : "moriokajo.jpg"
        }
    ]
}

主に変えるべきところ:

• app_name — アプリの名称
• home_position — アプリのスタート時の中心経緯度 [経度, 緯度]
• sources — アプリで使う地図 ID のリスト。"gsi" と "osm" は抜かない事（ショートカット文字列）。その他の地図は { "mapID": "..." } の形で加える。
• pois — 表示する POI の定義。ない場合も "pois": [] として残す。"image" に画像ファイル名を設定した場合は img フォルダ下に配置する。

注記: 上記のフィールド名（app_name, fake_gps, home_position）は 0.2.6 時代の snake_case 形式です。現行版は camelCase （appName, fakeGps, homePosition）を使用します。 現行のデータ形式は Concepts を、 最新の API は README を参照してください。

5. クエリストリングによる動作制御

アプリが http://localhost/ で動作している場合、クエリストリングで動作を制御できます:

クエリ	効果
?appid=hoge	sample.json ではなく hoge.json を読み込む
?lang=en	英語版として動作（通常はブラウザ設定から自動判定）
?overlay=true	古地図を標準地図の上にオーバーレイ表示

index.html の option オブジェクトを書き換えることでデフォルト値を組み込むこともできます:

var option = {
    appid: "hoge",
    lang: "en",
    overlay: true
};

6. その他の設定サンプル

アプリ設定には以下のような様々な機能があります:

• TMS/WMTS で定義された古地図の導入（ベースマップ・オーバーレイ双方として導入可能）
• POI として他の Web サイト（Wikipedia 等）を表示

参考になる設定ファイル:

• ぷらっと館林
• ぷらっと奈良
• ぷらっと会津若松

---

英語版はこちら / Read this page in English

関連ページ

• Home
• Concepts — データ形式の詳細
• API-Reference — API の概念と利用パターン
• README — 最新のクイックスタート