物件を中心とした学区をポリゴンで表示します。周辺の学校ポリゴンを表示する広域用と、当該ポリゴンだけを表示する狭域用のいずれも表示できます。 学校の位置も表示しており、私立なども小さめに表示しています。 「学区はどこ？」と聞かれる以外にも、「学校は近い？」などの質問にも有効です。
<style>
.mapContainer {
width: 100%;
height: 500px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 500px;
}
}
</style>
<div className="mapContainer">
<SchoolMap
areaScope="localOnly" /* "areaWide" も指定可能 */
propertyName={"サンプル物件"}
propertyType={"mansion"}
propertyLatitude={35.72394449217684}
propertyLongitude={139.57031726940562}
prefectureCode={"13"}
localGovCode={"13120"}
localGovName={"練馬区"}
/>
</div>| プロパティ名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| areaScope | 学区表示範囲 | ● | `localOnly` (狭域) または `areaWide` (広域) を指定します。 広域では周辺の学区も表示されます。 |
| 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】対象学区の強調表示色 ■スマホ表示 (768px以下) --mobile-map-height【300px】地図エリアの高さ |