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

最終更新日: 2016/10/28

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

お知らせ

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

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

概要

国土地理院 さんが公開されている 地理院地図 と、 Web 上で地図画像を動的に表示するための JavaScript ライブラリ 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版)

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

目次
「作図・ファイル」ツールの使い方

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

津波ハザードマップ(Web版)とレイヤ(層)

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

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

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

レイヤと作図情報(GeoJSON 形式)の関係

津波ハザードマップ(Web版)の GeoJSON 形式ファイルの読み込み処理は gsimaps (地理院地図) のリソースをお借りしており、 現時点での 地理院地図 の「作図・ファイル」ツールで出力した各図形の GeoJSON 形式データを、 津波ハザードマップ(Web版)でも同じように表示できることは確認済みです。

なお、現時点で スタイルつき GeoJSON 規約 は検討中のものであるため、将来的にフォーマットが変更になる可能性があります。

津波ハザードマップ(Web版)の作成時の注意点
地図画像間の「ずれ」について

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

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

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

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

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

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

「標準地図」に切り替え

「標準地図」に切り替え

津波ハザードマップ(Web版)では地図画像を「簡易空中写真」と「標準地図」で切り替えられるようにしてありますが、 設定により「簡易空中写真」や「標準地図」だけにすることもできます。 また、国土地理院さんが公開している他の地図画像を使用することも可能です。

マップに表示する地図画像の設定については、 マップに表示するタイル情報(地図画像) を参照ください。

地図画像のズームレベル毎の表示の確認について

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

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

提供されるズームレベルについては 地理院タイル一覧 の各地図画像の説明(タイル一覧の各タイル毎の説明)の「ズームレベル」を参照ください。

津波ハザードマップ(Web版)では ズームレベルの範囲、マップの表示領域の範囲を設定できるようにしてあります。

ズームレベルの範囲の設定については ズームレベル を参照ください。

マップの表示領域の範囲の設定については 座標を設定する(HTML 版)、または、 座標を設定する(PHP 版) を参照ください。

レイヤ(層)区分について

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

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

マップに表示するレイヤデータファイルを変更する方法については レイヤデータ を参照ください。

マップのコントローラに表示する、レイヤデータの表示・非表示を行うチェックボックスの定義方法については コントローラ(レイヤのチェックボックス) を参照ください。

レイヤデータ(作図情報)作成時の TIPS
編集モードを使う

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

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

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

おおまかに作成する

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

細かいところを整えていく
作業を小分けにする

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

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

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

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

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

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

ファイル名を変更する(1)
ファイル名を変更する(2)

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

作図情報を読み込む

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

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

レイヤすべてを保存する

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

ファイル名を変更する(1)
ファイル名を変更する(2)
時々保存する

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

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

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

動作がおかしくなったとき

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

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

作図の確定については、作図した内容を確定する を参照ください。

作図の終了(キャンセル)については、作図を終了(キャンセル)する を参照ください。

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

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

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

F5 キー押下やブラウザの再読み込み(リロード)は絶対にしないでください。確定済みの内容も含め、すべての作図情報が失われてしまいます。

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

「マーカー(アイコン)」の作成時

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

「マーカー(アイコン)」の位置指定ができない状態

「ポリゴン」を作図中

「ポリゴン」の作図中

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

「ポリゴン」の作図内容が消えてしまった
各レイヤのデータ(作図情報)を作成する

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

地理院地図の表示については、地理院地図を表示する を参照ください。

ベースマップの切り替えについては、ベースマップの切り替え を参照ください。

「一時避難場所」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

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

「一時避難場所」を作図

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

「線色」に赤を選択

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

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

「名称」を設定します。

「名称」を設定

内容を設定します。

内容を設定

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

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

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

内容を設定(「テーブル入力」)

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

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「一時避難場所(ラベル)」レイヤのデータを作成する

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

「テキスト」作成の詳細については、「テキスト」の作成方法 を参照ください。

「一時避難場所(ラベル)」を作成する位置を決めやすいよう、先に作成済みの「一時避難場所」の作図情報 "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" のチェックを外します。

temporary_gathering_location.geojson のチェックを外す

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「要注意箇所」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

「線」作成の詳細については、「線」の作成方法 を参照ください。

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

「要注意箇所」(ポリゴン)を作図

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

「線色」に黄を選択

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

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

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

「要注意箇所」(線)を作図

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

「線色」に黄を選択

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「線」を作図できる状態

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

「線」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「要注意箇所(ラベル)」レイヤのデータを作成する

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

「テキスト」作成の詳細については、「テキスト」の作成方法 を参照ください。

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

「要注意箇所」の作図情報を読み込む

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

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

「要注意箇所(ラベル)」を配置

上図例では文字の色にオレンジを指定しています。

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

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

「確定」をクリック

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

新たな「テキスト」を配置できる状態

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

「テキスト」の作図を終了する

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

requires_special_attention_point.geojson のチェックを外す

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「急傾斜地崩壊危険箇所」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

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

「急傾斜地崩壊危険箇所」を作図

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

「線色」にオレンジを選択

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

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

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「ため池危険箇所」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

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

「ため池危険箇所」を作図

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

「線色」に紫を選択

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

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

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「避難経路」レイヤのデータを作成する

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

「線」作成の詳細については、「線」の作成方法 を参照ください。

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

「避難経路」を作図

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

「線色」に緑を選択

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「線」を作図できる状態

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

「線」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「避難経路(進行方向)」レイヤのデータを作成する

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

「マーカー(アイコン)」作成の詳細については、「マーカー(アイコン)」の作成方法 を参照ください。

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

「避難経路」の作図情報を読み込む

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

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

「避難経路(進行方向)」を配置

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

「アイコン」に矢印の画像を選択(1)
「アイコン」に矢印の画像を選択(2)

上図で使用している矢印の画像は、種類が 16 方位分用意されていますので、進行方向として適切な矢印画像を選んでください。

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「マーカー(アイコン)」を作図できる状態

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

「マーカー(アイコン)」の作図を終了する

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

evacuation_route.geojson のチェックを外す

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「標高点」レイヤのデータを作成する

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

「マーカー(アイコン)」作成の詳細については、「マーカー(アイコン)」の作成方法 を参照ください。

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

「標高点」を配置

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

「アイコン」に中空きの赤い三角の画像を選択(1)
「アイコン」に中空きの赤い三角の画像を選択(2)

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

「拡大率」を設定

「名称」を設定します。

「名称」を設定

内容を設定します。

内容を設定

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

「確定」をクリック

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

新たな「マーカー(アイコン)」を作図できる状態

一度にたくさんの「マーカー(アイコン)」を作成するのは大変です。作業を小分けにする などして、コツコツ作業してください。

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

「マーカー(アイコン)」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「標高点(ラベル)」レイヤのデータを作成する

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

「テキスト」作成の詳細については、「テキスト」の作成方法 を参照ください。

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

「標高点」の作図情報を読み込む

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

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

「標高点(ラベル)」を配置

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

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

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

「確定」をクリック

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

新たな「テキスト」を配置できる状態

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

「テキスト」の作図を終了する

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

altitude.geojson のチェックを外す

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「津波浸水想定区域」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

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

「津波浸水想定区域」を作図

一度に大きな「ポリゴン」を作成するのは大変です。作業を小分けにする などして、コツコツ作業してください。

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

「線色」に青を選択

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

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

「名称」を設定します。

「名称」を設定

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「水場」レイヤのデータを作成する

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

「ポリゴン」作成の詳細については、「ポリゴン」(多角形領域)の作成方法 を参照ください。

「線」作成の詳細については、「線」の作成方法 を参照ください。

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

「水場」(ポリゴン)を作図

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

「線色」に水色を選択

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

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

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

「確定」をクリック

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

新たな「ポリゴン」を作図できる状態

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

「ポリゴン」の作図を終了する

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

「水場」(線)を作図

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

「線色」に水色を選択

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

「確定」をクリック

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

新たな「線」を作図できる状態

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

「線」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
「注釈等」レイヤのデータを作成する

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

「テキスト」作成の詳細については、「テキスト」の作成方法 を参照ください。

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

「注釈等」を配置

上図例では文字の色にオレンジを指定しています。

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

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

「確定」をクリック

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

新たな「テキスト」を配置できる状態

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

「テキスト」の作図を終了する

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

作図内容を保存する

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

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

ファイル名をリネームする(1)
ファイル名をリネームする(2)
津波ハザードマップ(Web版)を公開する

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

リソースのダウンロードと展開

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

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

PHP 版をご利用になるには、マップを公開する Web サーバで PHP バージョン 5.2 以降が動作することが前提になります。

HTML 版

HTML 版の ZIP ファイル

PHP 版

PHP 版の ZIP ファイル

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

HTML 版

HTML 版を展開

PHP 版

PHP 版を展開
ZIP ファイルの内容

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

公開用のリソースを作成するにあたり、変更等が必要なファイル・フォルダは赤字で示しています。

HTML 版

  • [data]
    • [akano]
      • altitude.geojson
      • altitude_label.geojson
      • attension_note.geojson
      • evacuation_route.geojson
      • evacuation_route_arrow.geojson
      • pond_hazard_area.geojson
      • requires_special_attention_point.geojson
      • requires_special_attention_point_label.geojson
      • steep_slope_collapse_hazard_area.geojson
      • temporary_gathering_location.geojson
      • temporary_gathering_location_label.geojson
      • tsunami_inundation_assumption_area.geojson
      • water_area.geojson
  • [images]
    • altitude.png
    • ...
  • gsimaps.css
  • hazmap.css
  • hazmap.js
  • hazmap_akano.html

PHP 版

  • [data]
    • [akano]
      • altitude.geojson
      • altitude_label.geojson
      • attension_note.geojson
      • evacuation_route.geojson
      • evacuation_route_arrow.geojson
      • hazmapSettings.json
      • pond_hazard_area.geojson
      • requires_special_attention_point.geojson
      • requires_special_attention_point_label.geojson
      • steep_slope_collapse_hazard_area.geojson
      • temporary_gathering_location.geojson
      • temporary_gathering_location_label.geojson
      • tsunami_inundation_assumption_area.geojson
      • water_area.geojson
  • [images]
    • altitude.png
    • ...
  • gsimaps.css
  • hazmap.css
  • hazmap.js
  • hazmap.php
[data] フォルダ

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

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

PHP 版ではマップ表示の設定ファイル "hazmapSettings.json" も格納します。

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

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

hazmap_akano.html

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

サンプルの「高知県安芸市赤野」地区の html ファイルです。

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

hazmap.php

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

その他のファイル・フォルダ
  • [images] フォルダ

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

  • gsimaps.css

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

  • hazmap.css

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

  • hazmap.js

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

地区のレイヤデータを格納する

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

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

「テスト」地区のレイヤデータを格納するフォルダの名称は [test] とします。

フォルダの作成

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

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

正しいフォルダ名の例

test_1

test_1_p-2

test-1_p-3_q4

正しくないフォルダ名の例

test@p1 (記号を含んでいるため NG)

test_1 (全角数字を含んでいるため NG)

test_2 (全角英字を含んでいるため NG)

test-3 (全角ハイフンを含んでいるため NG)

PHP 版の実装上の都合により、フォルダ名に使える文字を制限しています。 なお、HTML 版にこの制限はありませんが、マップを公開する Web サーバ上で許されるディレクトリ名のルールに則ってください。

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

akano フォルダをコピー・リネームして test フォルダを作成する(1)

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

akano フォルダをコピー・リネームして test フォルダを作成する(2)

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

akano フォルダをコピー・リネームして test フォルダを作成する(3)
作成済みのレイヤデータをコピー(上書き)

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

下図例では、別のフォルダ [layers_data] に格納してある作成済みの各レイヤのデータを、[test] フォルダ下にコピーしています。

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

各レイヤのデータを test フォルダにコピーする(1)

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

各レイヤのデータを test フォルダにコピーする(2)

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

各レイヤのデータを test フォルダにコピーする(3)

上記図は PHP 版での例ですが、HTML 版でも手順は同じです。なお、HTML 版では [test] フォルダ下に "hazmapSettings.json" は存在しません。

マップ表示のための座標情報を準備する

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

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

中心位置は、マップを初期表示した際にマップ中央に表示される座標で、 南西および北東座標に囲まれた領域の中の任意の位置を指定できます(領域の「中心」である必要はありません)。

なお、マップの初期表示は、ブラウザ上の地図画面の表示領域や、指定した表示範囲および中心位置等を勘案して行われるため、 指定した座標からは多少外れて表示される場合もあります。

座標表示例

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

「コンテキストメニュー」の座標情報には、地理院地図上の十字マークが表示されている位置の緯度・経度が表示されます。

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

南西座標

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

南西座標を取得

北東座標

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

北東座標を取得

中心座標

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

中心座標を取得
設定を行う

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

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

設定内容の編集には、テキストエディタをご利用ください(Windows 上なら「メモ帳」)。

Word のような文書作成ソフトウェアでは、正しく編集・保存できませんので、ご注意ください。

設定対象のファイルのエンコーディングは UTF-8 です。他のエンコーディングで編集・保存すると正しく動作しなくなる可能性がありますので、ご注意ください。

Windows 上で編集作業をするのであれば、新しいバージョンの Windows のメモ帳では UTF-8 をサポートしています (いつの間にか対応されていたので、どの Windows のバージョンからかは特定できていませんが、 少なくとも Windows 7 以降のメモ帳では UTF-8 を認識できました)。

HTML 版での設定

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

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

マップ表示用の html ファイルを作成する

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

ファイル名は、マップを公開する Web サーバ上で許されるファイル名であれば、自由に付けて構いません。 この例では、地区のレイヤデータを格納したフォルダ [test] に準じた名前として "hazmap_test.html" としました。

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

hazmap_akano.html を hazmap_test.html にコピー(1)

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

hazmap_akano.html を hazmap_test.html にコピー(2)

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

hazmap_akano.html を hazmap_test.html にコピー(3)
タイトルを設定する

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

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

タイトルを設定する(1)

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

タイトルを設定する(2)
レイヤデータを格納したフォルダ名への相対パスを設定する

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

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

パスの区切り文字には必ず "/" (スラッシュ)を使ってください。

データフォルダを設定する(1)

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

データフォルダを設定する(2)
座標を設定する

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

座標の値は必ず半角で入力してください。

南西座標

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

南西座標を設定する(1)

この例での南西座標(緯度:33.515512、経度:133.825922)を設定した状態です。

南西座標を設定する(2)

北東座標

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

北東座標を設定する(1)

この例での北東座標(緯度:33.521988、経度:133.834140)を設定した状態です。

北東座標を設定する(2)

中心座標

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

中心座標を設定する(1)

この例での中心座標(緯度:33.517462、経度:133.829677)を設定した状態です。

中心座標を設定する(2)
設定を保存する

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

hazmap_test.html を上書き保存
PHP 版での設定

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

"hazmapSettings.json" は JSON 形式のファイルです。

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

タイトルを設定する

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

hazmapSettings.json

"areaName" を変更します。

タイトルを設定する(1)

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

タイトルを設定する(2)
座標を設定する

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

座標の値は必ず半角で入力してください。

南西座標

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

南西座標を設定する(1)

この例での南西座標(緯度:33.515512、経度:133.825922)を設定した状態です。

南西座標を設定する(2)

北東座標

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

北東座標を設定する(1)

この例での北東座標(緯度:33.521988、経度:133.834140)を設定した状態です。

北東座標を設定する(2)

中心座標

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

中心座標を設定する(1)

この例での中心座標(緯度:33.517462、経度:133.829677)を設定した状態です。

中心座標を設定する(2)
設定を保存する

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

hazmapSettings.json を上書き保存
不要なファイルを削除する

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

違うファイルを削除しないよう、十分注意して行ってください。

不要なファイルを削除しなくてもマップの表示に影響はありませんが、後々の管理のために、できれば削除しておくことをお勧めします。

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

[data] フォルダ下の [akano] フォルダ
HTML 版を利用する場合に不要なファイル

"hazmap_akano.html"

hazmap_akano.html
PHP 版を利用する場合に不要なファイル

特にありません。

Web サーバにアップロードする

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

HTML 版

HTML 版でアップロードするフォルダ

PHP 版

PHP 版でアップロードするフォルダ

PHP 版をご利用になるには、マップを公開する Web サーバで PHP バージョン 5.2 以降が動作することが前提になります。

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

Web サーバへのアップロードは FTP クライアントなどを利用します。 アップロードに必要なアカウント情報、アップロード方法などは、ご利用の Web サーバの契約書等に記載されていますので、ご参照ください。

アップロードの際に、ファイルのエンコーディングが変わらないよう、ご注意ください。

ご利用の Web サーバが比較的新しいものであれば、「バイナリモード」でアップロードしてください。

HTML 版

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

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

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

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

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

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

ブラウザでの閲覧例

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

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

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

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

ブラウザでの閲覧例

PHP 版

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

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

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

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

ブラウザでの閲覧例

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

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

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

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

ブラウザでの閲覧例
ブラウザからの閲覧

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

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

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

ホスト名は Web サーバ毎に違うため、この例では hostname としています。

HTML 版

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

http://hostname/mymaps/hazmap_test.html

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

http://hostname/maps/hazmap/hazmap_test.html

PHP 版

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

http://hostname/mymaps/hazmap.php?area=test

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

http://hostname/maps/hazmap_online/hazmap.php?area=test

ブラウザでの閲覧例は Web サーバにアップロードする の閲覧例を参照ください。

ローカルでの動作確認

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

Windows の場合でいえば、エクスプローラーから html または php ファイルをダブルクリックしてブラウザで開いても、動作しません。

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

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

申し訳ありませんが、インストール方法などは、ここでは説明していません。 ネット等にたくさんの情報がございますので、探してみてくださいませ。

その他の設定

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

以下では、

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

を例にしています。

マップに表示するタイル情報(地図画像)

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

  • "name"

    コントローラに表示する地図画像の名前(マップ右下に表示する地図名にも使います)を指定します。

  • "urlTemplate"

    地理院タイル一覧 の各地図画像の説明(タイル一覧の各タイル毎の説明)に「URL」として記載されている値を指定します。

HTML 版

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

マップに表示するタイル情報

淡色地図のみ使う例

淡色地図のみ使う例

対応するマップ表示

淡色地図のみ使うマップ表示例

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

数値地図25000(土地条件)と淡色地図を使う例

対応するマップ表示

数値地図25000(土地条件)と淡色地図を使うマップ表示例
PHP 版

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

マップに表示するタイル情報

淡色地図のみ使う例

淡色地図のみ使う例

対応するマップ表示

淡色地図のみ使うマップ表示例

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

数値地図25000(土地条件)と淡色地図を使う例

対応するマップ表示

数値地図25000(土地条件)と淡色地図を使うマップ表示例
ズームレベル

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

ズームレベルは必ず半角数字で入力してください。

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

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

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

HTML 版

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

ズームレベル

値は必ず HZ_mapMinZoom ≦ HZ_mapInitialZoom ≦ HZ_mapMaxZoom となるように指定してください。

PHP 版

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

ズームレベル

値は必ず mapMinZoom ≦ mapInitialZoom ≦ mapMaxZoom となるように指定してください。

レイヤデータ

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

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

例えば、レイヤデータファイルの名前が "layer_data_1.geojson" だとすると、定義には "layer_data_1" と指定します。

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

HTML 版

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

レイヤデータ

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

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

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

対応するレイヤデータ

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

対応するマップ表示

レイヤデータに 3 つのファイルを使ったマップ表示例
PHP 版

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

レイヤデータ

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

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

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

対応するレイヤデータ

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

対応するマップ表示

レイヤデータに 3 つのファイルを使ったマップ表示例
コントローラ(レイヤのチェックボックス)

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

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

  • "caption"

    チェックボックスに表示する名称を指定します。HTML 形式で設定できます。

    ※html で使用する記号等を含まないのであれば、文字列を指定することもできます。

  • "dataName"

    レイヤデータ で定義したレイヤデータ名を指定します。

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

ここに定義がないレイヤについては、チェックボックスを表示しません(レイヤは常に表示され非表示にできません)。

HTML 版

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

コントローラ(レイヤのチェックボックス)

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

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

対応するマップ表示

レイヤデータ 3 つのうち 2 つ分だけのチェックボックスを表示したマップ例
PHP 版

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

コントローラ(レイヤのチェックボックス)

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

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

対応するマップ表示

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