【JavaScript】【leaflet】地図タイルが配布されていないズームレベルでも地図を表示する方法

　leaflet は web ページ上に地図を表示するためのライブラリです。この地図を構成する画像はタイル形式の画像として配布されていることが多いです。この地図タイルが提供しているズームレベルが作りたい地図が必要とするレベルに満たないことがしばしばあります。この問題は特に詳細な地図を表示したい場合に起きます。この問題を解決する方法を紹介します。

　具体的なコード例とデモが次です。

// 地理院地図
// @see https://maps.gsi.go.jp/development/ichiran.html
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    maxZoom: 24, // 地図としてユーザーにズームを許可する限界値に maxZoom を設定
    maxNativeZoom: 18 // 提供されるズームレベルの max に maxNativeZoom を設定
}).addTo(map);

　leaflet の提供する map のオプションである maxZoom と maxNativeZoom の設定によって扱う地図タイルのズームレベルと地図そのもののズームレベルを独立して制御できます。これによって地図タイルが提供されていないズームレベルでも地図を表示できます。

　leafletの提供するズームレベルのオプションとその意味が次です。

Documentation – Leaflet – a JavaScript library for interactive maps#GridLayerより日本語訳して引用

　要するに native なしならば地図そのものズームレベルを、nartive ありならば扱う地図タイルのズームレベルを設定できるということです。これを利用することで次の様に1枚だけの画像を地図として扱うこともできます。

L.tileLayer('assets/zoom_map_icon_demo/wordpress_icon_{z}_{x}_{y}.png', {
  maxZoom: 24,
  minNativeZoom: 0, // nativeZoomを0,0とすることで常に 0_0_0 のタイルが呼ばれるようにする   
  maxNativeZoom: 0, 
}).addTo(map);

　以上のように、LeafletではmaxZoomとmaxNativeZoomの設定を工夫することで、地図タイルが提供されていないような特定のズームレベルでも地図の表示を実現できます。これは地図表示の柔軟性を格段に上げ自由なズームレベル設定の可能性も広げます。