災害単体【洪水・土砂災害・高潮・津波・地形分類】
物件を中心として、周辺の災害リスクを国土地理院のタイルを用いて地図で表示します。 洪水、土砂災害、高潮、津波、地形分類で一つずつに表示しているので、プルダウンメニューなく比較的シンプルに見せることができます。 「洪水の心配はある？」など、質問が来た時に使いやすいです。
洪水
河川が氾濫した際に浸水が想定される区域と水深（想定し得る最大規模の降雨（計画規模を上回るもの））
土砂災害
高潮
津波
地形分類
プロパティ・コントローラー
カスタムスタイル (CSS変数)
変数名
値
呼び出しコード (Next.js)
<style>
.mapContainer {
width: 100%;
height: 450px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 450px;
}
}
</style>
<div className="mapContainer">
<HazardTypeTabsMap
hazardType="洪水" /* "土砂災害", "高潮", "津波", "地形分類" も指定可能 */
propertyName={"サンプル物件"}
propertyType={"mansion"}
propertyLatitude={35.726572}
propertyLongitude={139.580225}
/>
</div>プロパティ
| プロパティ名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| hazardType | 災害タイプ | ● | 表示したい災害の種類を文字列で指定します。 `洪水`, `土砂災害`, `高潮`, `津波`, `地形分類` のいずれか。 |
| propertyName | 物件（施設）名 | アイコンをクリックするとポップアップで文字が現れます。 | |
| propertyType | 物件種別 | `house`, `mansion`, `land` のいずれかを指定することで、デフォルトのアイコン画像が表示されます。 | |
| propertyLatitude | 緯度 | ● | 中心地点の緯度を数値で指定します。 |
| propertyLongitude | 経度 | ● | 中心地点の経度を数値で指定します。 |
| centerIconUrl | 画像URL | 中心地点に表示する独自のアイコン画像URLを指定します。
my-next-app/
└─ public/
└─ icons/
└─ custom-icon.png | |
| style | その他のスタイル | CSS変数名【デフォルト値】説明 ■タブ --app-font-family【sans-serif】全体のフォント --sub-tab-font-size【16px】タブボタンの文字サイズ --sub-tab-button-height【50px】タブボタンの高さ --sub-tab-border-radius【4px】タブボタンの角の丸み --sub-tab-gap【1px】タブボタン同士の隙間 --sub-tab-color-0【#003366】1番目のタブの色 --sub-tab-color-1【#663300】2番目のタブの色 --sub-tab-color-2【#006633】3番目のタブの色 --sub-tab-color-3【#660033】4番目のタブの色 --sub-tab-color-4【#333333】5番目のタブの色 --sub-tab-color-5【#666600】6番目のタブの色 ■スマホ表示 (768px以下) --mobile-map-height【300px】地図エリアの高さ |
備考
- 国土地理院がウェブサイトで公開している地理院タイルを使用しています。