ADS-Bの受信プログラムのdump1090がgoogle mapのjavascriptで表示していたのが、google mapが無料で使えなくなったので、別の方法を探したところ、とても良い記事がありました。

この記事を参考にdump1090の地図を国土地理院の地図に変更してました。

サンプルに元々のjsonを読んでいるコードを追加してマーカを表示するようにしてみました。jsonのデータの処理のロジックはそのまま実装しました。

LeafletというJavaScriptのライブラリを使うことができるようですが、このライブラリにはマーカーに付加情報を表示する機能としてポップアップとツールチップというものがありました。ポップアップはクリックすると出てきてツールチップはマウスオーバーで出てきます。

今回はツールチップを使ってjsonに入っているflightを表示するようにしました。最初に受け取ったjsonにはflightが入っていないこともあるので、再読み込みした時に再設定するようにしました。

ADB-Sのパケットは常にICAOの24ビットのアドレスが含まれていますが、それ以外は別々のようでflight名は時々しか送られてこないようです。

jsonには飛行機の方向が入っていて、元の地図では三角の頂点がその方向を向いていました。

Leafletで同じようにするためにまずcssで三角を描いてそれを回転させる方法を考えました。回転は以下のライブラリを使うと簡単にできました。

三角はちょっと味気ないのでアイコンを使う方を調べてみたところsvgというものがあることを知りました。昔からページ系の技術にはまったく疎い私です。

でsvgのフリーのアイコンを探したところペンタラボさんがフリーの素材を提供していて、それを使うことにしました。

svnの書き方はいろいろ検索してhtmlで書く方法を見つけました。他に良い方法があるのかもしれませんが。

アイコンはマーカーの位置が左上になるようなのiconAnchorでセンターに表示されるように調整しました。

当初「標準地図」をつかっていました、「淡色地図」の方が見やすいようです。

L.control()を使ってツールチップのマウスオーバーで地上高と速度を表示するようにしてみました。また日時とスケールを表示するようにしました。

最終的にこのサンプルを参考にしたのですが、当初全く分からずたどり着くまで、結構いろいろ検索しました。flightradar24のような左に表示領域を作る方法も調べたのですが、わからなかったのと、地図の表示領域を狭くするのは得策ではないので、この方法でよかった気がします。

気を良くして1mの塩ビパイプを近所のホームセンターで買ってきてコリニアアンテナを入れて、室外に設置したところすごく感度がよくなりました。

この写真では結束バンドで固定してますが、嵐で吹き飛ばされました。そのため針金で固定するようにしました。

10Km先を3.5Km(11483ft)の高さを飛行している場合19度くらいになり、結構低い角度になるので、地形にかなり左右されるような気がします。

dump1090はオリジナルを使っています。forkしたものではすでにOpenStreetMapに変更されているようですが、ZRouterでビルド設定を作るのが面倒なので、依存が少ないオリジナルを使っています。

動画をYoutubeに上げてみました。