HAIZUでは、地図を動かしても、火山灰の色が付いた領域は同じ場所に重なったまま動きます。時間バーを動かすと色の見え方が変わり、地点を押すとその場所の情報を確認できます。地図アプリとしては自然な動きですが、どのように作っているのでしょうか。
仕組みの中心は、背景地図に、位置の情報を持たせた半透明の降灰画像を重ねることです。地図そのものを書き換えているわけではありません。地図、降灰の画像、選択した地点の印を別々に用意し、同じ位置にそろえて表示します。
第2回では、ブラウザとサーバー、計算、保存の役割を説明しました。第3回は、その中の「地図に結果を見せる部分」を掘り下げます。座標や格子という言葉も、画面と図を照らし合わせながら説明していきます。
シリーズの入口：紹介・第0回：HAIZUの完成画面と開発ログ
前回：第2回：画面・サーバー・計算係の役割は？アプリ全体の仕組みを図解
HAIZUは防災学習・参考情報のためのアプリです。実際の噴火や降灰を予測するものではなく、避難や地点の安全性の判断には使えません。この記事で扱うのは表示の仕組みです。地図の上に画像が正しく重なることと、モデルの予測精度が検証されたことは区別します。
背景地図と降灰分布は、別のデータとして用意する
まず、HAIZUの画面を見てみます。道路や地名などの背景の上に、青、緑、黄、赤系の色が重なっています。この背景と色付きの部分は、同じデータではありません。
背景には、国土地理院の淡色地図を使っています。「タイル」と呼ばれる小さな画像を、表示している場所や拡大率に合わせて取得し、つなげて見せる方式です。遠くへ地図を動かすと、その場所に必要なタイルを読みます。地図の種類と出典は、国土地理院のタイル一覧で確認できます。
一方、通常の実計算結果で重ねる降灰分布は、HAIZU側で作るPNG画像です。道路や地名を描き込む画像ではなく、その時刻の量を色へ置き換え、背景を透かして見せるための画像になっています。
地図を描く道具にはMapLibre GL JSを使っています。MapLibreは、背景のタイルを表示し、操作に合わせて位置を動かし、別の画像や地点の印を重ねる担当です。HAIZUで計算した数値を、MapLibreが独自に火山灰の分布へ計算し直しているわけではありません。
この分担が分かると、画面を見る視点も変わります。背景地図が細かく表示されていても、降灰の計算まで同じ細かさになっているとは限りません。道路が見えることと、道路一本ごとの降灰量を計算できていることは、別の話です。
レイヤーは、透明なシートを重ねるような仕組み
地図表示で出てくる「レイヤー」は、情報を描く層のことです。透明なシートに別々の内容を描き、順番に重ねるイメージで考えるとつかみやすくなります。
HAIZUでは、基本となる背景地図の上に降灰画像を置き、さらに選択した地点の印を手前に表示します。降灰画像を完全に不透明にしてしまうと、地名や道路が隠れて場所を読み取りにくくなるため、透けて見えるようにしています。
実装では、元になるデータを登録する「ソース」と、そのデータをどう描くかを決める「レイヤー」を分けます。画像ファイルと四隅の座標を持つのがソース、表示の濃さや重ねる位置を扱うのがレイヤー、と整理できます。
たとえば、選択地点を降灰画像より奥に置くと、色の強い場所で印が見えにくくなるかもしれません。そのためHAIZUでは、降灰のレイヤーを選択地点のレイヤーより下に追加しています。どのデータがあるかに加え、どの順番で見せるかも地図の使い勝手に関わります。
ただし、現実の高さに合わせて三次元のシートを浮かべているわけではありません。ここでの重なりは、画面へ描く順序の説明です。地形の色を重ねる機能もありますが、その見た目を加えることと、降灰計算に細かい地形を組み込むことも別になります。
降灰画像を置く場所は、四隅の座標で指定する
PNG画像を受け取っただけでは、地図のどこに置く画像なのか分かりません。写真ファイルだけ渡されても、その写真がどこで撮られたのかは別に必要になるのと似ています。
HAIZUの実計算結果では、表示の案内書であるmanifestに、画像を置く四隅の座標を持たせています。MapLibreのImageSourceへ、画像とこの座標を組み合わせて渡します。四隅は、画像の左上から時計回りに対応させます。仕様はMapLibreのImageSourceの説明でも確認できます。
| 画像の角 | 富士山版で対応する範囲の角 | 座標の表し方 |
|---|---|---|
| 左上 | 西端・北端 | ［西の経度、北の緯度］ |
| 右上 | 東端・北端 | ［東の経度、北の緯度］ |
| 右下 | 東端・南端 | ［東の経度、南の緯度］ |
| 左下 | 西端・南端 | ［西の経度、南の緯度］ |
ここで気をつけたいのが、MapLibreの座標は［経度、緯度］の順番だという点です。「緯度・経度」という言い方に慣れていると、順番を逆にしやすいところです。二つとも数字なので、コードが書けたように見えても、意図した場所に表示できるとは限りません。座標の順序はLngLatの公式説明にも明記されています。
また、四隅の対応を間違えると、画像の向きが変わったり、ねじれたような配置になったりします。富士山のマーカーだけが正しい位置にあっても、降灰画像の配置まで正しいことにはなりません。マーカーと画像は、それぞれ別の座標情報で配置するためです。
地図を動かしたときに降灰画像が同じ場所についてくるのは、この地理的な位置に結びついているからです。画面の左から何ピクセルという固定位置へ貼っているわけではありません。画面上の位置を更新する仕事は、地図ライブラリが担当します。
格子の数字を画像にする。拡大しても計算の細かさは増えない
降灰画像の元は、格子状に並んだ数値です。対象範囲をマス目に分け、それぞれのマスに堆積量を持たせています。HAIZUの実計算結果を扱う格子は192×160、合計30,720セルです。ここでいうセルは、一つのマス目を指します。
画像を作るときは、各セルについて、その時刻の量と仮定した密度から厚さを求め、対応する色を画素へ設定します。細かい計算式は後の回で扱いますが、今回は「数字の並びを、同じ並びの色へ変換する」と考えるとよいと思います。
横方向は西から東へ進め、画像の上側は北、下側は南に対応させます。縦方向にはもう一つ注意があり、Web地図で使うメルカトル投影に合わせた位置の計算をしています。投影とは、丸い地球を平面の地図へ表す方法です。
詳しい数式を覚える必要はありません。「画像を縦に等分した場所」と「緯度の数字を単純に等分した場所」が、必ずしも同じにならないことを押さえてください。四隅だけ正しくても、画像の中のマス目の並べ方が地図と合っていなければ、内部の位置関係がずれてしまいます。
また、地図を拡大すると、道路や建物など背景の情報が詳しく見えることがあります。しかし、元の降灰格子に新しい計算点が追加されるわけではありません。色が滑らかに見えたり、画面上で大きく描かれたりしても、元データの解像度はそのままです。
そのため、画像で一軒ずつの家まで確認できるように見えても、家ごとに異なる降灰量を求めた結果とは読めません。背景地図の細かさ、画像の描画、計算格子の細かさを分けて説明することが、学習用の地図では欠かせません。
色は灰の見た目ではなく、厚さの区分を表す
HAIZUの青や緑は、実際の火山灰がその色をしているという意味ではありません。選んだ時刻の累積堆積厚を読みやすくするための区分です。元の堆積質量を、仮定した火山灰の密度で厚さへ換算し、色を決めています。
たとえば、説明用に堆積質量を100kg/m²、密度を1,000kg/m³とすると、厚さは0.1m、つまり10cmになります。これは単位の関係を示すための例で、特定の場所の降灰結果ではありません。同じ質量でも、仮定する密度が変わると、換算した厚さは変わります。
現行の画像生成では、おおむね次の区分を使っています。透明になる下限もあるため、画面の凡例にある最小の区分と、実際に色が見え始める値は分けて読む必要があります。
| その時刻の厚さ | 画像での扱い |
|---|---|
| 0.03cm未満 | 透明 |
| 0.03cm以上、0.5cm未満 | 淡い青系。0.15cm未満では透明度も調整 |
| 0.5cm以上、2cm未満 | 青系 |
| 2cm以上、10cm未満 | 緑系 |
| 10cm以上、30cm未満 | 黄系 |
| 30cm以上、50cm未満 | 橙系 |
| 50cm以上 | 赤系 |
ここから分かるのは、同じ色だからといって、まったく同じ厚さとは限らないということです。2cmと9cmは、どちらも緑系の区分に入ります。広がりをつかむには色が役立ちますが、気になる地点の数値は、地点の情報で確認する設計にしています。
また、透明な場所を「灰がまったくない」「安全だ」と読んではいけません。表示の下限、選んだ時刻、計算対象の範囲などが関係します。そもそも学習用モデルの仮定にも制約があります。色は、条件付きの結果を読む手がかりです。
表示の濃さを変えても、計算した降灰量は変わらない
背景を見やすくしたいときのために、HAIZUには「降灰レイヤーの濃さ」を変える設定があります。ここは、入力条件にある火山灰の密度と混同しやすい部分です。
このスライダーが変えるのは、地図へ重ねる画像の見え方です。元の格子にある数字を書き換えたり、Tephra2で計算し直したりする操作ではありません。同じ結果・時刻・地点であれば、レイヤーの濃さだけを動かしても、地点の数値を変える理由にはなりません。
さらに、画像そのものにも透明度があります。厚さが小さい領域を薄くする処理と、レイヤー全体を薄くする設定が重なって、最終的な見た目になります。背景の色も混ざるので、画面上の色だけを見て正確な数値へ逆算する使い方には向きません。
一方、火山灰の密度は、堆積質量を厚さへ換算する際の仮定です。こちらを変えると厚さの数値が変わり、色の区分が変わる場合もあります。「見せ方の設定」と「結果の数値に関わる条件」は、画面上でも説明上でも分けて扱います。
時間を進めると、地図を作り直さず画像を差し替える
時間バーを動かすたびに、地図の本体を作り直す必要はありません。通常の実計算結果では、表示する時刻に対応する画像を受け取り、同じ降灰ソースの画像を更新します。
HAIZUの実装では、MapLibreのupdateImageを使って、画像と配置の座標を更新します。背景地図の現在位置や拡大率は保ったまま、その上の結果を変えられます。画像の切り替え時に余計なフェードを入れない設定も、降灰のレイヤー側で指定しています。
ブラウザが明示的に先読みするのは、表示中の時刻の前後1枚です。条件や結果のIDが変わった場合には、前の参照をそのまま使い続けないように整理します。画像の先読みと、ブラウザ自身が行う通信のキャッシュは別の仕組みです。速度を支える工夫は、第7回でまとめて扱います。
初期の操作体験用デモでは、ブラウザ内のCanvasで作った画像を渡す経路もあります。見た目が似ていても、実計算のPNGとダミー画像では根拠が違います。デモの画像が動いたことを、実モデルの結果が取得できた確認にしてはいけません。
なお、ここで差し替えているのは「選んだ時刻までに積もった量」の表示です。画面上の色が広がる動きを、空中の灰の粒を一つずつ追跡した動画と受け取らないことも必要です。時間表現の近似については、第6回で詳しく説明する予定です。
地点を押したときは、画像の色ではなく元の数値を読む
地図のどこかを押すと、MapLibreからその場所の経度と緯度を受け取れます。HAIZUは、その位置と選んだ時刻を使って、元の格子に対応する値を確認します。
画面に描かれた色を拾って「緑だから何cm」と決めるわけではありません。色には区分があり、半透明の合成も入るからです。地点の数値は元データから求め、選択した位置の印は別のレイヤーへ描きます。
ここでは、位置と格子を対応させる処理が、画像を作るときの並びと一致している必要があります。画像は北を上に作っているのに、地点照会だけ南から数えると、違う場所の値を返してしまいます。正常に数字が返ってきても、対応する場所が違えば意味がありません。
また、計算範囲の外側を押したときに、勝手に0を返さないことも大切です。「計算していない」と「計算した結果が0」は、同じではありません。HAIZUでは範囲外の地点を区別し、その旨を伝える設計にしています。
確認するときは、マスの中心に対応する座標から同じマスへ戻れるか、範囲外を区別できるかを見ます。これは画像の美しさだけでは分からない確認です。表示と数値のつなぎ目を、別に確かめる必要があります。
公式ハザードは、降灰画像とは別の形で重ねる
HAIZUでは、独自のシミュレーションだけでなく、公式の降灰可能性マップも表示します。ただし、独自計算の画像を紫色へ塗り替えたものではありません。
公式資料は事前にGeoJSONへ変換しています。GeoJSONは、地点や線、範囲などを座標の並びで表す形式です。HAIZUでは範囲を表すポリゴンを読み、その内側を塗るレイヤーで表示します。PNGのように、一枚の画像として四隅を指定する経路とは違います。
タブを切り替えると、独自シミュレーションの画像を隠し、公式資料のレイヤーを見せます。独自計算の量の区分と、公式資料の想定範囲を、一つの凡例で混ぜないためです。出典や注意書きも、それぞれに対応させています。
公式データの取得・変換・更新方法は第8回で扱う予定です。今回は「地図に重なるものは、すべて同じ形式とは限らない」と覚えておくと十分です。画像を置く、範囲を塗る、地点の印を置くという違いが分かれば、レイヤーを選ぶ考え方につながります。
地図が表示された後に、どこを確認するか
地図アプリは、色が出た瞬間に完成したように感じやすいところがあります。しかし、画像が表示されたことだけでは、場所や数値との対応まで確かめたことにはなりません。HAIZUの実装を読む際にも、次の対応を順に見ると整理できます。
- 位置：画像の四隅の順序、経度と緯度の順序、画像内部の並びが合っているか。
- 時刻：時間表示と、重ねている画像・地点値が同じ時刻を指しているか。
- 色：厚さの単位、色の境界、透明な部分の意味を説明できるか。
- 表示設定：濃さを変える操作と、結果の数値を変える条件を混同していないか。
- 情報の種類：デモ、実計算、公式ハザード、範囲外を区別しているか。
この考え方は、降灰以外にも使えます。人口分布、気温、混雑などを地図に重ねる場合も、背景の細かさとデータの細かさ、色の区分と元の数字は別です。利用者が「何を見ているか」を読み取れるように、地図と説明を一緒に設計します。
公開した第4回では「スマホでも使いやすい操作画面を考える」をテーマに、地図を見せる面積、時間操作の折りたたみ、条件入力の配置を、スマホ幅の実画面4枚で説明しています。
HAIZU開発シリーズ
紹介・第0回：HAIZUの完成画面と開発ログ
第1回：アプリを作る前に、何を決めたのか？
第2回：画面・サーバー・計算係の役割は？
第3回：地図に火山灰の広がりを重ねるには？（この記事）
第4回：スマホでも地図を見やすくするには？折りたたみと操作画面の設計
HAIZUをブラウザで開く ／ 使い方とシミュレーションの前提を読む
本記事は2026年10月18日に確認した実装をもとにしています。地図と公式ハザードのキャプチャは2026年10月14日の富士山版を再掲し、表示設定は2026年10月18日に撮影しました。図解は本記事用に作成しています。実際の火山活動については、気象庁の火山情報や自治体の案内を確認してください。
参考情報
- MapLibre GL JS公式：ImageSource：画像、四隅の座標、画像更新の仕組み。
- MapLibre GL JS公式：LngLat：経度・緯度の扱いと配列の順序。
- 国土地理院：地理院タイル一覧：背景地図の種類と出典。
- HAIZUの使い方とシミュレーションの前提：表示の読み方とモデルの限界。
