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

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

• 地理院地図

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

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

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

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

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

• gsimaps (地理院地図)

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

• スタイルつき GeoJSON 規約

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

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

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

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

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

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

津波ハザードマップ（Web版）（高知県安芸市赤野地区）

• マップのズームイン・ズームアウト（拡大表示・縮小表示）

  津波ハザードマップ（Web版）では、「簡易空中写真」の地図画像提供サイズの関係で、操作できる拡大率を一定の範囲に制限しています。

  ズームイン・ズームアウトボタン（マップの左上に表示されています）

  「＋」：ズームイン、「－」：ズームアウト

  

  マウスのスクロールホイール

  「上」：ズームイン、「下」：ズームアウト

  

• マップの表示領域の移動

  津波ハザードマップ（Web版）では、移動できる表示領域を一定の範囲に制限しています。

  マウスでドラッグ

  マップ上で左ボタンを押し下げ、左ボタンを押し下げたまま、マウスを移動します。

  

• コントローラ

  コントローラを開く

  マップの右上にあるコントローラのアイコン上にマウスカーソルを移動することで、コントローラが開きます。

  

  

  コントローラを閉じる

  マウスカーソルをコントローラ以外の場所に移動すると、コントローラが閉じます。

• 地図画像の切り換え

  コントローラを表示し、「簡易空中写真」または「標準地図」を選択します。

  

  「簡易空中写真」を選択

  

  「標準地図」を選択

  

• 表示する図形の選択

  コントローラを表示し、「一時避難場所」などのチェックボックスを操作します。
  チェックボックスのチェック状態にあわせて対応する図形が表示・非表示されます。

  すべてにチェックが入った状態のマップ

  

  「急傾斜地崩壊危険箇所」、「ため池危険箇所」のチェックを外した状態のマップ

  

• 図形のポップアップ表示（吹き出し）

  「一時避難場所」などの図形をクリックすると、その名称等をポップアップ表示（吹き出し）します。
  ポップアップ表示を閉じる場合は、ポップアップ表示の右上の「×」をクリックするか、マップ上の何もないところをクリックします。

  津波ハザードマップ（Web版）では、「一時避難場所」など一部の図形でのみポップアップ表示するようデータを作成してあります。 それ以外の図形はクリックしても何も表示されません。

  図形（一時避難場所）をクリックし名称等をポップアップ表示したところ