D3.js v4を使ってGoogle Map上にSVGをオーバーレイする。

最終更新日

概要

D3.js ver.4 を使ってGoogle Map 上にGeoJSONから生成したポリゴンを表示します。

サンプル

d3v4 GoogleMap SVG Overlay

example

ポイント

d3.geoTransform を使って地理情報(緯度経度)を、画面上の座標(ピクセル)に変換するカスタムプロジェクションを生成しています。
ver.4では、カスタムプロジェクションは必ずgeo stream形式で変換後のデータを渡すように統一されました。

最後で、4000pxを加算しているのは、svgレイヤーをcssで-4000pxほどズラして配置しているためです。

これは、マップをパン/ズームしたり動かしたりした際にオーバレイしているsvg要素が欠けてしまうのを防ぐために必要な処理です。

1件のコメント