すみません、1日遅れのMaplat Advent Calendar 19日目投稿です。
今日は、昨日マッピングした地図をMaplat Coreに取り込んでみます。
久々にCodeSandboxの登場です。動くものはこちらです。=> CodeSandBox Maplat Advent Calendar day 19
今日の作業に移る前に、もう一度だけMaplatEditorを立ち上げましょう。
その上で、地図編集画面に移り、「メタデータ」タブの下の方、「地図タイルURL」の設定に、https://t.tilemap.jp/maplat/tiles/tomowarkar_map/{x}/{y}/{z}.pngというURLを入力してください。
そして、セーブします。
これで追加作業は終了です。
これは何をやったかというと、この地図設定で使う地図の画像ファイルを上記URLから取得する、という定義を行っています。
Maplatは外部URLからでなくても、サイトのローカルからでも地図の画像ファイルを取得できるので、今回は地図の画像ファイルをCodeSandboxにアップロードして動作させるつもりでいたのですが、CodeSandboxの方が、このローカルから画像を読み込ませる方式だと必須である「0」という名前のフォルダを作ることができなかったので、急遽外部URLの指定にした形です。
さて、それではマッピングした地図を動作させてみます。
MaplatEditorのデータ保存領域である、[OSのドキュメントフォルダ]/MaplatEditorのフォルダを開いてみましょう。
maps、compiled、originals、tilesの4つのフォルダがあり、それぞれの下に設定ファイルや画像フォルダができています。
このうち、今回使うのはcompiled/tomowarkar_map.jsonの設定ファイルです1。
これを、CodeSandbox側のmaps/tomowarkar_map.jsonとしてアップロードします。
あ、そうそう、今日のソースコードのベースは5日目のものを使います。
上記のようにアップロードします。
その上で、設定ファイルやJavascriptファイルを次のように修正します。
{
"home_position": [135.0, 35.0],
"default_zoom": 10,
"start_from": "tomowarkar_map",
"sources": [
{
"mapID": "tomowarkar_map"
},
"osm"
]
}
これは、地図のデータソースをこれまでの既製の地図設定ファイルから、MaplatEditorで作成した地図設定を読むように変更しているだけですね。
これまでは設定されていたsetting_fileという設定がなくなっていますが、これは地図の設定ファイルをローカルから読み込んでいるためです。
setting_file設定がないと、Maplat Coreは地図設定を./maps/[地図ID],jsonから読み込もうとします。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maplat Advent Calendar Day19</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="mainview">
<div id="map_div"></div>
</div>
<div class="button">
<button id="osm">OSM</button>
<button id="tom">マップ</button>
</div>
</body>
<script src="app.js"></script>
</html>
import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";
var option = {
appid: "maplat_ac_day19"
};
var app = new MaplatApp(option);
app.waitReady.then(function() {
document.getElementById("osm").addEventListener("click", function(e) {
app.changeMap("osm");
});
document.getElementById("tom").addEventListener("click", function(e) {
app.changeMap("tomowarkar_map");
});
});
以上の設定を行ってアプリを起動させると、以下のような感じになります。
ちゃんと、でたらめな地図なのに、当初設定した日本、南米、ハワイなどの設定した場所と連動して動いているのがわかります。
このように、でたらめな地図に対してでも対応づけした場所と連動して動くように設定することができるので、歪んだ古地図や絵地図でも、対応した現代地図と連動して動くようにできるライブラリがMaplat、ということになります。
余談ですが、今回CodeSandboxの仕様上の問題で、地図画像を外部から読み込むようにしましたが、もしローカルから地図画像を読み込ませたい場合、[OSのドキュメントフォルダ]/MaplatEditor/tiles/tomowarkar_mapのフォルダを、Webサイトのtiles/tomowarkar_mapフォルダとしてアップロードすれば、動作します。
ただしその際は、地図データの設定で、地図タイルURLの設定を空にしておかないといけません。
さて、明日20日目（というか実際には今日ですが）の話題は何にしよう...いよいよ、UI付きのMaplat、Maplat UIを説明するしかないかな...？
-
maps/tomowarkar_map.jsonのファイルでも動作するのですが、これはMaplatの起動時に地図設定の解釈プロセスが走るので、起動が若干遅くなります。 ↩