それでは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
<!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になります。
.mainview {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}
ページcssの中身は特に意味はありません。
何日か後の記事でAPI制御のためのボタンなどを配置する場所として、地図の周りに隙間を空けているだけです。
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で指定されているファイルの中身までは言及しませんが、ぷらっと館林の中の地図である、綱吉城主時代の館林御城図の地図定義を読み込んでいます。
二つ目の地図は、mapIDだけがosmとして指定されていますが、これは地図定義がライブラリ内で事前準備されているショートカットであり、ベース地図に関していくつか準備されていて、他にgsi（地理院地図）、gsi_ortho（地理院オルソ航空写真）などがあります。
さて、このようにoption変数が設定できれば、後はMaplatのオブジェクトを作るだけです。
Maplat.createObjectを、optionを引数にして実行すれば、Promiseが返るので、それをthenあるいはawaitなどで受ければ、Maplat Coreのオブジェクトが返ります。
すると以下のようにMaplatの表示がイニシャライズされ、
マウスのドラッグやホイール操作で、地図が操作できるようになります。
あとはこのappオブジェクトのイベントやメソッドを使えば、Maplatが操作できます。
以上でちゃんと動作します...だととっても綺麗なのですが！
残念ながら、あと少し作業が必要です。
記事の冒頭で書いた、APIに必要な画像リソースなどが配置されていないからです。
配置すべき画像リソースは、Maplatのgithubで、こちらのリンクからダウンロードできる、distribution.zipというzipファイルを解凍し、その中にあるpartsというフォルダを、index.htmlと同じ階層に配置します。
すると、正しくMaplat Coreが表示されるようになります。
とりあえず、今日のところはこんな感じのところまで。
3日目は、npm経由でMaplat Coreを利用する方法を書きます。