地図が真っ白のまま出ない
― ピンだけ見えるときに疑う3つ

スタンプラリーの画面を作っているときに、店のピンは正しい位置に出るのに、地図そのものが真っ白という状態になりました。

これがいちばん気づきにくい壊れ方です。ピンが出ている＝地図は動いている、と思ってしまう。 実際には、地図は「作られたが、絵を描き始めていない」だけでした。

原因は3つあった

1. 置き場の高さが0のまま地図を作っていた

画面いっぱいに広げる作りだと、最初の一瞬だけ高さが0になることがあります。 その状態で地図を作ると、地図は「大きさ0の場所に描く」と判断して、そのあと大きくなっても描き直しません。

置き場に実際の寸法が付くまで待ってから作る、に変えました。

2. 画面遷移の最中に作っていた

ページの切り替えを滑らかに見せる仕組み（View Transitions）を入れていました。 この切り替えの最中は描画が止まります。その間に地図を作ると、 タイルの読み込みが始まらないまま固まります。

切り替えが終わってから作る、に変えました。

3. 裏のタブで開かれていた

リンクを別タブで開いた場合など、見えていない状態でページが読み込まれます。 このときブラウザは描画の処理を止めるので、地図も動き出しません。

見えるようになってから作る、に変えました。 ただし待ち続けないのが大事で、数秒たったら作ってしまい、 前面に戻ったときに描き直します。ここで待ち続けると、 「開いたら真っ白」という別の事故になります。

共通しているのは「描画のきっかけ待ち」

3つとも、地図が悪いのではありません。「描画が動いている前提」で組んだ初期化が、動いていない瞬間に走っただけです。

現地で使う画面なので、これは致命的です。参加者は店の前で立ち止まって、 真っ白な画面を見ることになる。しかもこちらの手元では再現しません。 手元は常に前面のタブで、画面はもう表示されているからです。

あとから足した、拡大できない問題

同じ画面で、もう1つありました。ホイールを回しても拡大せず、少し動いて戻る。

原因は地図の設定ではなく、範囲を合わせ直す処理が描画のたびに走っていたことでした。 拡大する → 画面が更新される → 「全部のピンが入る範囲」に戻される、の繰り返しです。

この手の「操作できない」は、たいてい外の状態を書き戻す処理が原因です。 地図・動画・スクロール位置のように利用者が動かせるものを扱うときは、 こちらから書き戻す処理がどれくらいの頻度で走るかを必ず見ます。

今の状態

地図はデモで実際に触れます。ピンは店の写真で、拡大すると重なりがほどけ、 重なっている件数は左上に出ます。デモから、そのままご覧ください。 企画としての組み方はスタンプラリーに書いています。