Windy JavaScript API で風や波のアニメーションを地図上に表示する #JavaScript

概要

Windy JavaScript API を使って風の流れのアニメーションを Web ページ上に表示する

Windy について

Windy は地図上に風や波のアニメーションを表示している Web サイト。以前は Windyty という名前だった。

公式サイトの Windy: Wind map & weather forecast には十分な機能が揃っている地図を見ることができる。自らカスタマイズ等をする必要がなければこちらを見るだけで十分かもしれない。

Windy JavaScript API と Leaflet

Windy JavaScript API は Leaflet 1.4.x をベースにしたライブラリ。Leaflet の機能に Windy で使われているような地図表示機能を追加している。

Leaflet は Web ページ上に地図を表示することができる JavaScript ライブラリ。

Windy API - Docs

Windy JavaScript API is a simple-to-use library based on Leaflet 1.4.x. It allows you to use everything Leaflet or JavaScript offers, along with the Windy map visualizations we use at Windy.com.

Leaflet - a JavaScript library for interactive maps

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

Windy JavaScript API を使ったサンプル

Windy JavaScript API を使って風の動きがわかるアニメーション地図をWebページ上に表示してみた。

風の強さによる背景色の色分けができる。

背景には雨の強さなどを表示することも可能。

波の動きのアニメーションを表示することも可能。
ページ下部のスライダーを動かせば、先の時間の予測情報を見ることもできる。

Windy API Key の作成

Windy JavaScript API を使うには Windy API Key が必要
Windy のアカウントを Windy: Wind map & weather forecast にて作成し、 Windy API のページ Windy API - Home にて無料の API Key を作成する

サンプルコード

サンプルのソースコードを以下に示す。
これだけで、アニメーションや背景を切り替えるためのコントロールも右上に表示される。

JavaScript (script.js)

const options = {
  // Required: Your API key
  key: 'YOUR_API_KEY',

  // Optional: Initial state of the map
  // 名古屋駅を中心に表示
  lat: 35.170736,
  lon: 136.882104,
  zoom: 6,
};

// Initialize Windy API
windyInit(options, windyAPI => {
    const { map } = windyAPI;
    // .map is instance of Leaflet map
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
    />
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://api4.windy.com/assets/libBoot.js"></script>
    <style>
      html, body {
        width: 100%; height: 100%; margin: 0; padding: 0;
      }
      #windy {
        width: 100%; height: 100%; margin: 0; padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="windy"></div>
    <script src="script.js"></script>
  </body>
</html>

いくつかのサンプルコードが公式の GitHub リポジトリにあるので参考になる。
windycom/API: 🏄Windy API, or Windy Leaflet Plugin, let you put animated weather map into your website and enjoy rich ecosystem of Leaflet library.

Windy JavaScript API で風や波のアニメーションを地図上に表示する

概要