React + OpenWeatherMap API で現在の気象を表示する

# はじめに

[React-Leafletでマップを表示](https://qiita.com/honda28/items/e4c73c916e4d9b2ec279)で地図を表示させ、マーカーを置いた。この記事では、OpenWeatherMap の API である Weather maps 1.0 を用いて、気象データを地図に重ね合わせる。[React Leaflet](https://react-leaflet.js.org/)、[Weather maps 1.0](https://openweathermap.org/api/weathermaps) を参考にした。また leaflet や react-leaflet はインストール済みという前提で進める。インストールをしていない場合は[React-Leafletでマップを表示](https://qiita.com/honda28/items/e4c73c916e4d9b2ec279)を参照。

# API キーの取得

OpenWeatherMap の API から気象海象データを取得するには、API キーを取得する必要がある。[Create New Account](https://home.openweathermap.org/users/sign_up) にてアカウントを作成すればキーを取得できる。いくつか制限はあるが、無料版で十分すぎる機能が使える。

# コンポーネントの作成

地図を表示させ、さらに気象データを重ねるコンポーネントのコードを以下に示す。このコンポーネントでは現在の雲、降水量、海面気圧、風速、気温の5つの気象データを重ねることができる。

```javascript:Weather.js
import React from "react";
import "leaflet/dist/leaflet.css";
import { LayersControl, MapContainer, TileLayer, WMSTileLayer } from "react-leaflet";

const APIKey = "取得した API キーを書く";

const SimpleLeaflet = () => {
  const position = [35.685175, 139.7528];
  return (
    <div>
      <MapContainer center={position} zoom={13} style={{ height: "100vh" }} >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <LayersControl position="topright" >
          <LayersControl.Overlay name="Cloud" checked>
            <WMSTileLayer url={`https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Precipitation">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Sea Level Pressure">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Wind Speed">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
          <LayersControl.Overlay name="Temperature">
            <WMSTileLayer url={`https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${APIKey}`} />
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    </div>
  )
}

export default SimpleLeaflet;
```

上記コンポーネントを読み込んで、開発用サーバーで実行した結果を以下に示す。

![weather.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769545/6e2bac0b-c4b0-9d80-5833-bc034e6c64ce.gif)

LayersControl を使用することで、上記 GIF のようにどの Layer を重ねるか選択できるようにしている。また LayersControl.Overlay タグ内に 'checked' と追記することで、デフォルトで選択状態にできる。 [Layers control | React Leaflet](https://react-leaflet.js.org/docs/example-layers-control/) に Layer のグループ分けなど細かい編集の例なども載っている。

# おわりに

今回は Weather maps 1.0 を試してみた。現在は [Weather maps 2.0](https://openweathermap.org/api/weather-map-2) がローンチしており、そこでは予報データや過去のデータも取得できるとのことだったが、試したところ結果がうまく反映されなかったので、うまく扱える人がいたら教えて下さい。

（2021/5/7 追記）
直接 OpenWeatherMap に問い合わせたところ、無料版では対応していないとのこと。[Detailed price - OpenWeatherMap](https://openweathermap.org/full-price#current) にたしかにそう書いてある。試せなくて残念。