Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

 昨日、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"]]}]
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away