dump1090의지도를 국토 지리원으로 변경해 보았습니다.

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의 PVC 파이프를 이웃의 홈 센터에서 사 와 콜리니어 안테나를 넣어, 실외에 설치했더니 굉장히 감도가 좋아졌습니다.

이 사진에서는 결속 밴드로 고정하고 있습니다만, 폭풍으로 날아갔습니다. 그 때문에 철사로 고정하도록 했습니다.
10Km 앞을 3.5Km(11483ft)의 높이를 비행하고 있는 경우 19도 정도가 되어, 상당히 낮은 각도가 되므로, 지형에 꽤 좌우되는 것 같은 생각이 듭니다.

dump1090은 원본을 사용합니다. fork한 것은 이미 OpenStreetMap으로 변경되고 있는 것 같습니다만, ZRouter로 빌드 설정을 만드는 것이 귀찮기 때문에, 의존이 적은 오리지날을 사용하고 있습니다.
동영상을 Youtube로 올려 보았습니다.