§19-01
マップ + マーカー (Mapbox/MapLibre)
地図上に地点をマーカーで表示する。
店舗や物件、イベントの場所を位置関係とともに伝えられる。住所の一覧より、どこが近いかを直感的に見せたいときに使う。
実装のポイント地図ライブラリではマーカーを GeoJSON ソースとシンボルレイヤーで描くと、DOM マーカーより大量の点を軽く扱える。ラベルは衝突判定で重なりを間引く。
- CSS のみ
- モック
§19
マップ・地理
Maps
- Patterns
- 11
- Demos
- 11
§19-02
マーカークラスタリング
近接する多数のピンを一つの円に束ねて示す。
地図上の点が多すぎて重なり、個々を判別できない問題に効く。店舗や投稿の分布を広域で見せる場面に向く。
実装のポイントズームレベルごとにグリッドや距離で点を束ね、件数に応じて円の大きさを変える。クラスタをクリックしたら展開できる範囲までズームインさせる。
- CSS のみ
- モック
§19-03
ヒートマップ overlay
地図上に点の密度を色の濃淡で重ねる。
個々の点では読めない集中地域や空白地帯を一目で把握できる。店舗の利用や事故の発生など、地点データが多いときに使う。
実装のポイント点にカーネル密度を割り当てて半径と重みで塗り、ズームに応じて半径を補間する。色は透明から始まるグラデーションにして下の地図を潰さない。
- CSS のみ
- モック
§19-04
ルート表示 (polyline)
地図上に出発地から目的地までの経路を線で描く。
出発地から目的地までの道筋を地図に重ね、距離感と経由地を直感的に伝える。配送追跡や移動記録など、道のり自体が情報になる場面で使う。
実装のポイント経路は座標列を LineString として線レイヤーで描き、始点と終点を別マーカーで示す。全体が収まるよう座標の外接矩形で fitBounds し、余白を取る。
- CSS のみ
- モック
§19-05
現在地取得 + 追従
現在地を取得して地図の中心を合わせ、移動に追従する。
自分の周りに何があるかをすぐ探せる。店舗検索や経路案内のように、利用者の位置が検索の起点になる機能に使う。
実装のポイントgetCurrentPosition は単発、追従するなら watchPosition を使いアンマウント時に clearWatch する。許可拒否やタイムアウトのエラーを分けて案内する。
- ブラウザ API
- 非同期
§19-06
描画ツール (polygon/circle)
地図上に多角形や円を描いて範囲を選ぶ。
利用者が自分で範囲を指定して検索や集計を行う。配達区域や調査対象の設定など、住所では表せない範囲を扱うときに使う。
実装のポイントクリックで頂点を追加し、ダブルクリックか始点クリックで閉じる。描いた図形は GeoJSON で保持し、頂点ドラッグでの編集と Esc での取り消しを用意する。
- 状態管理
- モック
§19-08
street view 埋め込み
地点の 360 度写真を地図と並べて見せる。
地図では分からない現地の雰囲気や建物の外観を事前に確認できる。待ち合わせ場所や物件の案内で、到着時の迷いを減らす。
実装のポイント360 度画像は正距円筒図法のパノラマをカメラ内側から投影して表示する。ドラッグで視点を回し、地図側にも現在の向きを示すと位置関係を掴みやすい。
- モック
§19-09
isochrone (到達圏)
ある地点から一定時間で到達できる範囲を地図に描く。
直線距離ではなく実際の移動時間で候補を比べられる。通勤圏からの物件探しや、配送範囲の提示に向く。
実装のポイント到達圏は経路計算 API から時間ごとの多角形を受け取り、外側から順に重ねて描く。単なる同心円ではなく道路網に沿った形になる点を表現する。
- CSS のみ
- モック
§19-10
住所オートコンプリート
住所を入力途中から候補で補完する。
住所の入力を短くし、誤記や表記のゆれを防ぐ。配送先や店舗検索の入力で、離脱や配達ミスを減らしたいときに効く。
実装のポイント入力を debounce して候補を取得し、古いリクエストは AbortController で破棄する。role="combobox" と aria-activedescendant で矢印キー選択を読み上げに伝える。
- フォーム
- キーボード操作
- モック
§19-11
経路シェア link
経路の出発地と目的地を URL で共有する。
調べた経路をそのまま相手に渡し、開いた側が同じ地図を見られる。待ち合わせや旅程の共有で使う。
実装のポイント出発地と目的地の座標を URL の search params に入れ、開いた側で復元する。共有は navigator.share を優先し、非対応なら clipboard.writeText にフォールバックする。
- ブラウザ API
- 非同期