さて、相変わらず1日遅れのMaplat Advent Calendarですが、20日目はいよいよ、UI付きのMaplatを設定してみましょう。
動くものはこちらになります。 => CodeSandBox Maplat Advent Calendar day 20
UI付きMaplat設定の初日は、CDN経由で設定する方法ですが、これも結局、Maplat Coreの時と同様、CDN経由で指定すると言いながら、パッケージに同梱し切れていないだけにローカルに配置しないといけないファイルがたくさんあります。
しかもUI版の場合、使い方のヘルプに含まれる画面キャプチャ画像などもあるので、結構な数のローカルファイルを配置しないといけません。
こちらのリンクからダウンロードできる、distribution.zipというzipファイルを解凍し、その中にあるparts、locales、fontsというフォルダを、index.htmlと同じ階層に配置します1。
上記のように、parts、locales、fontsを配置します。tmbsについては後で説明します。
その上で、index.html、app.js、app.css及びMaplat設定ファイルを以下のように設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maplat Advent Calendar Day 20</title>
<link
rel="stylesheet"
href="https://unpkg.com/@maplat/ui@0.6.4/dist/maplat.css"
/>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="mainview">
<div id="map_div"></div>
</div>
</body>
<script src="https://unpkg.com/@maplat/ui@0.6.4/dist/maplat.js"></script>
<script src="app.js"></script>
</html>
UI付きMaplat、Maplat UIのCDNは、https://unpkg.com/@maplat/ui@0.6.4/dist/maplat.cssとhttps://unpkg.com/@maplat/ui@0.6.4/dist/maplat.jsになります。
var option = {
appid: "maplat_ac_day20"
};
Maplat.createObject(option).then(function(app) {});
Maplat Coreと同様、Maplat UIでもMaplat.createObjectでPromiseを受け取ります。
.mainview {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}
特に問題なし。
{
"app_name": "Maplat Advent Calendar Day20",
"home_position": [139.5321, 36.249302],
"default_zoom": 17,
"start_from": "tatebayashi_ojozu",
"sources": [
{
"mapID": "tatebayashi_ojozu",
"label": "綱吉時代",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
},
{
"mapID": "tatebayashi_castle_akimoto",
"label": "秋元時代",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_castle_akimoto.json"
},
"osm",
"gsi"
]
}
設定はMaplat Coreとあまり変わりませんが、特記すべきは個々の古地図の設定にlabelという設定があること。
これは、地図のセレクタUIの上にラベルとして表示する文字を指定します。
このUIで、サムネイルの上に表示されているラベルをlabel属性で指定します。
また、app_nameは、スプラッシュスクリーンに表示されるアプリ名に使われます。
さて、これだけ設定すれば動くはず...だといいのですが、実はまだ配置しないといけないファイルがあります。
それは、上記の地図のセレクタUIのサムネイルとして表示する画像です。
これは、tmbsフォルダの下に、tmbs/[地図ID]_menu.pngと言う名前で設定したファイルが読み込まれることになっています。
間抜けなことに、このサムネイルファイルは、地図設定はライブラリに標準同梱されているosm、gsi、gsi_orthoなどに対しても、同梱する形では一切用意されていないので、利用者がそれらの標準地図に対するサムネイルも用意してtmbs下に配置してやる必要があります。
この辺も近い将来、最低限ライブラリ標準の地図設定に内応するものだけでもなんとかしたいですが、今のところは自前で用意してください。
以下に、ライブラリ標準の地図設定に対応するサムネイルを一応置いておきます。
tmbs/osm_menu.png
tmbs/gsi_menu.png
tmbs/gsi_ortho_menu.png
サムネイルの仕様は、長辺52ピクセルのPNGファイルなので、ご自分の地図を用いられる場合はそれに合わせたものを配置してください。
ここまで設定してやれば、UI付きMaplatが動作します。
UIそのものの使い方は、UI左下の「？」マークボタンを押せば、ヘルプが出るのでそちらを参考にしてください。
21日目は、Maplat Coreの時と同様、npm経由で設定する方法を書きます。
-
CodeSandboxに設置する際には、
localesの下のファイルはアップロードではなく、新規ファイルを作って中身をコピーしてください。
CodeSandboxのアップロード機能には問題があるようで、アップロード経由だとマルチバイト文字が文字化けしてしまいます。 ↩