GoogleMaps APIより簡単!Node-REDで位置情報付きツイートを地図上に表示

  • 47
    いいね
  • 2
    コメント

 昨日、worldmapという地図を扱うユーザインターフェイスを、簡単にNode-RED上で実装するノードを教えてもらいましたので、紹介します。試しに位置情報付きツイートを地図上にプロットする処理を記述しました。

map.png
↑世界中でツイートされた場所をリアルタイムに地図にプロット

tweet.jpg
↑ピンをクリックすると、ツイートの内容を表示

 作成した全体の処理は下のとおりです。Twitterノードでツイートを取得し、Switchノードで位置情報を含むツイートのみフィルタリングします。その後、ピンの表示と、地図の移動を同時に行います。

flow.png

worldmapノード概要

 GoogleMap APIの様に、地図上にピンを表示する等の処理をNode-REDで実現するノードです。JSONデータに値の代入するだけでよいため、GoogleMap APIより簡単に開発できます。

インストール方法

 worldmapノードは、Node-REDにデフォルトで用意されていないため、インストール作業が必要です。Node-REDのフローエディタの右上のハンバーガーメニューから、「パレット管理」を選択し、「ノードの追加」からインストールしてください。インストールするノードは、"node-red-contrib-web-worldmap"です。

開発方法

 Node-REDの開発画面の左側のパレットから、worldmapノードをフロー画面に配置するのみで、地図を表示するURL(http://<アプリ名>.mybluemix.net/worldmap)にアクセスできる様になります。

node.png

地図上にピンを表示

 WebSocketノードに、緯度経度を含むJSONデータを送るだけでブラウザ上にピンを配置できます。ここではTwitterノードから取得した緯度lat、経度lonの値をmsg.payloadのJSONデータに代入しています。iconやiconColorでピンの種類を設定できるようです。

plot.png

地図の移動、ズーム

 同様にWebSocketノードへ、移動先の緯度経度を含むJSONデータを送るだけで、地図の中心が移動します。同時にzoomの値を変えることで拡大縮小もできます。layerの値をを変えることで表示する地図も変更できるようです。

move.png

最後に

 これまでNode-REDの弱点は、ウェブアプリケーションを開発する場合、ユーザインターフェイスを自分でHTMLで記述する必要があることでした。今回の様なユーザインターフェイスを扱うノードが増えることで、Node-REDの弱点を補うことができそうです。このworldmapノードの他、node-red-dashboardというブラウザ上にボタンやグラフを表示するノードも要注目です。

ソースコード

[{"id":"b8563966.456448","type":"twitter in","z":"b9740e26.3e13a","twitter":"","tags":".","user":"false","name":"ツイート取得","topic":"tweets","inputs":1,"x":124,"y":360,"wires":[["2ec247a7.91a4a8"]]},{"id":"8da4f585.b212e8","type":"worldmap","z":"b9740e26.3e13a","name":"","x":604,"y":460,"wires":[]},{"id":"a44b576b.e3e338","type":"switch","z":"b9740e26.3e13a","name":"location.lat!=null","property":"location.lat","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":494,"y":360,"wires":[["23beb263.76cfbe"]]},{"id":"23beb263.76cfbe","type":"switch","z":"b9740e26.3e13a","name":"location.lon!=null","property":"location.lon","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":204,"y":460,"wires":[["52ee4a26.79b964","8466cfe9.d49dc"]]},{"id":"2ec247a7.91a4a8","type":"switch","z":"b9740e26.3e13a","name":"location!=null","property":"location","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":304,"y":360,"wires":[["a44b576b.e3e338"]]},{"id":"52ee4a26.79b964","type":"template","z":"b9740e26.3e13a","name":"ピンを配置","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{\n    \"lat\": \"{{location.lat}}\", \n    \"lon\": \"{{location.lon}}\",\n    \"place\": \"{{location.place}}\", \n    \"tweet\": \"{{payload}}\", \n    \"name\": \"{{tweet.user.name}}\", \n    \"icon\": \"globe\",\n    \"iconColor\": \"orange\"\n}","output":"json","x":412,"y":450,"wires":[["8da4f585.b212e8"]]},{"id":"8466cfe9.d49dc","type":"template","z":"b9740e26.3e13a","name":"移動とズーム","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{\n    \"command\": {\n        \"layer\": \"Esri Terrain\",\n        \"lat\": \"{{location.lat}}\", \n        \"lon\": \"{{location.lon}}\",\n        \"zoom\": \"3\"\n\n    }\n}","output":"json","x":422,"y":504,"wires":[["8da4f585.b212e8"]]}]