Sigfox GPSトラッカーをNode-REDでマップ表示

技術情報

Sigfox CallbackとIBM Watson IoT Platformとの連携は、Sigfox CallbackとIBM Watson IoT連携で記載しましたが、ここでは、Sigfox対応のGPSトラッカーの位置情報を地図表示してみます。

前提(Sigfox GPSトラッカー)

ここでは、緯度経度を下記のJSONでSigfox Callbackから転送することを前提に話を進めます。

sigfox-gps.json
{ "device": "{device}", "time": {time}, "data": "{data}", "lat": {customData#lat}, "lng": {customData#lng} } 

このように緯度経度の値として{customData#lat}と{customData#lng}を使うためには、Custom Payload Configでlatとlngをfloat等で宣言しておく必要があります。

Node-REDの設定

Node-REDでは、Node-RED Libraryで、世界中のユーザが作成したノードが公開されており、自身のフローに追加することができます。
ここでは、worldmapというノードを使用します。

worldmapノードをフローに追加する

Node-REDの右上メニューから"パレットの管理"メニューを選択し、検索バーで"worldmap"と検索します。

tech-1029-1.png

"node-red-contrib-web-worldmap"というノードが一覧に表示されるので、[ノードを追加]ボタンをクリックします。
左メニューの"location"グループに"worldmap"ができるので、フロー上にドラッグ&ドロップします。

tech-1029-2.png

worldmapノードをダブルクリックすると、各種設定が可能ですが、worldmapのプロパティ設定は、Base mapに対象地図データを選択するだけで結構です。(今回は"OpenStreetMap"を選択)

tech-1029-3.png

Watson IoT Platformから位置情報をworldmapに表示する

最終的なフローは下図の通りとなります。Watson IoT Platformから取得したJSONメッセージからGPS情報を切り出し、worldmapに展開する"Plot GPS" functionノードと、地図のパンニング(移動)とズーミングをするMove and Zoom" functionノードを作成します。

tech-1029-4.png

GPS位置情報を切り出す(Plot GPS)functionノードの作成

Watson IoTからは、msgオブジェクトとして、下記のJSONが送られてきます。

fromWatsonIoT.json
{ "topic": "iot-2/type/5a17978f5005747c7760123d/id/7B0DE2/evt/message/fmt/json", "payload": { "device": "7B0DEx", "time": 1540797562, "data": "0b8d274f056fffea002003f5", "lat": 35.6422308, "lng": 139.7415464 }, "deviceId": "7B0DEx", "deviceType": "5a17978f5005747c7760123x", "eventType": "message", "format": "json", "_msgid": "631ce355.88a95c" } 

ここから、緯度(lat)、経度(lng)、デバイスID(device)を取得し、worldmapに最低限必要なlatlonnameにマッピングします。(ついでにアイコンも設定します)

tech-1029-5.png

パンニングとズーミング(Move and Zoom)functionノードの作成

パンニングとズーミングを行うMove and Zoom functionの設定は下図の通りとなります。msg.payload.commandに緯度経度(lat, lon)を指定しパンニング、ズームサイズ(zoom)を指定します。

tech-1029-6.png

動作確認

デプロイimage.pngし、[Ctrl]+[Shift]+[m]キーを押すと、地図ダッシュボード画面に遷移します。
通常、Node-REDのURLがhttps://xxx.mybluemix.net/red の場合、地図ダッシュボードのURLはhttps://xxx.mybluemix.net/worldmap/ となります。

tech-1029-7.png

GPS位置情報を元に位置更新する地図ビューアが作成できました。

worldmapノードには、他にもエリアや線の描画、ヒートマップなどの機能があります。こちらを参考にしてください。