本文へ移動

§19-03Maps

ヒートマップ overlay

地図上に点の密度を色の濃淡で重ねる。

個々の点では読めない集中地域や空白地帯を一目で把握できる。店舗の利用や事故の発生など、地点データが多いときに使う。

実装のポイント

点にカーネル密度を割り当てて半径と重みで塗り、ズームに応じて半径を補間する。色は透明から始まるグラデーションにして下の地図を潰さない。

特徴
  • CSS のみ
  • モック
デモで使っているもの
  • Canvas 2D
  • SVG