国土地理院 さんが公開されている 地理院地図 と、 Web 上で地図画像を動的に表示するための JavaScript ライブラリ Leaflet を使って、 自分の住んでいる地域の Web 版の津波ハザードマップを作ってみましたので、作成手順を残しておきます。

少し手間はかかりますが、コツコツ作っていけば、ご自分の地域のハザードマップを自作できます。 また、ハザードマップ以外にも色々と活用できる場面があると思いますので、是非お試しください。

以下の大変有益なリソースをお借りしました。厚く御礼申し上げます。

• 地理院地図

  国土地理院さんが公開されているウェブ地図です。

  • データをご利用の際には、測量法に基づいて複製又は使用の承認申請が必要となる場合があります。
  • なお、国土地理院のサーバ上にある地理院タイルを、リアルタイムで読み込み表示するソフトウェアやアプリケーションを製作する場合、 地理院タイルは出典の明示のみで申請不要でご利用いただけます。 出典は、「国土地理院」または「地理院タイル」等と記載していただき、地理院タイル一覧ページ（http://maps.gsi.go.jp/development/ichiran.html）へのリンクを付けてください。

  Web で閲覧する場合、上記第 2 項の「リアルタイムで読み込み表示するソフトウェアやアプリケーション」に該当するため、 出典の明示のみで利用することができます。

  なお、ハザードマップを自作される場合など、ご利用に際しては必ず以下をご一読くださいませ。

  • 地理院タイル一覧
  • 地理院タイルのご利用について
  • 国土地理院の地図の利用手続

• gsimaps (地理院地図)

  地理院地図 のソースです。
  国土地理院さんにより GitHub で公開されています。

• スタイルつき GeoJSON 規約

  地理院地図の「作図・ファイル」ツールが出力する GeoJSON 形式のデータのフォーマット規約と表示のためのサンプルです。
  国土地理院さんにより GitHub で公開されています。

• 「写植ルームツボタ」 様

  このページを作成する際に、マウスのイラストを「無料イラスト素材倉庫」からお借りしました。 どうもありがとうございます。

• 赤野地区津波ハザードマップ（PDF）

  高知県安芸市が公開している赤野地区の津波ハザードマップです。
  津波ハザードマップ（Web版）を作成する際の元データとして利用させていただきました。

  ※現時点の最新である2014年02月24日版を参照しました。

地理院タイルと Leaflet を使った Web で閲覧できるハザードマップ を参照ください。

• 「作図・ファイル」ツールの使い方
• 津波ハザードマップ（Web版）とレイヤ（層）
• 津波ハザードマップ（Web版）の作成時の注意点
  • 地図画像間の「ずれ」について
  • 地図画像のズームレベル毎の表示の確認について
  • レイヤ（層）の区分について
• レイヤデータ（作図情報）作成時の TIPS
  • 編集モードを使う
  • 作業を小分けにする
  • 時々保存する
  • 動作がおかしくなったとき
• 各レイヤのデータ（作図情報）を作成する
  • 「一時避難場所」レイヤのデータを作成する
  • 「一時避難場所（ラベル）」レイヤのデータを作成する
  • 「要注意箇所」レイヤのデータを作成する
  • 「要注意箇所（ラベル）」レイヤのデータを作成する
  • 「急傾斜地崩壊危険箇所」レイヤのデータを作成する
  • 「ため池危険箇所」レイヤのデータを作成する
  • 「避難経路」レイヤのデータを作成する
  • 「避難経路（進行方向）」レイヤのデータを作成する
  • 「標高点」レイヤのデータを作成する
  • 「標高点（ラベル）」レイヤのデータを作成する
  • 「津波浸水想定区域」レイヤのデータを作成する
  • 「水場」レイヤのデータを作成する
  • 「注釈等」レイヤのデータを作成する
• 津波ハザードマップ（Web版）を公開する
  • リソースのダウンロードと展開
  • ZIP ファイルの内容
    • [data] フォルダ
    • hazmap_akano.html
    • hazmap.php
    • その他のファイル・フォルダ
  • 地区のレイヤデータを格納する
    • フォルダの作成
    • 作成済みのレイヤデータをコピー（上書き）
  • マップ表示のための座標情報を準備する
  • 設定を行う
    • HTML 版での設定
      • マップ表示用の html ファイルを作成する
      • タイトルを設定する
      • レイヤデータを格納したフォルダ名への相対パスを設定する
      • 座標を設定する
      • 設定を保存する
    • PHP 版での設定
      • タイトルを設定する
      • 座標を設定する
      • 設定を保存する
  • 不要なファイルを削除する
    • HTML 版を利用する場合に不要なファイル
    • PHP 版を利用する場合に不要なファイル
  • Web サーバにアップロードする
  • ブラウザからの閲覧
  • ローカルでの動作確認
• その他の設定
  • マップに表示するタイル情報（地図画像）
    • HTML 版
    • PHP 版
  • ズームレベル
    • HTML 版
    • PHP 版
  • レイヤデータ
    • HTML 版
    • PHP 版
  • コントローラ（レイヤのチェックボックス）
    • HTML 版
    • PHP 版

「作図・ファイル」ツールの使い方の補足を 地理院地図の「作図・ファイル」ツールの使い方の補足 にまとめましたので、国土地理院さんが公開されている 地理院地図 操作マニュアル と、あわせてご覧ください。

津波ハザードマップ（Web版）が、地図画像を動的に表示するために使用している JavaScript ライブラリ Leaflet では、 レイヤ（層）機能を使って、地図画面の表示を何層（レイヤ）にも分け、 各レイヤ（層）毎に地図画像や図形を設定・表示できます。

津波ハザードマップ（Web版）では、地理院地図の地図画像のレイヤの上に、「一時避難場所」などの各レイヤを重ねて表示しています。

各レイヤの作図情報は、事前に 地理院地図 の「作図・ファイル」ツールで個々に作成し、 GeoJSON 形式でファイルに保存しておき、 津波ハザードマップ（Web版）表示時に、ファイルから読み込んで表示しています。

以下の作成手順では、ベースマップに「簡易空中写真」の地図画像を表示した状態で図形の配置を行っています。

構造物等の位置は地図画像毎に若干違っており、図形配置後に他の地図画像に切り替えると、 地図画像上の構造物の位置と配置した図形の位置が、ずれる場合があります。

そのため、図形を配置する際は、最終的に表示したい地図画像に切り替えてから作業することをお勧めします。

例）「簡易空中写真」を表示した状態で橋の上に図形を配置した後、ベースマップを「標準地図」に切り替え

「簡易空中写真」で橋の上に図形を配置

「標準地図」に切り替え

地図画像が提供されるズームレベルであっても、特定の領域の画像が抜けていることがあります。 特に写真系の地図画像では、山間部などの画像がないことがあります。

図形を配置し始める前に、表示したいズームレベルの範囲で、図形を配置する領域全体に渡り、地図画像が正しく表示されるか確認しておくことをお勧めします。

津波ハザードマップ（Web版）では、図形を 13 のレイヤに分けて作成していますが、この分類には特に意味はありません。

図形を複数のレイヤに分けず、1 つのレイヤ（1 つの GeoJSON 形式ファイル）で構成しても構いませんし、レイヤをさらに増やしても構いません。 また、図形の種類やポップアップ表示（吹き出し）される情報も、下記の作成手順にとらわれず、地理院地図 の「作図・ファイル」ツールを使ってお好みのままに作成してください。

一度に大きな領域を作図するのは大変です。 例えば、「津波浸水想定区域」（「津波浸水想定区域」レイヤのデータを作成する）は、 ひとつの領域が広いため、はじめから細かい点まで指定して一気に作成するのは、かなり苦痛です。

まずおおまかに領域を作図してから、一旦作図を完了後、編集モードで、点を移動・追加・削除しながら形を整えていくと、比較的楽に作業できます。

細かいところは気にせず、おおまかに作図する

一旦作図を完了後、編集モードで点を移動・追加・削除しながら細かいところを整えていく

上記の「津波浸水想定区域」は領域が大きく、また、「標高点」（「標高点」レイヤのデータを作成する）では、 指定する「マーカー（アイコン）」の数が多く、ともに、一度にすべてを作成するのは大変ですし、根気も続きません。

疲れた時は、一旦作図を確定後、作図情報を保存しておき、 次に時間の空いた時に、保存しておいた作図情報を読み込み、続きを作図すれば、コツコツと作業することができます。

一旦作図を確定し、保存する

作図情報の保存の詳細については、作図情報の保存 を参照ください。

保存したファイル名は、次回読み込む時にわかりやすい名前に変更しておく

次に作業を開始する際は、保存しておいた作図情報を読み込む

「作図情報の読み込み」の詳細については、作図情報の読み込み を参照ください。

新たに作図した分もあわせて保存するには、表示されているレイヤすべてを保存する

保存したファイル名は、次回読み込む時にわかりやすい名前に変更しておく

不具合などでブラウザが突然終了してしまうことがないとはいえません。 その際、せっかく作図した情報も失われてしまいます。

時々は、作図情報を保存しながら、作業を進めてください。

作図中に動作がおかしくなった時は、一旦、作図を「確定」または「終了」してください。

現在作図中の図形の内容は失われるかもしれませんが、 他の確定済みの図形には影響しません。

例えば、作図中にうっかりキーボードの ESC キーを押したりすると、作図内容が消え、作図を続けることができなくなってしまいます。

このような状態になってしまうと、作図を「終了」するしかありません。

「ポリゴン」や「線」などで大きな領域を作図する際は、一度にやろうとせず、 時々、作図を「確定」後、編集モードを利用して作業すると、せっかくの作図内容を失う可能性を減らせます。

「マーカー（アイコン）」の位置を指定しようとしている

うっかりキーボードの ESC キーを押してしまい、位置が指定できなくなってしまった

「ポリゴン」を作図中

うっかりキーボードの ESC キーを押してしまい、作図内容が消えてしまった

各レイヤデータの作成は、地図画面上に空の「新規作図情報」レイヤのみ存在する状態（地理院地図の初期表示状態）で行い、 ベースマップを「簡易空中写真」に切り替えてから作図しています。

「一時避難場所」は「ポリゴン」（多角形領域）として作成し、ポップアップ表示がされるよう、名称・内容を設定します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「一時避難場所」を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」に赤を選択します。

「塗潰し色」に暗めの赤を選択します。

「名称」を設定します。

内容を設定します。

上図例では「自由文入力」に切り替えてから内容を設定しています。

<div>
<table>
<tr><td>高さ</td><td>14.9m</td></tr>
</table>
<div style='color:orange;'>可能な限り高台などへ避難</div>
</div>

文字のサイズや色などを指定しない場合は、「テーブル入力」のまま、下図例のように「項目名」と「値」に分けて設定することもできます。

内容の詳細については、以下を参照ください。

• ポップアップ表示（吹き出し）の内容（テーブル入力）
• ポップアップ表示（吹き出し）の内容（自由文入力）

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「一時避難場所」を作図していきます。

すべての「一時避難場所」の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "temporary_gathering_location.geojson" にリネームします。

「一時避難場所（ラベル）」はテキストとして作成し、「一時避難場所」の説明用テキストとして配置します。

「一時避難場所（ラベル）」を作成する位置を決めやすいよう、先に作成済みの「一時避難場所」の作図情報 "temporary_gathering_location.geojson" を読み込みます。

「作図・ファイル」パネルから「テキストを追加」を選び、「一時避難場所」のそばに「一時避難場所（ラベル）」を配置します。

上図例では文字の色に赤を指定しています。

<span style='color: red;'>赤野小学校</span>

例えば、改行を入れる場合には、以下のように指定することもできます。

<span style='color:orange;'>津浪警報<br />発令中は<br />より高くへ<br />避難</span>

枠線等を入れたければ、以下のような指定もできます。

<table style='opacity: 0.5; color:green; font-weight: bold; background-color:white; border: 1px solid black; padding: 2px;'>
<tr><td>3F・屋上</td><td>14.9m</td></tr>
<tr><td>1F</td><td>7.2m</td></tr>
</table>

「テキスト」の配置が完了したら、「確定」をクリックし、作図を確定します。

新たな「テキスト」を配置できる状態になるので、引き続き、別の「一時避難場所（ラベル）」を配置していきます。

すべての「一時避難場所（ラベル）」の配置が終わったら、「終了」をクリックして「テキスト」の作図を終了します。

配置した「一時避難場所（ラベル）」の作図情報（「新規作図情報」レイヤ）のみ保存できるよう、レイヤ一覧で "temporary_gathering_location.geojson" のチェックを外します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "temporary_gathering_location_label.geojson" にリネームします。

「要注意箇所」は「ポリゴン」（多角形領域）および「線」として作成し、ポップアップ表示がされるよう、名称を設定します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「要注意箇所」（ポリゴン）を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」に黄を選択します。

「塗潰し色」に暗めの黄を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「要注意箇所」（ポリゴン）を作図していきます。

すべての「要注意箇所」（ポリゴン）の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「線を追加」を選び、「要注意箇所」（線）を作図します。

「線」の作図が完了したら、「作図・ファイル」パネルで「線色」に黄を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「線」を作図できる状態になるので、引き続き、別の「要注意箇所」（線）を作図していきます。

すべての「要注意箇所」（線）の作図が終わったら、「終了」をクリックして「線」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "requires_special_attention_point.geojson" にリネームします。

「要注意箇所（ラベル）」はテキストとして作成し、「要注意箇所」の説明用テキストとして配置します。

「要注意箇所（ラベル）」を作成する位置を決めやすいよう、先に作成済みの「要注意箇所」の作図情報 "requires_special_attention_point.geojson" を読み込みます。

「作図・ファイル」パネルから「テキストを追加」を選び、「要注意箇所」のそばに「要注意箇所（ラベル）」を配置します。

<span style='color: orange;'>陸閘</span>

「テキスト」の配置が完了したら、「確定」をクリックし、作図を確定します。

新たな「テキスト」を配置できる状態になるので、引き続き、別の「要注意箇所（ラベル）」を配置していきます。

すべての「要注意箇所（ラベル）」の配置が終わったら、「終了」をクリックして「テキスト」の作図を終了します。

配置した「要注意箇所（ラベル）」の作図情報（「新規作図情報」レイヤ）のみ保存できるよう、レイヤ一覧で "requires_special_attention_point.geojson" のチェックを外します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "requires_special_attention_point_label.geojson" にリネームします。

「急傾斜地崩壊危険箇所」は「ポリゴン」（多角形領域）として作成し、ポップアップ表示がされるよう、名称を設定します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「急傾斜地崩壊危険箇所」を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」にオレンジを選択します。

「塗潰し色」に暗めのオレンジを選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「急傾斜地崩壊危険箇所」を作図していきます。

すべての「急傾斜地崩壊危険箇所」の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "steep_slope_collapse_hazard_area.geojson" にリネームします。

「ため池危険箇所」は「ポリゴン」（多角形領域）として作成し、ポップアップ表示がされるよう、名称を設定します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「ため池危険箇所」を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」に紫を選択します。

「塗潰し色」に暗めの紫を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「ため池危険箇所」を作図していきます。

すべての「ため池危険箇所」の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "pond_hazard_area.geojson" にリネームします。

「避難経路」は「線」として作成し、ポップアップ表示がされるよう、名称を設定します。

「作図・ファイル」パネルから「線を追加」を選び、「避難経路」を作図します。

「線」の作図が完了したら、「作図・ファイル」パネルで「線色」に緑を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「線」を作図できる状態になるので、引き続き、別の「避難経路」を作図していきます。

すべての「避難経路」の作図が終わったら、「終了」をクリックして「線」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "evacuation_route.geojson" にリネームします。

「避難経路（進行方向）」は「マーカー（アイコン）」として作成し、「避難経路」の進行方向を示すために配置し、 ポップアップ表示がされるよう、名称を設定します。

「避難経路（進行方向）」を作成する位置を決めやすいよう、先に作成済みの「避難経路」の作図情報 "evacuation_route.geojson" を読み込みます。

「作図・ファイル」パネルから「マーカー（アイコン）を追加」を選び、「避難経路」の上に「避難経路（進行方向）」を配置します。

「マーカー（アイコン）」の配置が完了したら、「作図・ファイル」パネルで「アイコン」に矢印の画像を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「マーカー（アイコン）」を配置できる状態になるので、引き続き、別の「避難経路（進行方向）」を配置していきます。

すべての「避難経路（進行方向）」の配置が終わったら、「終了」をクリックして「マーカー（アイコン）」の作図を終了します。

配置した「避難経路（進行方向）」の作図情報（「新規作図情報」レイヤ）のみ保存できるよう、レイヤ一覧で "evacuation_route.geojson" のチェックを外します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "evacuation_route_arrow.geojson" にリネームします。

「標高点」は「マーカー（アイコン）」として作成し、ポップアップ表示がされるよう、名称・内容を設定します。

「作図・ファイル」パネルから「マーカー（アイコン）を追加」を選び、「標高点」を配置します。

「マーカー（アイコン）」の配置が完了したら、「作図・ファイル」パネルで「アイコン」に中空きの赤い三角の画像を選択します。

「拡大率」を 0.5 に設定します。

「名称」を設定します。

内容を設定します。

「確定」をクリックし、作図を確定します。

新たな「マーカー（アイコン）」を配置できる状態になるので、引き続き、別の「標高点」を配置していきます。

すべての「標高点」の配置が終わったら、「終了」をクリックして「マーカー（アイコン）」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "altitude.geojson" にリネームします。

「標高点（ラベル）」はテキストとして作成し、「標高点」の説明用テキストとして配置します。

「標高点（ラベル）」を作成する位置を決めやすいよう、先に作成済みの「標高点」の作図情報 "altitude.geojson" を読み込みます。

「作図・ファイル」パネルから「テキストを追加」を選び、「標高点」のそばに「標高点（ラベル）」を配置します。

<span style='color: #ff0000;'>6.1m</span>

「テキスト」の配置が完了したら、「確定」をクリックし、作図を確定します。

新たな「テキスト」を配置できる状態になるので、引き続き、別の「標高点（ラベル）」を配置していきます。

すべての「標高点（ラベル）」の配置が終わったら、「終了」をクリックして「テキスト」の作図を終了します。

配置した「標高点（ラベル）」の作図情報（「新規作図情報」レイヤ）のみ保存できるよう、レイヤ一覧で "altitude.geojson" のチェックを外します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "altitude_label.geojson" にリネームします。

「津波浸水想定区域」は「ポリゴン」（多角形領域）として作成し、ポップアップ表示がされるよう、名称を設定します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「津波浸水想定区域」を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」に青を選択します。

「塗潰し色」に暗めの青を選択します。

「名称」を設定します。

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「津波浸水想定区域」を作図していきます。

すべての「津波浸水想定区域」の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "tsunami_inundation_assumption_area.geojson" にリネームします。

「水場」は「ポリゴン」（多角形領域）および「線」として作成します。

「作図・ファイル」パネルから「ポリゴンを追加」を選び、「水場」（ポリゴン）を作図します。

「ポリゴン」の作図が完了したら、「作図・ファイル」パネルで「線色」に水色を選択します。

「塗潰し色」に暗めの水色を選択します。

「確定」をクリックし、作図を確定します。

新たな「ポリゴン」を作図できる状態になるので、引き続き、別の「水場」（ポリゴン）を作図していきます。

すべての「水場」（ポリゴン）の作図が終わったら、「終了」をクリックして「ポリゴン」の作図を終了します。

「作図・ファイル」パネルから「線を追加」を選び、「水場」（線）を作図します。

「線」の作図が完了したら、「作図・ファイル」パネルで「線色」に水色を選択します。

「確定」をクリックし、作図を確定します。

新たな「線」を作図できる状態になるので、引き続き、別の「水場」（線）を作図していきます。

すべての「水場」（線）の作図が終わったら、「終了」をクリックして「線」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "water_area.geojson" にリネームします。

「注釈等」はテキストとして作成します。

「作図・ファイル」パネルから「テキストを追加」を選び、「注釈等」を配置します。

<span style='color: orange;'>落橋防止済</span>

「テキスト」の配置が完了したら、「確定」をクリックし、作図を確定します。

新たな「テキスト」を配置できる状態になるので、引き続き、別の「注釈等」を配置していきます。

すべての「注釈等」の配置が終わったら、「終了」をクリックして「テキスト」の作図を終了します。

「作図・ファイル」パネルから「選択している情報をまとめて保存」を選び、作図情報を「GeoJSON形式」で保存します。

保存したファイルのファイル名を "attension_note.geojson" にリネームします。

各レイヤのデータ（作図情報）を作成する の手順で作成した各レイヤのデータ（作図情報）を使って、 津波ハザードマップ（Web版）を Web サーバ上で公開します。

HTML 版と PHP 版を用意してあります。

• HTML 版をご利用の場合は hazmap_html_ver.zip をダウンロードしてください。
• PHP 版をご利用の場合は hazmap_php_ver.zip をダウンロードしてください。

HTML 版

PHP 版

ダウンロードした ZIP ファイルを適当なフォルダに展開します。

HTML 版

PHP 版

展開した ZIP ファイルのフォルダ構成は、以下のようになっています。

レイヤデータ（作図情報）を格納するフォルダです。

このフォルダの下に地区毎のフォルダを作成し、その下に 各レイヤのデータ（作図情報）を作成する の手順で作成した GeoJSON 形式のファイルを格納します。

サンプルとして、[data] フォルダ下の [akano] フォルダには「高知県安芸市赤野」地区のレイヤデータを格納してあります。

[akano] フォルダをコピー・リネームして、公開用の地区毎のレイヤデータのフォルダを作成します。

HTML 版の、マップ表示のための html ファイルです。

このファイルをコピー・リネームして、公開用の html ファイルを作成します。

PHP 版の、マップ表示のための php ファイルです。

• [images] フォルダ

  マップで使用する画像を格納したフォルダです。

• gsimaps.css

  マップ上での図形表示を地理院地図と同じにするため gsimaps (地理院地図) からお借りしたリソース（スタイルシート）です。

• hazmap.css

  マップ表示のためのスタイルシートです。

• hazmap.js

  マップ表示を行う JavaScript です。

地区のレイヤデータを格納するフォルダを作成し、その下に、作成した GeoJSON 形式 のファイルをコピーします。

以下の例では、「テスト」地区のレイヤデータを格納する例を示します。

[data] フォルダ下にある、サンプルのレイヤデータを格納したフォルダ [akano] をコピー・リネームして [test] フォルダを作成します。

なお、フォルダ名に使える文字は半角の "a" から "z"、"A" から "Z"、"0" から "9" および "_"（アンダースコア）、"-"（ハイフン） のみです。

[akano] フォルダをコピーします。

コピーした [akano] フォルダを [test] にリネームします。

[test] にリネーム後の状態です。

各レイヤのデータ（作図情報）を作成する の手順で作成した各レイヤのデータ（作図情報）ファイルを、 [test] フォルダ下にコピーします。

作成した各レイヤのデータを、[test] フォルダ下にコピーします。

[test] フォルダ下にはサンプルのレイヤデータが存在しているため、上書きします。

コピーが完了した後の状態です。

津波ハザードマップ（Web版）を正しく表示するには、表示する地区の範囲と、初期表示時の中心位置の座標を必要とします。

例えば、下図の赤枠で囲まれた領域を表示範囲とし、中心位置を設定するには、 下図の南西、北東、中心と書かれた 3 つの位置の座標が必要になります。

各座標値を得るには、地理院地図上で、該当の位置をマウスで右クリックし、「コンテキストメニュー」に表示される緯度・経度の値を取得します。

上図例の場合は、以下のように緯度・経度を取得します。

南西座標

表示範囲の南西にあたる位置を右クリックして、南西座標（緯度：33.515512、経度：133.825922）を取得します。

北東座標

北東にあたる位置を右クリックして、北東座標（緯度：33.521988、経度：133.834140）を取得します。

中心座標

中心位置を右クリックして、中心座標（緯度：33.517462、経度：133.829677）を取得します。

津波ハザードマップ（Web版）を表示するための設定を行います。

HTML 版と PHP 版では設定するファイルおよび形式が違いますので、ご注意ください。

• HTML 版をご利用の場合は HTML 版での設定 を参照ください。
• PHP 版をご利用の場合は PHP 版での設定 を参照ください。

HTML 版を利用する場合は、対応する html ファイルを作成し、座標情報等を設定します。

以下の例では、「テスト」地区のレイヤデータ [test] にあわせた設定をしています。

サンプルの html ファイル "hazmap_akano.html" をコピー・リネームして、「テスト」地区の html ファイル "hazmap_test.html" を作成します。

"hazmap_akano.html" をコピーします。

コピーした "hazmap_akano.html" を "hazmap_test.html" にリネームします。

"hazmap_test.html" にリネーム後の状態です。

作成した "hazmap_test.html" をテキストエディタで開きます。

<title> タグの地区名のところを変更します。

"テスト地区" と設定しました。

"hazmap_test.html" の JavaScript 部分の HZ_areaDataDir の値を設定します。

値には、"hazmap_test.html" から地区のレイヤデータを格納したフォルダへの相対パスを指定します。

この例では、地区のレイヤデータは [data] フォルダ下の [test] フォルダに格納していますので、"data/test" と設定します。

マップ表示のための座標情報を準備する で取得した南西、北東、中心の 3 つの座標情報を "hazmap_test.html" に設定します。

南西座標

南西座標は "hazmap_test.html" の JavaScript 部分の HZ_mapMaxBounds の配列の 1 番目に [緯度, 経度] の順で設定します。

この例での南西座標（緯度：33.515512、経度：133.825922）を設定した状態です。

北東座標

北東座標は "hazmap_test.html" の JavaScript 部分の HZ_mapMaxBounds の配列の 2 番目に [緯度, 経度] の順で設定します。

この例での北東座標（緯度：33.521988、経度：133.834140）を設定した状態です。

中心座標

中心座標は "hazmap_test.html" の JavaScript 部分の HZ_mapCenter に [緯度, 経度] の順で設定します。

この例での中心座標（緯度：33.517462、経度：133.829677）を設定した状態です。

設定後、"hazmap_test.html" を上書き保存してください。

PHP 版を利用する場合は、対応する "hazmapSettings.json" を設定します。

以下の例では、「テスト」地区のレイヤデータ [test] 下にある "hazmapSettings.json" に設定しています。

[data] フォルダ下の [test] フォルダ下にある "hazmapSettings.json" をテキストエディタで開きます。

"areaName" を変更します。

"テスト地区" と設定しました。

マップ表示のための座標情報を準備する で取得した南西、北東、中心の 3 つの座標情報を "hazmapSettings.json" に設定します。

南西座標

南西座標は、緯度を "mapBoundsSouthWestLat" に、経度を "mapBoundsSouthWestLng" に設定します。

この例での南西座標（緯度：33.515512、経度：133.825922）を設定した状態です。

北東座標

北東座標は、緯度を "mapBoundsNorthEastLat" に、経度を "mapBoundsNorthEastLng" に設定します。

この例での北東座標（緯度：33.521988、経度：133.834140）を設定した状態です。

中心座標

中心座標は、緯度を "mapCenterLat" に、経度を "mapCenterLng" に設定します。

この例での中心座標（緯度：33.517462、経度：133.829677）を設定した状態です。

設定後、"hazmapSettings.json" を上書き保存してください。

Web で公開する際は、サンプルのファイル・フォルダは不要なため、削除します。

[data] フォルダ下の [akano] フォルダ

"hazmap_akano.html"

特にありません。

Web サーバへは [hazmap] フォルダ以下のツリー構造を保ったまま丸ごとアップロードしてください。

HTML 版

PHP 版

アップロード先の Web サーバ上のディレクトリ名は [hazmap] である必要はありません。お好きに変更してください。

HTML 版

Web サーバへのアップロード例）

Web ルートに [mymaps] ディレクトリとしてアップロード

この例の Web サーバは共用サーバのため、FTP クライアントから参照すると、/home/ドメインディレクトリ/www/ が Web ルートとなります。

※FTP クライアントに NextFTP を使っています。

アップロードしたファイルをブラウザで閲覧

Web サーバへのアップロード例）

Web ルート下の [maps] ディレクトリ下に [hazmap] ディレクトリとしてアップロード

アップロードしたファイルをブラウザで閲覧

PHP 版

Web サーバへのアップロード例）

Web ルートに [mymaps] ディレクトリとしてアップロード

アップロードしたファイルをブラウザで閲覧

Web サーバへのアップロード例）

Web ルート下の [maps] ディレクトリ下に [hazmap_online] ディレクトリとしてアップロード

アップロードしたファイルをブラウザで閲覧

Web サーバへのアップロードが済んだら、ブラウザから津波ハザードマップ（Web版）を閲覧できます。

HTML 版を利用した場合は html ファイルの url を、PHP 版を利用した場合は php ファイルの url と地区のレイヤデータを表すパラメータ（area=[data] ディレクトリ下のレイヤデータを格納したディレクトリ名）を、指定してブラウザで閲覧します。

以下に「テスト」地区の場合の url 例を示します。

HTML 版

PHP 版

津波ハザードマップ（Web版）は HTML 版、PHP 版ともにファイルシステム上では動作しません。 Web サーバにホストすることで初めて動作します。

公開用の Web サーバにアップロードする前に、お使いの PC 上で表示を確認したい場合は、PC に Web サーバ環境を作成する必要があります。

その際は、開発・学習用の Web サーバ環境として、 手軽に利用できる XAMPP のご利用をお勧めします。

設定を行う で触れていない、その他の設定について、以下にまとめておきます。

以下では、

• HTML 版については、「テスト」地区の html ファイル "hazmap_test.html"
• PHP 版については、「テスト」地区のレイヤデータ下にある "hazmapSettings.json"

を例にしています。

マップに表示するタイル情報（地図画像）を指定します。少なくとも１つは指定が必要で、先頭の定義が初期表示時の地図画像になります。

"hazmap_test.html" の JavaScript 部分の HZ_mapTiles に指定します。

淡色地図のみ使う例

対応するマップ表示

数値地図25000（土地条件）と淡色地図を使う例（数値地図25000を初期表示時の地図画像とする）

対応するマップ表示

"hazmapSettings.json" の "mapTiles" に指定します。

淡色地図のみ使う例

対応するマップ表示

数値地図25000（土地条件）と淡色地図を使う例（数値地図25000を初期表示時の地図画像とする）

対応するマップ表示

マップのズームレベルの範囲（ズームレベルの最小値、ズームレベルの最大値）と、初期表示時のズームレベル（ズームレベルの初期値）を指定します。

それぞれの値は 0 から 18 までの範囲で指定できます。

ただし、地図画像毎に提供されるズームレベルが違いますので、マップに表示するタイル情報（地図画像）を考慮し、適切な値を指定してください。

値は必ず ズームレベルの最小値 ≦ ズームレベルの初期値 ≦ ズームレベルの最大値 となるように指定します。

"hazmap_test.html" の JavaScript 部分の HZ_mapMinZoom にズームレベルの最小値、HZ_mapMaxZoom にズームレベルの最大値、HZ_mapInitialZoom にズームレベルの初期値を指定します。

"hazmapSettings.json" の "mapMinZoom" にズームレベルの最小値、"mapMaxZoom" にズームレベルの最大値、"mapInitialZoom" にズームレベルの初期値を指定します。

レイヤデータの定義を行います。

定義はレイヤデータファイル（GeoJSON 形式）の名前だけ（拡張子は指定しない）を指定します。

定義の順が、マップ表示時のレイヤの上から下への重なり順になります。

"hazmap_test.html" の JavaScript 部分の HZ_mapLayerDataNames に定義します。

なお、対応するレイヤデータファイルが レイヤデータを格納したフォルダ名への相対パスを設定する で指定した場所に存在する必要があります。

レイヤデータに 3 つのファイルを使った例

対応するレイヤデータ

対応するマップ表示

"hazmapSettings.json" の "mapLayerDataNames" に指定します。

なお、対応するレイヤデータファイルが "hazmapSettings.json" と同じ場所に存在する必要があります。

レイヤデータに 3 つのファイルを使った例

対応するレイヤデータ

対応するマップ表示

コントローラのレイヤデータの表示・非表示を行うチェックボックスの定義を行います。

指定するレイヤデータ名は レイヤデータ で定義されている必要があります。

定義の順が、コントローラ上のチェックボックスの上から下への表示順になります。

"hazmap_test.html" の JavaScript 部分の HZ_layerSelectorControls に定義します。

レイヤデータ 3 つのうち 2 つ分だけのチェックボックスを表示する例

対応するマップ表示

"hazmapSettings.json" の "layerSelectorControls" に指定します。

レイヤデータ 3 つのうち 2 つ分だけのチェックボックスを表示する例

対応するマップ表示