Maplat Core（UIなし版）をCDNから設定

それでは2日目からは、Maplatを実際に設定する方法を書きます。

今日のテーマは

#### Maplat CoreをCDNから設定

Maplat CoreというのはUIがなくAPIで制御するMaplatです。
しかし、Maplat単独でAdvent Calendarあげるとイキったものの、いざ実際にやってみると、他人に使われてないライブラリは穴だらけで恥ずかしくなるな...。
今回はCDNからMaplatのJavascript、cssを指定する方法を記事にしようと思いますが、実際にCDN経由で呼んだ経験がなかったので、やってみると画像パーツなどがCDN経由だと呼び出されないので、画像パーツはローカルに配置しないといけないという事に気付いてしまいました。
これなんとかしないと、CDNだけで完結しない...この辺の気づきもできるなら改善しつつ、約1ヶ月Maplatで走り切りたいと思います。
とりあえず今日のところは、画像パーツはローカルに配置する形で。

今日の内容が動くバージョンは、CodeSandBoxのこちらで公開されています。 => [CodeSandBox Maplat Advent Calendar day 2](https://codesandbox.io/s/maplat-advent-calendar-day2-83pn9)

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Maplat Advent Calendar Day2</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@maplat/core@0.6.2/dist/maplat_core.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/core@0.6.2/dist/maplat_core.js"></script>
  <script src="app.js"></script>
</html>
```
htmlの中身は上記の通りです。
scriptタグとstyleタグで、unpkg.comのCDN経由でMaplat Core 0.6.2のJSとcssを呼び出しています。
それに加えて、独自JS, cssの呼び出しと、Maplat地図の表示領域divとして`id="map_div"`を設定しています。
Maplat地図の表示領域divのidは自由に変えられますが、デフォルトでは`map_div`になります。

```app.css
.mainview {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
}
```
ページcssの中身は特に意味はありません。
何日か後の記事でAPI制御のためのボタンなどを配置する場所として、地図の周りに隙間を空けているだけです。

```app.js
var option = {
  appid: "maplat_ac_day2",
  setting: {
    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"
    ]
  }
};

Maplat.createObject(option).then(function(app) {
  console.log("Maplat App Ready");
});
```
`option`変数に、Maplat呼び出しの設定を指定しています。
`appid`設定は、このMaplatアプリのIDを指定します。
`setting`設定は、アプリの動作設定を指定します。
以下は`setting`設定内について述べますが、`home_position`は現代地図側が表示された際のホームポジションの経緯度、`default_zoom`は現代地図側が表示された際のホームポジションでのズームレベルを設定します。
`start_from`はその後の`sources`でリストされた地図IDのうち、どの地図からスタートするかを設定します（省略すると、`sources`でリストされた地図IDのうち一番最後のものになります）。
`sources`には、このMaplatで表示する地図一覧を配列で設定します。
地図の数はいくつでも設定できますが、最低でも1つの不正確な地図（今回の事例の場合、`tatebayashi_ojozu`）、および最低でも1つの正確な（Webメルカトルの）ベース地図（今回の事例の場合、`osm`）が定義されていることが必要です。

続いて`sources`で指定されている地図定義についてです。
一つ目の地図は、`mapID`が`tatebayashi_ojozu`として定義されていますが、その実体定義が`setting_file`で指定されています。
今日の記事では、`setting_file`で指定されているファイルの中身までは言及しませんが、[ぷらっと館林](https://s.maplat.jp/r/tatebayashimap/)の中の地図である、綱吉城主時代の館林御城図の地図定義を読み込んでいます。
二つ目の地図は、`mapID`だけが`osm`として指定されていますが、これは地図定義がライブラリ内で事前準備されているショートカットであり、ベース地図に関していくつか準備されていて、他に`gsi`（地理院地図）、`gsi_ortho`（地理院オルソ航空写真）などがあります。

さて、このように`option`変数が設定できれば、後はMaplatのオブジェクトを作るだけです。
`Maplat.createObject`を、`option`を引数にして実行すれば、`Promise`が返るので、それを`then`あるいは`await`などで受ければ、Maplat Coreのオブジェクトが返ります。

すると以下のようにMaplatの表示がイニシャライズされ、
![スクリーンショット 2019-12-04 23.05.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10108/ebca4a40-ab8b-16b2-8c9d-e97739b09eb5.png)
マウスのドラッグやホイール操作で、地図が操作できるようになります。
あとはこの`app`オブジェクトのイベントやメソッドを使えば、Maplatが操作できます。

以上でちゃんと動作します...だととっても綺麗なのですが！
残念ながら、あと少し作業が必要です。
記事の冒頭で書いた、APIに必要な画像リソースなどが配置されていないからです。
配置すべき画像リソースは、Maplatのgithubで、[こちらのリンク](https://github.com/code4history/MaplatCore/blob/master/distribution.zip?raw=true)からダウンロードできる、`distribution.zip`というzipファイルを解凍し、その中にある`parts`というフォルダを、`index.html`と同じ階層に配置します。
すると、正しくMaplat Coreが表示されるようになります。

とりあえず、今日のところはこんな感じのところまで。
3日目は、npm経由でMaplat Coreを利用する方法を書きます。