はじめに
地図上にリアルタイムにデータを表示したい！！
この時にHERE Maps API for JavaScriptにて達成できそうなのかを調査した。
完成像
リアルタイム・ジオインフォマティクス（HERE Maps API と 時系列データCLOUDSHIP API を使って、地図上にリアルタイムデータ表示）
1章：調査 🔍
Q1.地図上に吹き出しを出すことができるか
地図上に任意のオブジェクトを表示する方法は３つ。
1.SVG marker ー SVG画像を表示する。
2.DOM marker ー HTML要素を表示する。
3.情報吹き出し ー マーカーをクリックすると表示ウィンドウが開く。
-
1.2については、マーカーそのものの型を変えて表示をする方法である。
【公式】Developer Guide: Add markers
https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/marker-objects.html -
3については、マーカーをクリックすると開く吹き出しである。
【公式】Opening an infobubble
https://www.here.com/docs/ja-JP/bundle/open-infobubble/page/README.html
今回は表示する情報量が多めの想定なので、閉じたり開いたりできる、
3.情報吹き出し を採択した。
Q2.地図上に変化するデータを動的に表示できるのか
カクカクしたりチラついたりはしないのか？
時計を表示したところシームレスに動くように表示された。
Q3.細かなレイアウト調整をできるのか
下記の「City」や「Liverpool」の吹き出し型のレイアウトが素のデザイン。
自分でコントロールしたい場合CSSで強制的に上書き調整できることを確認した。
/* HERE内のCSS定義を上書きする */
.H_ib_body {
background: rgba(255, 255, 255, 0) !important;
box-shadow: 0px 0 0px 0 rgba(255, 255, 255, 0) !important;
}
ちょっと難しかったところ
Q4.吹き出し（infoBubble）を最初から開きたい
Stateの概念があるため、
obj.Marker.setState("OPEN")のようなコードで解決できるかと思いきや効かない。
infobubbleオブジェクトもCLOSE後にはundefinedになってしまう。
マップ上の全てのマーカーを取得できたので、このようにforEach文でグループ全てに対しtapイベントを発行することで対応した。
group.forEach((obj, i) => {
obj.dispatchEvent("tap");
});
Q5.吹き出し（infoBubble）を閉じて開いた後に、数値がHTMLに代入されなくなってしまう。
開発者ツールで覗いてみると閉じた後にinfobubbleのHTML要素が残留していることがわかった。
残留していることにより、新しく生成した要素の数値が書き換わらない。
なので、削除コードを入れておくことで解決した。
bubble.addEventListener("statechange", async (evt) => {
// 閉じた時の動作
if (evt.target.getState() === H.ui.InfoBubble.State.CLOSED) {
// Interval CSAPI取得処理定期実行を停止する。
clearTimeout(intervalId);
ui.removeBubble(bubble);
}
});
完成
時間経過でセンサーから数値が入ってくれば自動で画面が更新されるようになりました。
余談
Altキーで地図をグリグリ３Ｄに動かせるのカッコ良い。
お役立ちリンク集
【公式】Developer Guide: Add markers
https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/marker-objects.html
【公式】Maps API for JavaScript の例
https://www.here.com/docs/ja-JP/category/here-sdk-for-js-examples
完成しました
リアルタイム・ジオインフォマティクス（HERE Maps API と 時系列データCLOUDSHIP API を使って、地図上にリアルタイムデータ表示）