6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?