Maplat Advent Calendar 5日目は、Maplat CoreでAPIから地図表示を切り替える方法です。
今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 5
まずは、地図を切り替えるボタンを追加するために、htmlとcssに少し手を入れましょう。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maplat Advent Calendar Day5</title>
<link rel="stylesheet" href="app.css" />
</head>
<body>
<div class="mainview">
<div id="map_div"></div>
</div>
<div class="button">
<button id="gsi">GSI</button>
<button id="osm">OSM</button>
<button id="ojo">御城図</button>
<button id="aki">秋元</button>
</div>
</body>
<script src="app.js"></script>
</html>
app.css
.mainview {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
}
.button {
position: absolute;
top: 95%;
bottom: 0%;
left: 5%;
right: 5%;
}
うーん、「私はcss苦手でござい」というのがひしひしと伝わるcssですね。
やってることは、地図領域の真下にボタン4つ並べているだけです。
続いて、せっかく地図を切り替えるのですから、地図の数も少し増やして、2つから4つにしてみましょう。
apps/maplat_ac_day5.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"
},
{
"mapID": "tatebayashi_castle_akimoto",
"setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_castle_akimoto.json"
},
"osm",
"gsi"
]
}
ご覧の通り、tatebayashi_castle_akimotoとgsiの2つの地図設定がsourcesに追加されています。
tatebayashi_castle_akimotoは、ぷらっと館林でやはり定義されている、秋元家支配時代の館林城の絵図です。
今日もやはり、地図自体の設定ファイルの詳細説明は後日に回します。
gsiは、osm同様設定がプリセットされているベース地図で、地理院地図を表しています。
この4つの地図の間で、表示を切り替えてみましょう。
Javascriptロジックはこのような感じになります。
app.js
import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";
var option = {
appid: "maplat_ac_day5"
};
var app = new MaplatApp(option);
app.waitReady.then(function() {
document.getElementById("gsi").addEventListener("click", function(e) {
app.changeMap("gsi");
});
document.getElementById("osm").addEventListener("click", function(e) {
app.changeMap("osm");
});
document.getElementById("ojo").addEventListener("click", function(e) {
app.changeMap("tatebayashi_ojozu");
});
document.getElementById("aki").addEventListener("click", function(e) {
app.changeMap("tatebayashi_castle_akimoto");
});
});
app.waitReadyでMaplatアプリが動作レディになるのを待った後、各ボタンにclickイベントハンドラが与えられ、そのコールバックの中でapp.changeMap({mapid});のAPIが呼ばれています。
これにより、以下のように API経由での地図切り替えが実現されます。
ちょっと、アプリっぽくなってきましたね！
明日は、いよいよマーカーでも表示させてみたいと思います。