Theme Configuration
カテゴリ別周辺施設マップ（リスト付き）
物件を中心として、周辺の施設をカテゴリ別に地図とリストで表示します。下のコントローラーでプロパティやスタイル、施設データをリアルタイムに変更できます。
関区民事務所- 練馬区立関町図書館
- 練馬関町郵便局
- 石神井警察署武蔵関駅前交番
- 医療法人社団 はなぶさ会 島村記念病院
- 医療法人社団 遼山会 関町病院
- 関町耳鼻咽喉科・アレルギー科
- 医療法人社団 こいし会 関町ゆいクリニック
- 増田整形外科医院
- 加藤クリニック
- 西武鉄道武蔵関駅
- 西武鉄道東伏見駅
- 練馬区「武蔵関駅南口」停留所
プロパティ・コントローラー
カスタムスタイル (CSS変数)
変数名
値
施設データ (spots - JSON)
呼び出しコード (Next.js)
<style>
.mapContainer {
width: 100%;
height: 450px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 500px;
}
}
</style>
<div className="mapContainer">
<SpotsMap
propertyName={"サンプル物件"}
propertyLatitude={35.72394449217684}
propertyLongitude={139.57031726940562}
propertyType={"house"}
mapProvider={"mapbox"}
spots={/* JSON.parse(...) した施設データ */}
style={{
'--mobile-map-height': '300px'
}}
/>
</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 | スタイル | 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-5 まで同様) ■ポップアップ --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】ポップアップのヘッダーのフォントの太さ ■スマホ表示 (768px以下) --mobile-map-height【500px】地図エリアの高さ |
備考
- ポップアップを上に出すと、画像が大きい場合に重なります。どんな画像が来ても移動経度の位置に画像の下側左右中央が来るようになっているので、背の高い画像が来てもいいように、下側にポップアップ表示しています。