LoginSignup
6
4

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-29

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"と検索します。
image.png
"node-red-contrib-web-worldmap"というノードが一覧に表示されるので、[ノードを追加]ボタンをクリックします。
左メニューの"location"グループに"worldmap"ができるので、フロー上にドラッグ&ドロップします。
image.png
worldmapノードをダブルクリックすると、各種設定が可能ですが、worldmapのプロパティ設定は、Base mapに対象地図データを選択するだけで結構です。(今回は"OpenStreetMap"を選択)
image.png

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

最終的なフローは下図の通りとなります。Watson IoT Platformから取得したJSONメッセージからGPS情報を切り出し、worldmapに展開する"Plot GPS" functionノードと、地図のパンニング(移動)とズーミングをするMove and Zoom" functionノードを作成します。
image.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にマッピングします。(ついでにアイコンも設定します)
image.png

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

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

動作確認

デプロイimage.pngし、[Ctrl]+[Shift]+[m]キーを押すと、地図ダッシュボード画面に遷移します。
通常、Node-REDのURLがhttps://xxx.mybluemix.net/red の場合、地図ダッシュボードのURLはhttps://xxx.mybluemix.net/worldmap/ となります。
image.png
GPS位置情報を元に位置更新する地図ビューアが作成できました。

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

Sigfox Japan KCCS

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4