1. Qiita
  2. Items
  3. Bluemix

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

  • 44
    Like
  • 2
    Comment

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

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

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

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

entire.png

worldmapノード概要

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

インストール方法

 worldmapノードは、Node-REDにデフォルトで用意されていないため、インストール作業が必要です。BluemixのNode-REDとOSS版Node-REDでインストール方法が異なります。

BluemixのNode-RED Starterの場合

 新しい処理ノードを追加するには、IBM DevOps Services上でpackage.jsonを書き換えてデプロイします(詳しくはIBMのハンズオンスライドの25〜30ページで紹介されています)。package.jsonのdependenciesに追記する内容は下記です。

"node-red-contrib-web-worldmap":"0.x"

ids.png

 cfコマンドを使いたい方は、Node-RED先生の記事の手順で、新しい処理ノードをインストールできます。

OSS版Node-REDの場合

 コマンドラインで下記コマンドを実行するだけです。

npm install node-red-contrib-web-worldmap

 Bluemixは折角きれいな管理画面があるので、redconnect版のNode-REDの様に管理画面上で処理ノードの追加、削除をできるようにしてほしいところです。

開発方法

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

node.png

 worldmapノードが表示したブラウザにWebSocket経由で地図操作処理を送るため、WebSocketノードを配置します。WebSocketノードに設定するURLは/ws/worldmapです。

websocket.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-contrib-uiというブラウザ上にボタンやグラフを表示する処理ノードも要注目です。今後調査を進め、情報共有をしようと考えています。

ソースコード

[{"id":"8f734116.6386f","type":"websocket-listener","path":"/ws/worldmap","wholemsg":null},{"id":"a51df937.301688","type":"twitter in","z":"72ccf6db.d4b7e8","twitter":"","tags":".","user":"false","name":"Get tweets","topic":"tweets","x":447.37107849121094,"y":301.9178009033203,"wires":[["40b7b93a.bfa9e8"]]},{"id":"a3e909e7.5dc6f8","type":"worldmap","z":"72ccf6db.d4b7e8","name":"","x":469.59387969970703,"y":442.51356506347656,"wires":[]},{"id":"57f839fe.cf2ef8","type":"websocket out","z":"72ccf6db.d4b7e8","name":"","server":"8f734116.6386f","client":"","x":910.7000122070312,"y":396.2000274658203,"wires":[]},{"id":"b7dc6e9f.768b6","type":"function","z":"72ccf6db.d4b7e8","name":"Plot tweet","func":"var output = {\n    lat: msg.location.lat,\n    lon: msg.location.lon,\n    place: msg.location.place,\n    tweet: msg.payload,\n    name: msg.tweet.user.name,\n    icon: \"globe\",\n    iconColor: \"orange\"\n};\nmsg.payload = output;\n\nreturn msg;","outputs":1,"noerr":0,"x":710.65625,"y":414.68406677246094,"wires":[["57f839fe.cf2ef8"]]},{"id":"ea82dfb9.0872b","type":"function","z":"72ccf6db.d4b7e8","name":"Move and zoom","func":"msg.payload = {\n    command:{\n        layer:\"Esri Terrain\",\n        lat: msg.location.lat,\n        lon: msg.location.lon,\n        zoom:3\n        \n    }\n};\nreturn msg;","outputs":1,"noerr":0,"x":716.6999969482422,"y":371.2000274658203,"wires":[["57f839fe.cf2ef8"]]},{"id":"fe66575a.d277a8","type":"switch","z":"72ccf6db.d4b7e8","name":"location.lat!=null","property":"location.lat","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":797.4535675048828,"y":299.75469970703125,"wires":[["4b6165dc.b89b5c"]]},{"id":"4b6165dc.b89b5c","type":"switch","z":"72ccf6db.d4b7e8","name":"location.lon!=null","property":"location.lon","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":518.2227172851562,"y":390.8260192871094,"wires":[["ea82dfb9.0872b","b7dc6e9f.768b6"]]},{"id":"40b7b93a.bfa9e8","type":"switch","z":"72ccf6db.d4b7e8","name":"location!=null","property":"location","rules":[{"t":"nnull"}],"checkall":"true","outputs":1,"x":614.4868698120117,"y":301.4570999145508,"wires":[["fe66575a.d277a8"]]}]