Skip to content

How to set up Maplat Application

Jump to bottom
OHTSUKA Ko-hei edited this page Aug 21, 2018 · 10 revisions

本ページでは、Maplatのアプリをセットアップする方法を記述します。
このドキュメントはMaplatのバージョン0.2.6、およびMaplatEditorのバージョン0.1.1を元に記述しています。
それ以降のバージョンの場合、ドキュメントの更新が追いついておらず細かな差異が存在する可能性がありますので、うまく動かない場合はIssuesページにてお問い合わせください。
また、MaplatEditorでの地図定義作業については理解されているもの、および地図はマッピング済みとの前提で説明いたします。

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

まず、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でのサムネイルを、ファイル名を地図ID_menu.jpgとして配置します。MaplatEditorでは自動生成しないので、手作業で長辺52pxの画像を作ります。)

3. MaplatEditor地図作成後、Maplatアプリ公開までに行うべきこと

つまり基本的には、MaplatEditorで地図を編集後の作業は以下の通りになります。

  • サンプルのmapsフォルダの中のjsonファイルを削除し、MaplatEditorの生成したcompiledフォルダ下のjsonファイルのうち、組み込みたい地図IDのjsonファイルを配置する。
  • サンプルのtilesフォルダ下の地図タイルフォルダを削除し、MaplatEditorの生成したtilesフォルダ下の地図タイルフォルダのうち、組み込みたい地図IDの地図タイルフォルダを配置する。
  • サンプルのtmbsフォルダ下のjpgファイルを、gsi_menu.jpgとosm_menu.jpgを除いて削除し、手作業生成した各地図ID用のサムネイル画像を配置する。
  • 次項の説明に従い、apps/sample.jsonの中身を、導入したい地図IDに合わせて書き換える
  • サンプルのimgフォルダ下の画像ファイルを削除する。apps/sample.jsonの中でPOIの設定を行なった場合は、そのPOIで使われている画像ファイルをimgフォルダの中に置く。

次項で、apps/sample.jsonの設定方法概略を説明します。

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,
            "start" : 1598,
            "desc" : "南部（盛岡）藩南部氏の居城である。西部を流れる北上川と南東部を流れる中津川の合流地、現在の盛岡市中心部にあった花崗岩丘陵に築城された連郭式平山城。",
            "image" : "moriokajo.jpg"
        },
        ... 以下、POIの設定が続く ...
    ]
}

この内容を自分のアプリの内容に合わせて変更する事で、アプリを定義できます。
sample.jsonの定義はこちらのページを確認してください。
主に変えるべきところは、

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

になります。

5. アプリの動作指定

前項までの設定で、アプリが動作するようになります。
動作の際のクエリストリングの指定で、いくつかの動作を制御できます。
例えば動作しているURLをhttp://localhost/とすると、

http://localhost/?appid=hoge

上記のようにすると、アプリの設定ファイルとしてsample.jsonではなくhoge.jsonを読み込むようになります。
同じURLでいくつかのアプリを切り替えたい場合に使えます。

http://localhost/?lang=en

上記のようにすると、英語版として動作します。
基本的に言語指定は、ブラウザなどの設定を読み込んで勝手に動作を変更しますので、あえて動作言語を変えたい場合にこれを利用します。
たとえば英語環境で日本語として動作させたい場合は、lang=jaを指定します。
英語、日本語以外にも動作としては対応していますが、他言語のUIリソースが用意されていないため、他言語は英語を代替として動作します。

http://localhost/?overlay=true

上記のようにすると、標準地図の上に古地図絵地図がオーバーレイ表示されて動作します。

このようにクエリにより動作を制御することができますが、クエリで指定しなくとも指定したのと同じ動作をさせたい場合は、index.htmlの中身を書き換えます。
index.htmlの中に以下のような記述の部分がありますが、

    var option = {};

ここを、上記のような設定を取り込むような形でJSON指定してやると、

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

クエリ指定しなくとも指定と同じ動作をします。

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

アプリ設定のsample.jsonに設定できる項目にはその他にも様々な設定があります。
例として、

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

等の様々な機能があります。

アプリ設定ファイルのサンプルとして、ぷらっと館林の設定ファイル、ぷらっと奈良の設定ファイル、ぷらっと会津若松の設定ファイル等があるので、これらを参考に試してみてください。

Clone this wiki locally