はじめに

某SNSのNode-RED User Groupにて...
node-red-contrib-web-worldmapで地図を表示するとイギリスが一瞬表示される
という質問がありました。

解決方法としては
ブラウザ側で動作するJavaScriptに座標が埋め込まれているのでworldmap.jsを書き換えると良い。
ということでした。

ソースを書き換えずに初期位置を自由に変えられるようになったら嬉しいよなぁ....
と考えて、解決できたので、この記事を書くことにしました。

■ (1) 現象

イギリスの地図が短時間表示されて、違う位置の地図が表示に切り替わる。
(通信の状況によっては、イギリスの地図が表示されない事もあります)

おおよそ下記のような動作となっていました。
(1-1)→(1-2)で異なる地図が見えるので、チラついて違和感を感じるみたいですね。

JavaScriptに埋め込まれている情報をもとに白黒のイギリスが表示される。

表示位置と拡大率を取得し、改めてフローで設定してある地図を更新する。

動作について、３点ほど修正してあります。

下記の方針としました。
(1-1)で、希望する地図を表示してくれないのは明白なので(1-1)での地図表示をやめる。
(1-2)は、正常時は必ず発生するので、このタイミングで地図を表示する。

下記のようなメッセージをworldmapフローに入力すると、地図の表示位置を変更することができます。
この値を記憶しておき、新しくworldmapを開いたユーザーは最後に送信したcommandの値で初期表示されるようになります。


msg.payload = { 
    command : { 
        lat:36.68946, 
        lon:139.69187, 
        zoom:12
    } 
};
return msg;

ただし、_sessionid が設定されている場合は、セッションごとの個別指示なので記憶しません。
また、セッションはブラウザをリロードすると新規生成されて再接続を認識できないので
セッション間の情報記録はしない事としました。

msg.payload.command を利用するとworldmapを開いているユーザー全ての表示位置が変わってしまいます。
そこで初期表示位置だけを更新し、新しくworldmapを開く人の初期表示位置を更新できる命令を追加しました。

msg.payload = { 
    preset : { 
        lat:36.68946, 
        lon:139.69187, 
        zoom:14
    } 
};
return msg;

公式には修正が取り込まれていませんので、下記手順でプログラムを置き換える必要があります。
ソースコードを直接修正しても構いません

おおよそ下記の手順で、導入します。

環境により場所が異なりますので、ご注意を！

$ cd ~/.node-red/node_modules

$ mv node-red-contrib-web-worldmap node-red-contrib-web-worldmap_org

$ git clone -b initial-position https://github.com/t-kawamorita/RedMap.git node-red-contrib-web-worldmap

$ cd node-red-contrib-web-worldmap
$ npm install

普段の手順でNode-REDを再起動してください。
下記はRaspberry PI4を利用したときのコマンド例です。

$ node-red-start

個人的には、これで良いのでは？と考えて修正してみました。
使い方の勘違いから、間違った修正をしているよ！ということがあればコメントを頂けると嬉しいです。

ソースは、こちらです。
差分を確認したい場合は、こちらです。

少しご意見を頂いてからプルリクエストを出してみようと思います。