§19-04Maps
ルート表示 (polyline)
地図上に出発地から目的地までの経路を線で描く。
出発地から目的地までの道筋を地図に重ね、距離感と経由地を直感的に伝える。配送追跡や移動記録など、道のり自体が情報になる場面で使う。
実装のポイント
経路は座標列を LineString として線レイヤーで描き、始点と終点を別マーカーで示す。全体が収まるよう座標の外接矩形で fitBounds し、余白を取る。
- 特徴
- CSS のみ
- モック
- デモで使っているもの
- lucide-react
- SVG
§19-04Maps
地図上に出発地から目的地までの経路を線で描く。
出発地から目的地までの道筋を地図に重ね、距離感と経由地を直感的に伝える。配送追跡や移動記録など、道のり自体が情報になる場面で使う。
経路は座標列を LineString として線レイヤーで描き、始点と終点を別マーカーで示す。全体が収まるよう座標の外接矩形で fitBounds し、余白を取る。