学区地図に加えて、指定した地点から学区内の小中学校までの距離や所要時間の解説を表示します。PCでは地図の横に、スマホでは地図の下に表示されます。
<style>
.mapContainer {
width: 100%;
height: 500px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 650px;
}
}
</style>
<div className="mapContainer">
<SchoolMapWithExp
areaScope="localOnly" /* "areaWide" も指定可能 */
expVariant="distance" /* "time" も指定可能 */
propertyName={"サンプル物件"}
propertyType={"mansion"}
propertyLatitude={35.72394449217684}
propertyLongitude={139.57031726940562}
prefectureCode={"13"}
localGovCode={"13120"}
localGovName={"練馬区"}
/>
</div>| プロパティ名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| areaScope | 学区表示範囲 | ● | `localOnly` (狭域) または `areaWide` (広域) を指定します。 |
| expVariant | 解説の種類 | `distance` (距離) または `time` (所要時間) を指定します。デフォルトは `distance` です。 | |
| propertyName | 中心地点名 | アイコンをクリックするとポップアップで表示されます。 | |
| propertyType | 中心地点種別 | `house`, `mansion`, `land` のいずれかを指定することで、デフォルトのアイコンが表示されます。 | |
| propertyLatitude | 緯度 | ● | 中心地点の緯度を数値で指定します。 |
| propertyLongitude | 経度 | ● | 中心地点の経度を数値で指定します。 |
| prefectureCode | 都道府県コード | ● | 学区データを取得するために必要です。例: `13` (東京都) |
| localGovCode | 自治体コード | 学区データを取得するために必要です。例: `13101` (千代田区) | |
| localGovName | 自治体名 | 学校データを取得するために必要です。例: `千代田区` | |
| centerIconUrl | 中心アイコンURL | 中心地点に表示する独自のアイコン画像URLを指定できます。 | |
| 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番目のタブの色 ■小学校ポリゴン・マーカー --elementary-fill【#66ccff】学区ポリゴンの塗りつぶし色 --elementary-line【#3399cc】学区ポリゴンの枠線色 --elementary-marker-bg【#3399cc】公立小学校マーカーの背景色 --elementary-highlight【#4da6cc】対象学区の強調表示色 ■中学校ポリゴン・マーカー --juniorhigh-fill【#ff9966】学区ポリゴンの塗りつぶし色 --juniorhigh-line【#e67300】学区ポリゴンの枠線色 --juniorhigh-marker-bg【#e67300】公立中学校マーカーの背景色 --juniorhigh-highlight【#ff8c4d】対象学区の強調表示色 ■説明パネル --gakku-title-color【#0f172a】説明パネルの見出し文字色 --gakku-title-accent【#1d4ed8】説明パネルの見出し左アクセント色 --gakku-font-family【system-ui, ...】説明パネルのフォント --gakku-title-font-family【(上記と同じ)】説明パネルの見出しフォント ■スマホ表示 (768px以下) --mobile-map-height【300px】地図エリアの高さ |