Leaflet #053 - MapTilerのラスタタイル表示

MapTilerのラスタタイルを表示するメモ。

script.js

// デフォルトアイコンパス
L.Icon.Default.imagePath = "./img/icon/";

// MIERUNE Streets読み込み
const m_streets = new L.tileLayer(
  "https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]",
  {
    attribution:
      '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
  }
);

// MIERUNE Gray読み込み
const m_gray = new L.tileLayer(
  "https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=[APIキー]",
  {
    attribution:
      '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
  }
);

// MAP読み込み
const map = L.map("map", {
  center: [35.681, 139.767],
  zoom: 14,
  zoomControl: true,
  layers: [m_streets],
});

//背景レイヤ
const Map_BaseLayer = {
  "MIERUNE Streets": m_streets,
  "MIERUNE Gray": m_gray,
};

//レイヤ設定
L.control.layers(Map_BaseLayer, null).addTo(map);

//スケール設定
L.control
  .scale({
    imperial: false,
    maxWidth: 300,
  })
  .addTo(map);

Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter

• 参考文献
  Leaflet
  MapTiler