同様のものは昔作りましたが、データが古くなってきて新しく増えた都市や港がないので、最新のデータを利用しました。
Bootstrap4を使ったので、レスポンシブです。
セルクリックで地図、天気予報を下に表示します。
地図は、Leaflet, Yahoo, Bing, Google, OpenLayers, MapBox を選べますので、好み、用途に対応してます。
天気予報データは、OpenWeatherMapのAPIを使ってます。
ジオコーダーは、OpenCageのAPIを使ってます。
現在時刻用のタイムゾーンは、ipgeolocation.ioのAPIを使ってます。
APIは全てフリーライセンスのプランなので、利用リミットに達した場合、処理出来ないことがありますので、ご了承下さい。
< URL >
https://psn.saoline.co/unlo20/
[ セルクリックの動作 ]
UNLOコード列 : 天気予報を表示
地名列 : クリックした地名でジオコーダーして得た経緯度を中心とした地図を表示
ロケーション列 : 表示されている経緯度を中心とした地図を表示
< 画面例 >