Leaflet で GeoJSON タイルレイヤを表示するいくつかある方法のうちの一つ

GitHub Gist の pkorac/leafletGeoJsonTileLayer.js に書かれています。

このまま使おうとしたら自分の環境ではいくつか問題があったのでカスタマイズしました。
Leaflet.js 1.4.0 で試しています。

大きな変更点は2つです。

  • タイルパスの取得方法を変更
    Gist ではイベントのURLをevent.url で取得していますが、今回試した環境ではイベントから URL を直接取得できませんでした。
    代わりに event.coords を使うとポイントオブジェクトとして XYZ タイル座標を取得できるため、この情報を使って GeoJSON タイルの URL にしています。

  • jQuery を使いたくない
    JSON をダウンロードするために jQuery を使っていますが jQuery には使わない機能も多く搭載されていて 85kB あるため、13kB 程度にある axios を使っています。
    とはいえ axio では Promise が使われているので IE なんかで使おうとすると Polyfill とかが必要になるのでアレ。

どっちにしろ Webpack とか Babel な環境で使う事が多いので Promise ならなんとかなるんですよね。