はじめに
某SNSのNode-RED User Groupにて...
node-red-contrib-web-worldmapで地図を表示するとイギリスが一瞬表示される
という質問がありました。
解決方法としては
ブラウザ側で動作するJavaScriptに座標が埋め込まれているのでworldmap.jsを書き換えると良い。
ということでした。
ソースを書き換えずに初期位置を自由に変えられるようになったら嬉しいよなぁ....
と考えて、解決できたので、この記事を書くことにしました。
■ (1) 現象
イギリスの地図が短時間表示されて、違う位置の地図が表示に切り替わる。
(通信の状況によっては、イギリスの地図が表示されない事もあります)
おおよそ下記のような動作となっていました。
(1-1)→(1-2)で異なる地図が見えるので、チラついて違和感を感じるみたいですね。
(1-1) ブラウザで worldmap にアクセスする。
JavaScriptに埋め込まれている情報をもとに白黒のイギリスが表示される。
(1-2) ブラウザがバックエンド(Node-RED)とWebSocket通信を開始する。
表示位置と拡大率を取得し、改めてフローで設定してある地図を更新する。
■ (2) 修正概要
動作について、３点ほど修正してあります。
(2-1) チラつきの解消
下記の方針としました。
(1-1)で、希望する地図を表示してくれないのは明白なので(1-1)での地図表示をやめる。
(1-2)は、正常時は必ず発生するので、このタイミングで地図を表示する。
(2-2) 初期表示位置を記憶する
下記のようなメッセージをworldmapフローに入力すると、地図の表示位置を変更することができます。
この値を記憶しておき、新しくworldmapを開いたユーザーは最後に送信したcommandの値で初期表示されるようになります。
msg.payload = {
command : {
lat:36.68946,
lon:139.69187,
zoom:12
}
};
return msg;
ただし、_sessionid が設定されている場合は、セッションごとの個別指示なので記憶しません。
また、セッションはブラウザをリロードすると新規生成されて再接続を認識できないので
セッション間の情報記録はしない事としました。
(2-3) 初期位置更新メッセージ(preset)を追加
msg.payload.command を利用するとworldmapを開いているユーザー全ての表示位置が変わってしまいます。
そこで初期表示位置だけを更新し、新しくworldmapを開く人の初期表示位置を更新できる命令を追加しました。
msg.payload = {
preset : {
lat:36.68946,
lon:139.69187,
zoom:14
}
};
return msg;
■ (3) 導入手順
公式には修正が取り込まれていませんので、下記手順でプログラムを置き換える必要があります。
ソースコードを直接修正しても構いません
おおよそ下記の手順で、導入します。
(3-1) Node-REDのデータフォルダに移動します。
環境により場所が異なりますので、ご注意を！
$ cd ~/.node-red/node_modules
(3-2) node-red-contrib-web-worldmap を念のためバックアップします。
$ mv node-red-contrib-web-worldmap node-red-contrib-web-worldmap_org
(3-3) 対策を行った node-red-contrib-web-worldmap を取得します。
$ git clone -b initial-position https://github.com/t-kawamorita/RedMap.git node-red-contrib-web-worldmap
(3-4) 必要なライブラリをインストールします。
$ cd node-red-contrib-web-worldmap
$ npm install
(3-5) Node-REDを再起動します。
普段の手順でNode-REDを再起動してください。
下記はRaspberry PI4を利用したときのコマンド例です。
$ node-red-start
■ (4) 終わりに。
個人的には、これで良いのでは？と考えて修正してみました。
使い方の勘違いから、間違った修正をしているよ！ということがあればコメントを頂けると嬉しいです。
ソースは、こちらです。
差分を確認したい場合は、こちらです。
少しご意見を頂いてからプルリクエストを出してみようと思います。