塗り分け地図ChoroplethMapExperimental
GeoJSON 風の境界データで地域別の密集度、地点マーカー、ランキングを示す地図です。
プレビュー
状態とバリエーション
標準表示
地図、ランキング、選択中領域の詳細をまとめて表示する標準の SSOT variant です。
選択中
新宿区
新宿区 / 平均 4.6件/日
地点マーカーと選択
領域の塗り分けに地点マーカーと選択状態を重ねるデータ状態です。
選択中
渋谷区
渋谷区 / 平均 4.2件/日
コンパクト
狭いカードやサイドパネルで高さを抑える SSOT variant です。
別色
領域ごとの color を持たないデータに、全体のフォールバックカラーを適用する状態です。
選択中
港区
港区 / 平均 3.6件/日
地図のみ
ランキングや詳細カードを上位レイアウト側に置く場合の表示状態です。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| regions | { id?: string; label: string; value: number; geometry: Polygon | MultiPolygon; color?: ChartColor; description?: ReactNode }[] | - | GeoJSON 風のポリゴン座標と値を持つ地図領域です。値に応じて塗り分けます。 |
| markers | { id?: string; label: string; regionId?: string; coordinate?: [number, number]; x?: number; y?: number; value?: number; color?: ChartColor }[] | - | 座標または正規化済みパーセント位置に表示する任意の地点マーカーです。 |
| variant | "compact" | "default" | "default" | 地図の高さを切り替える SSOT 登録済みバリアントです。 |
| max | number | - | 領域の塗り強度とマーカーサイズを正規化する明示的な最大値です。 |
| color | ChartColor | - | 領域のフォールバックに使うトークンカラーです。 |
| selectedId | string | - | 選択中の領域と一致するランキング行を強調します。 |
| showRanking | boolean | true | 地図の横に領域ランキングを表示します。 |
| rankingLimit | number | 6 | 表示するランキング領域数を制限します。 |
| showSelectedRegion | boolean | true | 地図の下に選択中領域の詳細カードを表示します。 |
| preserveAspectRatio | boolean | true | 地理座標データがパネル比率に合わせて引き伸ばされないようにします。 |
| formatValue | (value: number) => ReactNode | - | 領域、マーカー、ランキング、選択中領域の値を整形します。 |
| selectedLabel | ReactNode | "Selected" | 選択中領域の詳細カード上部に表示するラベルです。 |
| rankLabel | ReactNode | "Rank" | ランキング番号のアクセシブルラベル接頭辞です。 |
| onRegionSelect | (region: ChoroplethMapRegion, id: string) => void | - | 地図領域またはランキング行がクリックされたときに呼ばれます。 |
| onMarkerSelect | (marker: ChoroplethMapMarker, id: string) => void | - | マーカーがクリックされたときに呼ばれます。 |
使い方
Loading...