物件を中心に、徒歩/自転車/車の所要時間に応じた到達圏ポリゴンと周辺スポットを表示します。画面上で選ぶのではなく変数として、交通手段と時間を選択できるため、配布資料などへの貼り付けに適しています。
<style>
.mapContainer {
width: 100%;
height: 500px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 500px;
}
}
</style>
<div className="mapContainer">
<AccessAreaMap
propertyName={"サンプル物件"}
propertyLatitude={35.726572}
propertyLongitude={139.580225}
propertyType={"house"}
profile={"walking"}
minutes={10}
spots={/* JSON.parse(...) した施設データ */}
style={{ width: '100%', height: '100%' }}
/>
</div>| 変数名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| 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 | スタイル | CSS変数名【デフォルト値】説明 ■到達圏ポリゴン --isochrone-fill-color【#5a3fc0】ポリゴンの塗りつぶし色 --isochrone-fill-opacity【0.3】ポリゴンの不透明度（0～1） ■ポップアップ --popup-bg-color【white】ポップアップの背景色 --popup-text-color【#333】ポップアップの文字色 --popup-header-color【inherit】ポップアップのヘッダー文字色 --popup-border-radius【4px】ポップアップの角の丸み --popup-padding【4px 8px】ポップアップの内側の余白 --popup-box-shadow【0 1px 2px rgba(0,0,0,0.1)】ポップアップの影 --popup-border【none】ポップアップの枠線（例: '1px solid black'）--popup-font-family【sans-serif】ポップアップのフォント --popup-font-size【14px】ポップアップのヘッダーのフォントサイズ --popup-font-weight【bold】ポップアップのヘッダーのフォントの太さ |