Node-REDで地図の表示とwhat3wordsAPI連携【ハンズオン資料】

この記事は、2020/10/20（火）に開催のイベント「Node-REDで色々試すハンズオン Tec-Nomad ・ ビジュアルプログラミング交流会 コラボ」のハンズオン資料として準備したものです。

ハンズオンでは、3名の講師（ @youtoy さん、 @kmaepu さん、自分）がそれぞれ Node-RED を利用した異なる内容を取り扱います。また Node-RED を利用する環境に enebular（エネブラー）を用います。

What3wordsとは？

ジオコーディング技術の一つで、新しい位置の示し方です。
地球上を3メートル角のマス目に区切り、3つの単語でそのマスの位置を表します。

例えば東京タワーの位置は
「けんぶつ・このは・はかり」

ディズニーランドもディズニーリゾートも同じ住所

人類はずいぶん長いこと位置を示すのに「住所」というものを使ってきましたが、
住所って実はすごく曖昧ですよね。
ディズニーランドもディズニーリゾートも同じ一つの住所が割り当てられています。

What3wordsのようなジオコーディング技術を使えば、3メートル角単位で位置を指定できます。
簡単な3つの単語で構成されているため子供でも覚えやすそうです。
ディズニーランドや広い建物内でUber Eatsのようなサービスが使えるようになるかも！？

今日のゴール

What3Words APIを叩いてみる

下記のようにノードを配置します
左から、injectionノード、http requestノード、jsonノード、debugノードです。

injectノード

ペイロードの種類をJSONに設定し、JSONエディタに下記を入力
※API KEYは↓から登録をして取得してください。
What3Words APIはこちら

{
    "words": "りんご・たぬき・ごはん",
    "key": "取得したAPI KEYを入力してください"
}

http requestノード

URL: https://api.what3words.com/v3/convert-to-coordinates
「msg.payloadをクエリパラメータに追加」にチェックを入れてください

injectノードを押して、結果が戻ってくれば成功です！

World Mapノードで地図を表示する

World Mapノードをインストール

設定→パレット→node-red-contrib-web-worldmapで検索し、インストール

左上から、changeノード x2、functionノード、worldmapノード、debugノード

changeノードその１

What3words APIから取得した緯度経度を格納します。

上から
result.lat
payload.coordinates.lat
result.lon
payload.coordinates.lng
result.name
payload.words

緯度 latitudeの略は「lat」で共通なのですが、
経度 longitudeは「lon」派と「lng」派がいて、紛らわしいですね...

changeノードその2

payloadの内容をresultに格納します。

functionノード

msg.payload.layer = "What3Words";
msg.payload.icon = ":face_with_raised_eyebrow:";
msg.payload.iconColor = "orange";

return msg;

msg.payload.iconは、ピンのデザインです。
face_with_raised_eyebrowは眉毛を上げてる顔アイコン。
好きなものに変更してください。
→:apple:
→:bear:
→ :bee:
などなど

World Mapノード

Web Pathをworldmapに変更してください。

アクセスしてみる

Node-REDのエンドポイント/worldmap にアクセスしてください。
エンドポイントは「i」アイコンから確認ができます。

injectノードを押して、アイコンが表示されたら成功です！
うまく動かない場合、地図をリロードするとうまくいくことがあります。

完成品

[{"id":"ffb31cec.d1dc8","type":"tab","label":"フロー 1","disabled":false,"info":""},{"id":"b7ec3c49.1805f","type":"inject","z":"ffb31cec.d1dc8","name":"パラメーター","topic":"","payload":"{\"words\":\"りんご・たぬき・ごはん\",\"key\":\"YOUR API KEY\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":220,"wires":[["bf5eb9d9.acc3c8"]]},{"id":"bf5eb9d9.acc3c8","type":"http request","z":"ffb31cec.d1dc8","name":"","method":"GET","ret":"txt","paytoqs":true,"url":"https://api.what3words.com/v3/convert-to-coordinates","tls":"","persist":false,"proxy":"","authType":"","x":350,"y":220,"wires":[["eaf44955.a7d5d8"]]},{"id":"d80a36ff.512dd8","type":"change","z":"ffb31cec.d1dc8","name":"緯度経度","rules":[{"t":"set","p":"result.lat","pt":"msg","to":"payload.coordinates.lat","tot":"msg"},{"t":"set","p":"result.lon","pt":"msg","to":"payload.coordinates.lng","tot":"msg"},{"t":"set","p":"result.name","pt":"msg","to":"payload.words","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":380,"wires":[["d3eaaf.74ccd55"]]},{"id":"406d805d.ecacb","type":"debug","z":"ffb31cec.d1dc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":580,"wires":[]},{"id":"eaf44955.a7d5d8","type":"json","z":"ffb31cec.d1dc8","name":"","property":"payload","action":"","pretty":false,"x":510,"y":220,"wires":[["d80a36ff.512dd8","a53215bd.94b408"]]},{"id":"d302430b.0e73c","type":"worldmap","z":"ffb31cec.d1dc8","name":"","lat":"","lon":"","zoom":"1","cluster":"","maxage":"","hiderightclick":"false","coords":"none","path":"worldmap","x":770,"y":460,"wires":[]},{"id":"d2d750f3.fd715","type":"function","z":"ffb31cec.d1dc8","name":"パラメーター設定","func":"msg.payload.layer = \"What3Words\";\nmsg.payload.icon = \":face_with_raised_eyebrow:\";\nmsg.payload.iconColor = \"orange\";\n\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":500,"wires":[["406d805d.ecacb","d302430b.0e73c"]]},{"id":"d3eaaf.74ccd55","type":"change","z":"ffb31cec.d1dc8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"result","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":380,"wires":[["d2d750f3.fd715"]]},{"id":"a53215bd.94b408","type":"debug","z":"ffb31cec.d1dc8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":220,"wires":[]}]