市区町村の Web ハザードマップを作成するためのテンプレート。

Tokyo OSS Party!! 2021 の成果物です（発表資料）。

利用例はこちら

日本のハザードマップは、国土交通省の管理するハザードマップポータルサイトにまとめられており、そこでは以下の2つのサービスが提供されています。

• 重ねるハザードマップ: 災害リスク情報や防災に役立つ情報を、全国どこでも重ねて閲覧できるWeb地図サイト
• わがまちハザードマップ: 市町村が作成したハザードマップを見つけやすくまとめたリンク集

「重ねるハザードマップ」は Web 地図として多機能で非常によく作りこまれていますが、その使い方でも

詳細を確認する場合は市町村が作成したハザードマップをご覧ください。

とあるとおり、あくまで国の作成した地図であり、市区町村ごとの詳細は確認できません。

ハザードマップに求められるのは、多くの場合、国全体の広く浅い情報ではなく、自身の住む場所ピンポイントの狭く深い情報です。 そうした情報を確認するには、「わがまちハザードマップ」から市区町村のハザードマップを確認する必要があります。

しかし、市区町村の作成するハザードマップの多くが紙での配布を前提としており、重ねるハザードマップとちがって Web に最適化されていません。 そしておそらく、独自の Web ハザードマップを開発・運用できるほど、予算やリソースに余裕のある市区町村は少ないでしょう。

この課題に対し、本プロジェクトは、市区町村の単位で Web ハザードマップを容易に作成・カスタマイズできるテンプレートを提供します。

動画で見る: https://youtu.be/oc1CfaVSlno

1. 上部（あるいはこちら）の「Use this template」ボタンを押す
2. Repository name を入力（例: hachioji-hazardmap）し、「Create repository from template」ボタンを押す
   • Repository name が次の手順で公開する Web ページの URL の一部になります

詳細: https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template

1. 作成したリポジトリの hazardmap-config.jsonc をクリックして開く
2. ファイル右上の鉛筆✏️ボタンをクリックして編集画面を開く
3. prefecture と shikuchoson の値をハザードマップを作成する都道府県・市区町村に変更して「Commit changes」ボタンを押す
   • 合わせて、不要な tiles の要素（{} で囲まれる単位）も消してください。たとえば、内陸であれば「高潮浸水想定区域」は不要でしょう

詳細: https://docs.github.com/ja/repositories/working-with-files/managing-files/editing-files#editing-files-in-your-repository

1. 上部タブ「Settings」→サイドバー「Pages」から GitHub Pages の設定画面へ移動する
2. Source に「gh-pages」を選択して「Save」ボタンを押す
3. しばらくすると、GitHub Pages の設定画面に URL が表示され、ハザードマップがその URL で公開される

詳細: https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

1. 作成したリポジトリの csv をクリックして内容を表示する
2. 「Add files」→「Upload files」から CSV ファイルをアップロード、「Commit changes」ボタンを押す
3. 01-サンプル.csv を表示し、右上のゴミ箱🗑ボタンからファイルを削除する

詳細: https://docs.github.com/ja/repositories/working-with-files/managing-files/adding-a-file-to-a-repository

CSV ファイルは必ず name（名前）、lat（緯度）、lon（経度）のカラム（列）を持つ必要があります。 さらに、これらのカラム以外も追加でき、地図上のアイコンをクリックしたときに合わせて表示されます。 また、ファイル名先頭の 01- は地図上での表示順を決めるために使われ、数字自体は地図上に表示されません。

01-サンプル.csv を参考にしてください。

CSV 同様、images 以下に画像をアップロードすれば、地図の左下に表示されるようになります。

このプロジェクトは Create React App で作成されています。

事前に Node.js をインストールしてください。

$ git clone https://github.com/sankichi92/shikuchoson-hazardmap-template.git
$ cd shikuchoson-hazardmap-template
$ npm install

$ npm start

上記を実行すると http://localhost:3000 で確認できます。

$ npm run build