メニュー

ハザードマップ

指定した地点の各種ハザード情報（洪水、土砂災害など）をタブで切り替えて表示します。

プロパティ・コントローラー

カスタムスタイル (CSS変数)

変数名
値

呼び出しコード (Next.js)

<style>
  .mapContainer {
    width: 100%;
    height: 500px;
  }
  @media (max-width: 768px) {
    .mapContainer {
      width: 100%;
      height: 500px;
    }
  }
</style>

<div className="mapContainer">
  <InteractiveAccessAreaMap
  propertyName={"サンプル物件"}
  propertyType={"mansion"}
  propertyLatitude={35.726572}
  propertyLongitude={139.580225}
  style={{

  }}
    spots={/* JSON.parse(...) した施設データ */}
  />
</div>

変数名

変数名内容必須解説
Name物件（施設）名アイコンをクリックするとポップアップで文字が現れます。
Type物件種別戸建て：house / マンション：mansion / 土地：land
上記いずれかを指定することにより、あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。
もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。

my-next-app/
└─ public/
   └─ icons/
      └─ icon-house.png
      └─ icon-mansion.png
      └─ icon-land.png
Latitude緯度●数値。
Longitude経度●数値。
iconUrl画像URL独自で用意したアイコン画像を使いたい場合のファイル名。
画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。
場所は上記と同様public/icons内。
style地図サイズ●地図の大きさ。指定しないと地図が表示されません。
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】地図エリアの高さ

備考