Maplat CoreでTMS/WMTS地図をオーバーレイとして追加する

Maplat Advent Calendar 15日目は、Maplat Coreで昨日と同様TMS/WMTS地図を追加しますが、ベース地図としてではなく、オーバーレイできる地図として追加してみます。
今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 15

今日のプログラムは昨日のプログラムをベースに改造されています。
追加したのは農研機構の迅速地図になっています。

maplat_ac_day15.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",
    {
      "mapID": "ort",
      "maptype": "base",
      "url": "https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg",
      "maxZoom": 18
    },
    {
      "mapID": "rap",
      "maptype": "overlay",
      "url": "https://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.jpg",
      "maxZoom": 17,
      "envelopLngLats": [
        [139.454802, 36.209997],
        [139.63024, 36.209997],
        [139.63024, 36.283371],
        [139.454802, 36.283371]
      ]
    }
  ]
}

追加されたのはこの部分です。

maplat_ac_day15.json(追加分抜粋)

    {
      "mapID": "rap",
      "maptype": "overlay",
      "url": "https://www.finds.jp/ws/tmc/1.0.0/Kanto_Rapid-900913-L/{z}/{x}/{y}.jpg",
      "maxZoom": 17,
      "envelopLngLats": [
        [139.454802, 36.209997],
        [139.63024, 36.209997],
        [139.63024, 36.283371],
        [139.454802, 36.283371]
      ]
    }

これは、TMSまたはWMTS形式の地図を、オーバレイする地図として新たに追加する際の設定です。
mapIDは地図を切り替える一意なIDを指定します。
maptypeは、TMSまたはWMTS形式のオーバレイ地図を追加する場合、overlayを指定します。
urlはTMSまたはWMTS形式のタイル地図URLを指定します。
maxzoomは、地図の最大ズームを指定します。
envelopLngLatsは、地図の提供範囲を指定します。これを指定すると、地図タイルのあるなしにかかわらず、この地図の表示中に視点が領域外に移動すると、領域内に引き戻されます。

他にも、単に上記追加地図に切り替えるボタンを追加するためだけですが、htmlとJavascriptも以下のように変更します。

index.html(変更部抜粋)

      <button id="rap">迅速</button>

app.js(変更部抜粋)

  document.getElementById("rap").addEventListener("click", function(e) {
    app.changeMap("rap");
  });

これで、以下のような動作になります。

明日はいよいよ、古地図などをオーバーレイ地図として追加する場合を説明しますが...そうなるとMaplatEditorの使い方に触れないといけないので、面倒くさいなあ...