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

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

## Windy について

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

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

## Windy JavaScript API と Leaflet

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

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

[Windy API \- Docs](https://api4.windy.com/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](https://leafletjs.com/)

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

## Windy JavaScript API を使ったサンプル

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

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

<img width="1120" alt="windy-api-01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/781e7fb5-f7f0-c7bd-c92f-f8a6291ab45f.jpeg">

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

<img width="1120" alt="windy-api-02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/9735e9f2-7c4c-660b-e027-7a5fa05aa374.jpeg">

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

<img width="1107" alt="windy-api-03.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/d9eedb90-491f-fa14-a0e9-f42615a6dcbd.jpeg">

## Windy API Key の作成

- Windy JavaScript API を使うには Windy API Key が必要
- Windy のアカウントを [Windy: Wind map & weather forecast](https://www.windy.com/) にて作成し、 Windy API のページ [Windy API \- Home](https://api4.windy.com/) にて無料の API Key を作成する

## サンプルコード

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

### JavaScript (script.js)

```javascript
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

```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\.](https://github.com/windycom/API)

## 参考資料
- [Windy: Wind map & weather forecast](https://www.windy.com/)
- [Windy API \- Home](https://api4.windy.com/)
- [windycom/API: 🏄Windy API, or Windy Leaflet Plugin, let you put animated weather map into your website and enjoy rich ecosystem of Leaflet library\.](https://github.com/windycom/API)