Leafletの独自マップでの範囲外の404エラーを防止する

自分で用意した画像を表示させると、画像外のエリアを表示した場合404エラーが出るのを防止する。

土台はいつぞやの記事。

特に難しいことは無く、tileLayerにboundsとnoWrapを設定するだけ。

LatLngBoundsに設定する値は、元の画像のサイズ。
(今回使ってる画像は元々6720x4480)

    // 404エラー防止
    const mapBounds = new L.LatLngBounds(
      map.unproject([0, 4480], map.getMaxZoom()),
      map.unproject([6720, 0], map.getMaxZoom())
    );

    L.tileLayer('map/{z}/{x}/{y}.jpg', {
      attribution: '© <a href="https://www.pakutaso.com/20200556146post-25030.html">ぱくたそ</a>',
      bounds: mapBounds,
      noWrap: true,
    }).addTo(map);