LoginSignup
1

More than 3 years have passed since last update.

Maplat UI(UIあり版)をCDNから設定

Last updated at Posted at 2019-12-21

さて、相変わらず1日遅れのMaplat Advent Calendarですが、20日目はいよいよ、UI付きのMaplatを設定してみましょう。
動くものはこちらになります。 => CodeSandBox Maplat Advent Calendar day 20

UI付きMaplat設定の初日は、CDN経由で設定する方法ですが、これも結局、Maplat Coreの時と同様、CDN経由で指定すると言いながら、パッケージに同梱し切れていないだけにローカルに配置しないといけないファイルがたくさんあります。
しかもUI版の場合、使い方のヘルプに含まれる画面キャプチャ画像などもあるので、結構な数のローカルファイルを配置しないといけません。
こちらのリンクからダウンロードできる、distribution.zipというzipファイルを解凍し、その中にあるpartslocalesfontsというフォルダを、index.htmlと同じ階層に配置します1
スクリーンショット 2019-12-21 19.59.29.png
上記のように、partslocalesfontsを配置します。tmbsについては後で説明します。

その上で、index.htmlapp.jsapp.css及びMaplat設定ファイルを以下のように設定します。

index.html
<!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.csshttps://unpkg.com/@maplat/ui@0.6.4/dist/maplat.jsになります。

app.js
var option = {
  appid: "maplat_ac_day20"
};

Maplat.createObject(option).then(function(app) {});

Maplat Coreと同様、Maplat UIでもMaplat.createObjectPromiseを受け取ります。

app.cs
.mainview {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
}

特に問題なし。

maplat_ac_day20.json
{
  "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の上にラベルとして表示する文字を指定します。
スクリーンショット 2019-12-21 20.01.31.png
このUIで、サムネイルの上に表示されているラベルをlabel属性で指定します。
また、app_nameは、スプラッシュスクリーンに表示されるアプリ名に使われます。

さて、これだけ設定すれば動くはず...だといいのですが、実はまだ配置しないといけないファイルがあります。
それは、上記の地図のセレクタUIのサムネイルとして表示する画像です。
これは、tmbsフォルダの下に、tmbs/[地図ID]_menu.pngと言う名前で設定したファイルが読み込まれることになっています。
間抜けなことに、このサムネイルファイルは、地図設定はライブラリに標準同梱されているosmgsigsi_orthoなどに対しても、同梱する形では一切用意されていないので、利用者がそれらの標準地図に対するサムネイルも用意してtmbs下に配置してやる必要があります。
この辺も近い将来、最低限ライブラリ標準の地図設定に内応するものだけでもなんとかしたいですが、今のところは自前で用意してください。
以下に、ライブラリ標準の地図設定に対応するサムネイルを一応置いておきます。

tmbs/osm_menu.png
osm_menu.jpg
tmbs/gsi_menu.png
gsi_menu.jpg
tmbs/gsi_ortho_menu.png
gsi_ortho_menu.jpg
サムネイルの仕様は、長辺52ピクセルのPNGファイルなので、ご自分の地図を用いられる場合はそれに合わせたものを配置してください。

ここまで設定してやれば、UI付きMaplatが動作します。

UI付きMaplat動作

UIそのものの使い方は、UI左下の「?」マークボタンを押せば、ヘルプが出るのでそちらを参考にしてください。
スクリーンショット 2019-12-21 20.21.54.png

21日目は、Maplat Coreの時と同様、npm経由で設定する方法を書きます。


  1. CodeSandboxに設置する際には、localesの下のファイルはアップロードではなく、新規ファイルを作って中身をコピーしてください。
    CodeSandboxのアップロード機能には問題があるようで、アップロード経由だとマルチバイト文字が文字化けしてしまいます。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1