高東ソフトウェアサービス

最終更新日: 2016/10/28

地理院タイルと Leaflet を使った Web で閲覧できるハザードマップ

お知らせ

Web サービス「お絵かきマップ」を公開しました。

「お絵かきマップ」は、地理院地図のデータ(地理院タイル) を利用した、マップ用の図形データを作成するための Web サービスです。いろいろなマップの作成にご活用ください。

概要

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

作成手順は 地理院タイルと Leaflet を使った Web で閲覧できるハザードマップの作り方 に記載してあります。

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

謝辞

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

  • 地理院地図

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

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

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

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

  • gsimaps (地理院地図)

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

  • スタイルつき GeoJSON 規約

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

  • 「写植ルームツボタ」

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

  • 赤野地区津波ハザードマップ(PDF)

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

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

地理院地図の「作図・ファイル」ツールで出力した GeoJSON 形式のデータを、 津波ハザードマップ(Web版)に表示するため、 gsimaps (地理院地図) のリソースをお借りしています。

※commit 020f5e47265b4c8b508b37ffd8acc025b308083e を使用しました。

津波ハザードマップ(Web版)

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

高知県安芸市が公開している 赤野地区津波ハザードマップ(PDF) を元に作成しました。

座標点などはこの PDF から目視で拾ったため正確な位置とは言いがたく、また、PDF に記載されていない箇所については一部想像で補った箇所があります。

マップ上の「一時避難場所」などの図形は「簡易空中写真」の地図画像にあわせて配置したため、 地図画像を「標準地図」に切り換えると、地図画像上の構造物の位置と配置した図形の位置が、ずれます。

申し訳ありませんが、上記、ご留意くださいませ。

津波ハザードマップ(Web版)の操作方法
  • マップのズームイン・ズームアウト(拡大表示・縮小表示)

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

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

    「+」:ズームイン、「-」:ズームアウト

    ズームイン・ズームアウトボタン

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

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

    マウスのスクロールホイール
  • マップの表示領域の移動

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

    マウスでドラッグ

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

    マウスでドラッグ マウスでドラッグ(マップ)
  • コントローラ

    コントローラを開く

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

    コントローラのアイコン
    コントローラ

    コントローラを閉じる

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

  • 地図画像の切り換え

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

    マップ選択

    「簡易空中写真」を選択

    「簡易空中写真」を選択した場合のマップ

    「標準地図」を選択

    「標準地図」を選択した場合のマップ
  • 表示する図形の選択

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

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

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

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

    「急傾斜地崩壊危険箇所」、「ため池危険箇所」のチェックを外した状態のマップ
  • 図形のポップアップ表示(吹き出し)

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

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

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

    図形をクリックし名称等をポップアップ表示したところ