§19-02Maps
マーカークラスタリング
近接する多数のピンを一つの円に束ねて示す。
地図上の点が多すぎて重なり、個々を判別できない問題に効く。店舗や投稿の分布を広域で見せる場面に向く。
実装のポイント
ズームレベルごとにグリッドや距離で点を束ね、件数に応じて円の大きさを変える。クラスタをクリックしたら展開できる範囲までズームインさせる。
- 特徴
- CSS のみ
- モック
- デモで使っているもの
- motion
- lucide-react
- SVG
§19-02Maps
近接する多数のピンを一つの円に束ねて示す。
地図上の点が多すぎて重なり、個々を判別できない問題に効く。店舗や投稿の分布を広域で見せる場面に向く。
ズームレベルごとにグリッドや距離で点を束ね、件数に応じて円の大きさを変える。クラスタをクリックしたら展開できる範囲までズームインさせる。