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

Sigfox CallbackとIBM Watson IoT Platformとの連携は、[Sigfox CallbackとIBM Watson IoT連携](https://qiita.com/ghibi/items/6ac04e23e9072dc07b21)で記載しましたが、ここでは、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](https://qiita.com/ghibi/items/361ea55ea04658b4193c)でlatとlngをfloat等で宣言しておく必要があります。

#Node-REDの設定
Node-REDでは、[Node-RED Library](https://flows.nodered.org/?num_pages=1)で、世界中のユーザが作成したノードが公開されており、自身のフローに追加することができます。
ここでは、**worldmap**というノードを使用します。
##worldmapノードをフローに追加する
Node-REDの右上メニューから**"パレットの管理"**メニューを選択し、検索バーで"worldmap"と検索します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/5d61f17d-9a4e-c3ab-893d-59550c247324.png)
"node-red-contrib-web-worldmap"というノードが一覧に表示されるので、[ノードを追加]ボタンをクリックします。
左メニューの"location"グループに"worldmap"ができるので、フロー上にドラッグ＆ドロップします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/e61fdee1-0060-0249-f78f-b057f0bb0972.png)
worldmapノードをダブルクリックすると、各種設定が可能ですが、worldmapのプロパティ設定は、Base mapに対象地図データを選択するだけで結構です。（今回は"OpenStreetMap"を選択）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/2a5159e3-e172-9717-c24f-dad7c922edf5.png)

##Watson IoT Platformから位置情報をworldmapに表示する
最終的なフローは下図の通りとなります。Watson IoT Platformから取得したJSONメッセージからGPS情報を切り出し、worldmapに展開する**"Plot GPS" functionノード**と、地図のパンニング（移動）とズーミングをする**Move and Zoom" functionノード**を作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/5e32815f-d581-fbe7-361f-8563a1644351.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に最低限必要な**lat**、**lon**、**name**にマッピングします。（ついでにアイコンも設定します）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/b50f3af7-e56a-1307-d369-bbfe77292219.png)

###パンニングとズーミング（Move and Zoom）functionノードの作成
パンニングとズーミングを行うMove and Zoom functionの設定は下図の通りとなります。msg.payload.commandに緯度経度（lat, lon）を指定しパンニング、ズームサイズ（zoom）を指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/ae687fb9-2bb7-9f54-cafa-6d487e1e1476.png)

#動作確認
デプロイ![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/527a9c17-1e79-62e3-8d72-c2868b6ccd58.png)し、[Ctrl]+[Shift]+[m]キーを押すと、地図ダッシュボード画面に遷移します。
通常、Node-REDのURLがhttps://xxx.mybluemix.net/red の場合、地図ダッシュボードのURLはhttps://xxx.mybluemix.net/worldmap/ となります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/2ea7f2fe-5182-40ec-3766-14dd9060d44e.png)
GPS位置情報を元に位置更新する地図ビューアが作成できました。

worldmapノードには、他にもエリアや線の描画、ヒートマップなどの機能があります。[こちら](https://flows.nodered.org/node/node-red-contrib-web-worldmap)を参考にしてください。

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)