OpenWeatherMapの観測場所をworldmapでマッピングしてみた

NODE-REDのノードには
気象情報API 無料でも結構使える [OpenWeatherMap](https://flows.nodered.org/node/node-red-node-openweathermap) があります。
&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;![WS000100.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/b2dcb071-52a0-ba4e-5114-57f5d838a023.jpeg)
無料APIでは、現在の天気と5日後までの3時間毎の天気予報を取得できます。
OpenWeatherMapのサイトで**API Kye**と観測ポイントの設定で取得できるのですが
観測ポイント見つけるのがちょっとした手間です。

最適場所を判断するため地図に**NODE-RED**のデーターを描画できる
[worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap)を使って可視化し判断できるようにしましたのでまとめます。

実際に描画したらこのようになります。
![WS000089.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/c061ccb9-90b8-5f74-368f-be99d9125162.jpeg)

##OpenWeatherMapの設定

###ノードの追加
ノードはパレットの管理からノードの追加で
**node-red-node-openweathermap**を追加

###OpenWeatherMap API Kyeの取得
まずは、[OpenWeatherMap](https://openweathermap.org/)でアカウント登録し
ログイン後に**API Key**を取得
やり方は、アカウント名をクリックしたら下記の吹き出しみたいなリストが出てくるので
赤枠の**My API Keys**をクリック
![WS000103.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/48c2ceec-64bb-9251-0741-145635528644.jpeg)
**API Keys**サイトの黒線部分が**API Key**です。
![WS000104.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/a965fca6-17e5-ef7d-6513-e3264f3214c5.jpeg)

###ノードの設定
ノードはシンプル下記のノードで試せます
![WS000105.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/574e92fd-a2be-8e21-829b-69cc4df2b41d.jpeg)

```ruby:JSON
[{"id":"dcb8bdfe.9f0ce","type":"debug","z":"1c24510c.fa96bf","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":990,"y":880,"wires":[]},{"id":"dc3a318b.d54c1","type":"openweathermap","z":"1c24510c.fa96bf","name":"","wtype":"onecall","lon":"139.02","lat":"37.55","city":"","country":"","language":"ja","x":770,"y":880,"wires":[["dcb8bdfe.9f0ce"]]},{"id":"bea8e03c.c098f","type":"inject","z":"1c24510c.fa96bf","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":540,"y":880,"wires":[["dc3a318b.d54c1"]]}]
```
**OpenWeatherMap**ノードを編集
**API Kye**に** OpenWeatherMap**サイトで取得した**API Kye**をコピペする
**Language**を設定し（私は日本語にする為Japaneseを選択）
その下のリスト選択が現在の天気と5日後までの3時間毎の天気予報の選択です
**Current weather for**が現在の天気
**5 day forecast for**が5日後までの3時間毎の天気予報
**combined current weather/forecast for**が現在の天気と天気予報の両方取得できる
![WS000106.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/f8cf6d6b-b12f-a3a5-c7a8-4d9ee8f4b797.jpeg)

**Location**が観測ポイントの設定
**City,Country**が地名で設定
**Coordinates**が緯度経度で設定　
![WS000102.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/93618ee6-37bb-e879-4dd2-049869440ca9.jpeg)

設定は簡単ですが観測ポイントが分からないので何を入力したらいいかで戸惑うところです。

##観測ポイント情報
###JSONファイルを取得しCSVファイルに変換
観測ポイント情報は[こちら](http://bulk.openweathermap.org/sample/)のサイトの
**city.list.json.gz**にあります。 
JSONファイルですが今回データ加工しやすいようにCSVファイルにしました。    
変換は[anyconv](https://anyconv.com/ja/json-to-csv-konbata/)というサイトで行いました。
ダウンロードした圧縮ファイルを解凍して**city.list.json**ファイルを**CSV**に変換しました。
※ファイルサイズエラーが出るときは日本だけを抜き出したものにしてみてください


###CSVファイルにタイトル行を追加
**worldmap**に表示するために**CSV**ファイルの1行目にタイトル行を追加します。
追加したタイトルがpayload名となります。
緯度経度だけは**worldmap**ノードの仕様に合わせ
緯度は**lat** 経度は**lon**にします。その他描画に入れたい内容は任意で設定できます。
![WS000111.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/3bd66641-6f65-d75b-49b0-4e67d335890a.jpeg)

日本の情報約1400カ所をまとめたCSVファイルを[こちら](http://lirevo.com/ctw/openweathermap_jp)においてますのでよかったら使ってください
※気になる方はこの後の**worldmap**の設定を見て決めてください

##worldmapの設定
###ノードを追加
ノードはパレットの管理からノードの追加で
**node-red-contrib-web-worldmap**を追加
&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;![WS000107.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/4f8f72cd-3814-0a9a-33c1-e17d9633851e.jpeg)

###ノードの設定
サーバーデータを使う場合http requestノードを使う
![WS000108.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/df94aaa1-247f-d237-2e76-61b560f8f69d.jpeg)

```ruby:JSON

[{"id":"bc36f011.14f41","type":"csv","z":"93f8595e.34c898","name":"","sep":",","hdrin":true,"hdrout":"","multi":"one","ret":"\\n","temp":"","skip":0,"strings":true,"include_empty_strings":false,"include_null_values":false,"x":910,"y":600,"wires":[["9c1b1e9f.64c16"]]},{"id":"423270bf.36509","type":"http request","z":"93f8595e.34c898","name":"openweathermap_CSV","method":"GET","paytoqs":"ignore","url":"http://lirevo.com/ctw/openweathermap_jp","tls":"","persist":false,"proxy":"","authType":"","x":690,"y":600,"wires":[["bc36f011.14f41"]]},{"id":"4e7218f5.03c838","type":"inject","z":"93f8595e.34c898","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":460,"y":600,"wires":[["423270bf.36509"]]},{"id":"9c1b1e9f.64c16","type":"function","z":"93f8595e.34c898","name":"ピン設定","func":"msg.payload.icon = \"globe\";//\"globe\";\nmsg.payload.iconColor = \"green\";\nmsg.payload.radius = 3000;\n\ndelete msg.payload.latitude;\ndelete msg.payload.longitude;\t\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":700,"y":700,"wires":[["e76acc2a.46db6"]]},{"id":"e76acc2a.46db6","type":"worldmap","z":"93f8595e.34c898","name":"","lat":"","lon":"","zoom":"1","cluster":"","maxage":"","hiderightclick":"false","coords":"none","path":"worldmap","x":900,"y":700,"wires":[]}]
```

PCのファイルから読み出す場合**http request**ノードを**file in**ノードに変えれば可能です。
&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;![WS000107.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/0d2a77b2-8185-8315-f29b-b5a7cefe754d.jpeg)

###ピンの設定
表示位置は**CSV**ファイル内の緯度経度を読み取ってます
今回は観測ポイントに**icon**と定規代わりに半径３Kmのサークルを描画してます。
設定は**function**ノードで行ってます。

####iconの設定
```ruby:icon
msg.payload.icon = "globe";//"globe";
```
[font awesome](https://fontawesome.com/v4.7.0/icons/)サイトのアイコンも使えます
設定は**font awesome**サイトのアイコン名を記入するだけです。
例として**globe**を**fa-subway**に変えて地下鉄アイコンを表示してみました。

```ruby:fa-subway
msg.payload.icon = "fa-subway";
```
![WS000110.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/52d0b819-184b-919d-7620-3fc1c12bc8b6.jpeg)

####iconの色設定
色値は**HTML**の色設定で行えます。

```ruby:iconColor
msg.payload.iconColor = "green";
```

####サークル（円）の設定
定規代わりにサークル（円）が描画してます。
サイズ設定は半径をメートル（ｍ）入力するので
今回は値を3000にしてます。

```ruby:Circles
msg.payload.radius = 3000;
```
###OpenWeatherMap Locationを取得
**icon**をクリックすると**CSV**の内容が表示されます。
![WS000112.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/dd8da463-0fd8-e769-77dc-4e930a4678f2.jpeg)
タイトル的なのが**City**です **Country**は**jp**と入力します。
緯度経度の場合
**Latitude**が緯度　**Longitude**が経度です。

##最後に
今回は設定までです。
気象データについてはまたの機会に書きます。

**Node-RED**やればやるほど先人が頑張ってくれたことを使わせてもらってます。
多動力とはこういうことかと理解できました。
私も先人を見習い、ちょっとつまずいたところをまとめてみました。


###参考にしたサイト
　[無料天気予報APIのOpenWeatherMapを使ってみる](https://qiita.com/nownabe/items/aeac1ce0977be963a740)