Maplat CoreでAPIから地図表示を切り替える #GIS

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経由での地図切り替えが実現されます。

ちょっと、アプリっぽくなってきましたね！

明日は、いよいよマーカーでも表示させてみたいと思います。