Maplat Coreの設定を設定ファイルから行う

Maplat Advent Calendar 4日目は、Maplat Coreの設定を設定ファイルに外出しする方法です。

昨日まではMaplatアプリの動作設定を、コードの中に書き込んで動かしていました。
具体的には、optionオブジェクトの中のsetting属性の下に、動作設定を書いていた形です。
ですが、これだとアプリの構成に変更があるたびごとに、JSコードファイルを修正しないといけなくなるので、嫌な感じですよね。
できれば設定は設定ファイルとして外出ししたいので、その方法について解説します。

今日の内容が動くバージョンは、CodeSandBoxのこちらで公開されています。 => CodeSandBox Maplat Advent Calendar day 4

設定を外出ししたロジックは以下のような感じになります。

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day4"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  console.log("Maplat App Ready");
});

単純にsettingを全部無くしただけですね。
optionはappidの指定だけになり、とてもシンプルになりました。
しかし、設定ファイルの読み込み元らしきものは指定されていません。
どこから読み込むのでしょうか。

答えは、index.htmlと同じ階層に配置されたappsという名前のフォルダに、{appid}.jsonという名前のファイルを探しにいき、その内容を設定ファイルとして読み込みます。
ここではappidはmaplat_ac_day4ですので、apps/maplat_ac_day4.jsonを探しに行くということです。
その中身は次のようになります。

apps/maplat_ac_day4.json

{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file":
        "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ]
}

純粋に、昨日までJSファイルに書かれていたsettingの内容が書かれているだけですね。
ただし、JSONファイルとして読み込むので、JSONの書式を満たしていないといけないので（ハッシュキーの値を""で囲むなど）、その点だけ気をつけて。
すると、昨日までの例と同様、普通に動作します。
動作内容は同じなので、画面キャプチャなどは省略します。

以上のような方法で、Maplatアプリの動作設定をJSコードの外に設定ファイル化することができました。
残念ながら今対応しているのはapps/{appid}.jsonを見に行く形だけで、URLを指定して遠隔の設定ファイルを取りに行くと言ったようなことは現状できません。
この辺はおいおい対応していきたいと思います。

明日は地図の枚数を2枚増やし、いよいよAPIを使って、地図表示の切り替え方法などを述べたいと思います。