TfLJamCams

TfLJamCams - https://www.tfljamcams.net

導入

TfLJamCamsは、交通カメラ、ライブ道路事故、ロンドンの公共交通機関のリアルタイムの出発情報を表示する Google マップ プロジェクトです。地理位置情報を使用すると、0.5 km 以内の地元の公共交通機関の停留所が表示されます。

モバイル デバイスのホーム画面にインストールするための PWA として、または標準の Web ページとして利用できます。 Service Worker がデプロイされ、PWA で使用するためにローカル キャッシュが保存されます。

前提条件

API データ呼び出しには次の API キーが必要です。

• Google マップ Javascript API - https://cloud.google.com/maps-platform/

• TfL オープンデータ アプリ キー https://tfl.gov.uk/info-for/open-data-users/

• National Rail アプリ キー - https://lite.realtime.nationalrail.co.uk/OpenLDBWS/

API 呼び出しの例

TfL バス ルート 23 の停留所 - https://api.tfl.gov.uk/line/23/stoppoints

ロンドン地下鉄セントラルラインの駅 - https://api.tfl.gov.uk/line/central/stoppoints

ロンドン JamCams - https://api.tfl.gov.uk/Place/Type/JamCam/

ライブインシデント - https://api.tfl.gov.uk/Road/All/Disruption?startDate=YYYY-MM-DD&endDate=YYYY-MM-DD

ナショナル レールの出発地点 - https://lite.realtime.nationalrail.co.uk/OpenLDBWS/

メソッド

トラフィック カメラは、TfL API への AJAX 呼び出しを介してロードされます。ビデオと画像の URL は両方とも、標準の JSON リクエストによって提供されます。ページの上部にあるボタンを使用すると、画像フィードとビデオ フィードが切り替わり、利用可能なフィードの数も表示されます。

画面の下部に沿って画像ボタンが表示され、路線番号ごとにバス停を、路線名ごとに TfL 駅を読み込むことができます。

TfL データは、マップ マーカーをフォーマットする処理の後、JSON フィードから直接フィードされます。地下鉄はドロップダウン リストに表示され、バスのルートはページ上のオートコンプリート配列に保持されます。

National Rail データは SOAP XML リクエストを介して提供され、専用の PHP ファイルを使用して、統一性を保つために TfL フィードと同様の形式で JSON フィードを出力します。

オートコンプリート検索機能が提供されており、カメラ名、ロンドン国鉄の駅、ロンドンの町、ロンドンのエリア、ロンドン特別区の配列が含まれています。データベース呼び出しが過剰なサーバー負荷を引き起こしていたため、これはページ内に配列として保存されます。

参考文献

https://github.com/railalefan/phpOpenLDBWS

JavaScript ソース

jquery.easy-autocomplete.min.js
https://code.jquery.com/jquery-3.3.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js
https://www.google.com/recaptcha/api.js?hl=ja