塗り分け地図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 | - | マーカーがクリックされたときに呼ばれます。 |
使い方
import { ChoroplethMap } from "@gunjo/ui";
const regions = [
{
id: "shinjuku",
label: "新宿",
value: 92,
geometry: {
type: "Polygon",
coordinates: [[[139.686, 35.707], [139.704, 35.714], [139.721, 35.702], [139.716, 35.683], [139.697, 35.676], [139.681, 35.690]]],
},
},
{
id: "shibuya",
label: "渋谷",
value: 84,
geometry: {
type: "Polygon",
coordinates: [[[139.686, 35.675], [139.704, 35.683], [139.716, 35.668], [139.708, 35.651], [139.688, 35.646], [139.676, 35.661]]],
},
},
];
const markers = [
{ label: "新宿駅", x: 42, y: 32, value: 92 },
{ label: "渋谷交差点", x: 48, y: 58, value: 84 },
];
<ChoroplethMap regions={regions} />
<ChoroplethMap regions={regions} markers={markers} selectedId="shinjuku" />
<ChoroplethMap regions={regions} onRegionSelect={(region) => console.log(region.id ?? region.label)} />
<ChoroplethMap regions={regions} variant="compact" rankingLimit={4} />
<ChoroplethMap regions={regions} showRanking={false} showSelectedRegion={false} />
<ChoroplethMap regions={regions} selectedLabel="選択中" rankLabel="順位" />