【MapLibre】Wi-Fi 速度のカスタムレイヤーを追加する

　Wi-Fi 速度を表示する為の MapLibre GL JS 用カスタムレイヤーを作成したので紹介します。

　当サイト（パントレ）では MapLibre を用いた旅系 Web 地図を作成しており、その中に Wi-Fi 速度共有機能も存在します。海外旅行先ではネットに苦労することも多く、そういった不満を少しでも解消できるようにと願って作りました。

　この Wi-Fi 速度共有機能は単体で別サイト（サブドメイン）に切り離したものもあります。それが以下のサイト（wifi.pancake-trail.site）となり、複数言語対応などを狙った試みです。本カスタムレイヤーでどのように表示されるかは以下のサイトが分かりやすいかもしれません。

　これらのサイトで参照している Wi-Fi 速度レイヤーをひとまとめにしてカスタムレイヤー化したものが以下の CDN/npm で配信されている JavaScript になります。API キーは不要です。Github にもアップロードしているので、コードはそちらをご参照ください。

<script src="https://unpkg.com/wifi-speed-customlayer@1.0.1/dist/wifi-speed-customlayer.min.js"></script>

npm install wifi-speed-customlayer maplibre-gl

　レイヤーの追加は例えば以下のようなコードで行うことができます。

map.on('load', () => {
    map.addLayer(new WifiSpeedLayer({
        language: 'auto',            // 'auto' | 'en' | 'ja'
        controlPosition: 'top-right' // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
    }));
});

　ズームレベル 11 未満はクラスターで表示され、ズームレベル 11 以上はポイントで表示されます。使用できるオプションは以下の通りです。

オプション	デフォルト	説明
id	‘wifi-speed’	レイヤー ID
controlPosition	‘top-right’	登録/削除ボタン表示位置
language	‘auto’	言語（’en’, ‘ja’）
showRegister	true	登録ボタンの表示
showDelete	true	削除ボタンの表示
clusterRadius	60	クラスター化の半径
speedRange	[0, 50]	ポイントの色の表示範囲
colors	[‘#0000FF’, ‘#FF0000’]	ポイントの色の表示設定
refreshInterval	0	リフレッシュ間隔 [ms] (0 = off, 最小 30000)
refreshOnFocus	true	タブ再表示時にリフレッシュするか
beforeId	–	このレイヤーの前に挿入するレイヤー
maplibregl	global	MapLibre の名前空間
meshBaseUrl, clusterUrl	official data	データソース

　showRegister/showDelete を true にすると、レイヤー操作時にポイントの登録/削除ボタンが表示されるようになります。ボタンを押すと wifi.pancake-trail.site が別のタブで開き、該当ポイントの登録/削除を行うことができます。

　

ちょっと宣伝

　当サイトは地図を使った海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
　当サイトで海外旅ブログを執筆することも可能です（無料）！　また既にブログ/ YouTube をお持ちの方も、当サイトからリンクを貼ることができるようになっています。気になる方は「当サイトについて」をご覧ください。

パントレ管理部