Maplat Core에서 기본지도 추가

Maplat Advent Calendar 14일째에는 Maplat Core에서 사전 설치된 기본 지도 이외의 기본 지도를 추가해 봅니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 14

오늘의 프로그램은 5일째 프로그램 을 베이스로 개조되고 있습니다만,
이번에는 설정이 이렇게 변경되었습니다.
추가한 것은 지리원 지도의 오르소 항공 사진입니다.

maplat_ac_day14.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
    }
  ]
}

추가된 것은 이 부분입니다.

maplat_ac_day14.json (추가 분 발췌)

    {
      "mapID": "ort",
      "maptype": "base",
      "url": "https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg",
      "maxZoom": 18
    }

이것은 TMS 또는 WMTS 형식의 맵을 새로 추가할 때의 설정입니다.mapID는 맵을 전환할 고유 ID를 지정합니다.maptype 는 기본 맵을 추가할 때 base 를 지정합니다.url는 TMS 또는 WMTS 형식의 타일 맵 URL을 지정합니다.maxzoom 는 지도의 최대 줌을 지정합니다.
그 밖에도, 지도의 이름이나 저작권자, 설명문 그 외를 추가하는 설정도 있습니다만, UI가 없는 API 베이스라고 일단 위에서만 움직입니다.

그 밖에도, 단지 위의 추가 맵으로 전환하는 버튼을 추가하기 위한 것입니다만, html 와 Javascript 도 이하와 같이 변경합니다.

index.html (변경 부분 발췌)

      <button id="ort">オルソ</button>

app.js (변경 부분 발췌)

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

이제 다음과 같은 동작이 됩니다.



그건 그렇고, 이번에는 설명을 위해 지리원지도 오르소를 원시 설정을 추가하고 추가했지만, 실은 지리원지도 오르소는 API에 사전 설정되어 있습니다.
그래서 오늘의 결과를 쉽게 얻으려고 하면 실은 gsi_ortho를 추가하는 것만으로 좋았습니다.

내일은 오버레이 지도로 TMS/WMTS 지도를 추가하는 경우를 설명합니다.