Theme Configuration
カテゴリ別周辺施設マップ（リスト付き）
物件を中心として、周辺の施設をカテゴリに関係なく地図とリストで表示します。下のコントローラーでプロパティやスタイル、施設データをリアルタイムに変更できます。
関区民事務所- 練馬区立関町図書館
- 練馬関町郵便局
- 石神井警察署武蔵関駅前交番
- 医療法人社団 はなぶさ会 島村記念病院
- 医療法人社団 遼山会 関町病院
- 関町耳鼻咽喉科・アレルギー科
- 医療法人社団 こいし会 関町ゆいクリニック
- 増田整形外科医院
- 加藤クリニック
- 西武鉄道武蔵関駅
- 西武鉄道東伏見駅
- 練馬区「武蔵関駅南口」停留所
- にじいろ保育園関町北
- キッズガーデン練馬関町
- 関町ちぐさ幼稚園
- 関町白百合幼稚園
- 愛里武蔵関保育園
- ソラスト関町保育園
- ヤマハ音楽教室 カシス武蔵関センター
- 関町児童館
- 東京女子学院高等学校
- 東京女子学院中学校
- 東京三育小学校
- 成蹊中学校
- 練馬区立関町小学校
- 練馬区立石神井西中学校
- 武蔵関公園
- 武蔵野中央公園
- 武蔵関駅前緑地
- せきまち公園
- 関町北四丁目緑地
- エニタイムフィットネス 武蔵関店
- 武蔵野プール
- まいばすけっと武蔵関駅南口店
- 三徳関町店(Santoku)
- リコス関町北1丁目店(G7)
- ココカラファイン関町店
- ドラッグストアスマイル 武蔵関店
- C’z PRO 練馬関町店
- セブンイレブン 練馬関町北２丁目
プロパティ・コントローラー
カスタムスタイル (CSS変数)
変数名
値
施設データ (spots - JSON)
呼び出しコード (Next.js)
<style>
.mapContainer {
width: 100%;
height: 450px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 500px;
}
}
</style>
<div className="mapContainer">
<SpotsMapNonCategory
propertyName={"サンプル物件"}
propertyLatitude={35.72394449217684}
propertyLongitude={139.57031726940562}
propertyType={"house"}
mapProvider={"mapbox"}
style={{
'--remap-mobile-map-height': '300px'
}}
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 | スタイル | CSS変数名【デフォルト値】説明 ■ポップアップ --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】地図エリアの高さ |
備考
- ポップアップを上に出すと、画像が大きい場合に重なります。どんな画像が来ても移動経度の位置に画像の下側左右中央が来るようになっているので、背の高い画像が来てもいいように、下側にポップアップ表示しています。