Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

以前、「Google Map上に雲と天気を表示する」という記事を書きましたが、残念なことに「お天気&雲レイヤ」と「Panoramioレイヤ」は2015年に廃止されるそうなので、その代案として「OpenWeatherMap API」を利用してみました。

OpenWeatherMapでは、様々な気象データが取得できるのですが、今回はAPI keyも必要なく簡単に使える画像タイルデータをLeaflet.jsに読み込んで表示しています。

サンプル

OpenWeatherMapから「降水予測」「雲」「気圧図」のタイル画像を読み込み地図上にオーバーレイして表示しています。
Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

example